(1)JQuery基础核心

页面导航:首页 > 网络编程 > JavaScript > (1)JQuery基础核心

(1)JQuery基础核心

来源: 作者: 时间:2016-02-05 11:06 【

一、知识点简记:1、JQuery的兼容性非常好,不需要考虑不同浏览器的兼容问题。2、主流的JavaScript库:YUI、Prototype、Mootools、Dojo、ExtJS(加载页面卡,付费)。3、JQuery2 0不再支持IE6 7 8。

一、知识点简记:

1、JQuery的兼容性非常好,不需要考虑不同的兼容问题。


2、主流的Script库:YUI、Prototype、Mootools、Dojo、ExtJS(加载页面卡,付费)。


3、JQuery2.0不再支持IE6/7/8。


4、完全不支持IE6:网易云课堂。


5、"$"是JQuery对象,JQuery特有的对象。


6、使用"$"符号和"jQuery"是恒等的。


7、$(function(){

alert($);//返回的是jQuery对象的内部
alert($());//返回JQuery对象
alert($('#box'));//返回JQuery对象
alert($('#box').css('color','red'));//返回JQuery对象
$('#box').css('color','red').css('font-size','200px').css('font-weight','blod');
//既然能返回jQuery对象,那么在一个css()之后还能继续添加css样式,例如上一行所示
});


8、为什么要使用$(function(){});这段代码进行首尾包裹?原因是我们的JQuery库文件是在body元素之前加载的,我们必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到。


9、$(document).ready(function(){});简写为$(function(){});一般不用window.onload。


10、如果有其他库引入之后会造成一些符号的冲突,比如一个b库里面也有$符号,那么我们可以将JQuery对象的$(即JQuery对象)换个变量名:
var $$=jQuery;
另一种方法是:
jQuery.noConflict();//将$所有权限剔除
剔除$所有权之后,原来的$的get方法无效,那么可以写上下面一句:
var $$=jQuery;//然后alert($$('#box').get(0));


二、demo

简单项目结构:

\

index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<>
  
    
    
    JQuery
	<script type="text/javascript" src="jquery-1.11.1.js"></script>
	<script type="text/javascript" src="demo.js"></script>
  
  
  
	
	
基础核心

demo.js文件:

/*$(function(){
	
	$('input').click(function(){
		alert("JQeury程序");
	});
});*/




/*$(function(){
	
	$('#box').css('color','red');//将添加一个行内的css样式
	
});*/




/*jQuery(function(){
	
	$('#box').css('color','red');//将添加一个行内的css样式
	
});*/



/*$(function(){
	
	alert($);//返回的是jQuery对象的内部
	alert($());//返回JQuery对象
	alert($('#box'));//返回JQuery对象
	alert($('#box').css('color','red'));//返回JQuery对象
	$('#box').css('color','red').css('font-size','200px').css('font-weight','blod');
	
});*/



/*window.onload=function(){
	$('#box').css('color','red');
	
};
*/



/*
 * //只打印出2,不打印1,因为覆盖了前面的值
 * 
 * window.onload=function(){
	alert(1);
	
};

window.onload=function(){
	alert(2);
	
};
*/



/*
//这里先打印1再打印2,没有被覆盖
$(document).ready(function(){
	
	alert(1);
});

$(document).ready(function(){
	alert(2);
});*/



$(function(){
	
	alert($('#box'));//返回JQuery对象
	alert(document.getElementById('box'));//[object HTMLDivElement],原生DOM对象
	alert($('#box').get(0));//获取原生的dom对象,获取第一个id为box的元素
	alert($(document.getElementById('box')));//返回JQuery对象,Jquery对象和Dom对象之间的互换
});



Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<