1、JQuery简介
普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库，比如Prototype、Dojo、ExtJS、JQuery等，这些库对JavaScript进行了封装，简化了开发。这些库是对JavaScript的封装，也就是咱们调用JQuery的一句函数，JQuery内部这句函数帮我们调用JavaScript中的代码几十句，因为JQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用JQuery的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术，Jquery本身就是一堆JavaScript函数。
（1、Jquery是最火的JavaScript库，已集成到VS2010，MS的Ajax toolkit和JQuery结合也是最方便，JQuery的扩展插件也是非常多。
（2、JQuery的优点：尺寸小、使用简单方便（Write Less, Do More，吃得少干得多。
链式编程（$("#div1").draggble().show().hide().fly()）、
隐式迭代 （自动对于多个元素进行迭代方法调用））、
屏蔽浏览器差异跨浏览器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）、插件丰富、 开源、免费。
（3、VS中JavaScript、JQuery的自动完成功能：在VS2010中直接有，VS008需要安装VisualStudio 和VS90SP1-KB958502-x86补丁会更强更好用, 下
载地址见备注。然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放到同目录下，不需要在页面引用。
（4、vsdoc是vs2008sp1以后增加的一个技术，将js文件对应的vsdoc（相当于js库提供的方法的说明库）放到和js一起，就有会第三方js的自动提示的功能
2、简单的JQuery之Ready
（1、注册事件的函数，和普通的dom不一样，不需要在元素上标记on**这样的事件。
$(document).ready(function(){
alert("加载完毕！");
});
（2、当页面Dom元素加载完毕时执行代码，可以简写为：
$(function(){
alert("加载完毕！");
});
（3、和onload类似，但是onload只能注册一次（没有C#中的+=机制），后注册的取代先注册的，而ready则可以多次注册都会被执行。
window.onload=function(){alert("1")};window.onload=function(){alert("2")};//结果只弹出2
（4、JQuery的ready和Dom的onload的区别(*)：onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发，而ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。
$(function(){alert("1111");});//简写方式
3、JQuery的函数
$.map(array,fu) 得到函数的返回值和$.each(array,fn)调用函数处理没有返回值
map函数和each函数
map函数和each函数
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 /*$.map(array,fu) 8 var arr1 = [1, 2, 3]; 9 var arrOne = $.map(arr1, function (item) { return item * 2; }); 10 alert(arrOne);*/ 11 12 /*$.each(array,fn)*/ 13 var arr2 = [1, 2, 3]; 14 //$.each(arr2, function (key, item) { alert(key+" and "+item); });//两个参数返回的是key+值 15 //$.each(arr2, function (item) { alert(item); });//一个参数返回的是key 16 $.each(arr2, function () { alert(this); });//没有参数自觉返回值 17 </script> 18 </head> 19 <body> 20 21 </body> 22 </html>
4、JQuery对象和Dom对象
（1、$('#div1')得到的就是jQuery对象，jQuery对象只能调用jQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用jQuery对象的方法，所
以 alert($('#div1').innerHTML是错的，因为innerHTML是DOM对象的属性。
（2、Array是JS语言本身的对象，不是Dom对象，因此不需要转换为Jquery对象才能用
（3、将Dom对象转换为JQuery对象的方法，$(dom对象)；当调用jQuery没有封装的方法的时候必须用Dom对象，转换方法：vardomobj = jqobj[0]或者
vardomobj=jqobj.get(0)
（4、在引用外部js的Script标签内不能再写js代码，引用外部js的Script标签也不能用简写方法闭合。
JQuery对象和Dom对象
JQuery对象和Dom对象
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 /*JQuery 对象*/ 8 //$(function () { alert($('#div1').html()); }); 9 10 /*Dom对象转化为JQuery对象*/ 11 //$(function () { var dom1 = document.getElementById("div1"); $(dom1).html("<font color='black'>测试black</font>"); }); 12 13 /*JQuery对象转化为Dom对象 +一个[0]*/ 14 //$(function () { var jquery1 = $(div1)[0]; alert(jquery1.innerHTML); }); 15 16 /*JQuery 修改样式css 还有val*/ 17 //$(function () { $('#div1').css("background", "gray"); });//css两个参数是设置值 18 //$(function () { alert($('#div1').css("background")); }); //css一个参数是取值 19 //$(function () { $('#myInput').val(new Date()); }); //val一个参数是设置值 20 //$(function () { alert($('#myInput').val()); }); //val没有参数是取值 21 22 </script> 23 </head> 24 <body> 25 <div id="div1"> 26 <font color="red">测试red</font> 27 <input type="text" name="name" value="kong" id="myInput" /> 28 </div> 29 </body> 30 </html>
5、JQuery 选择器
（1、$(“#div1”).html();
（2、$("TagName")来获取所有指定标签名的jQuery对象，相当于getElementsByTagName：
例如获得所有的P：$("p").html("我们都是P");
（3、标签选择器，拥有样式的标签选择器
☆ 多条件选择器：$("p,div,span.menuitem")，同时选择p标签、div标签和拥有menuitem样式的span标签元素（类似于CSS选择器）
☆ 注意选择器表达式中的空格不能多不能少。易错！
☆ 层次选择器：
☆☆$("div li")获取div下的所有li元素（后代，子、子的子……）
☆☆$("div > li")获取div下的直接li子元素
☆☆$(".menuitem +div")获取样式名为menuitem之后的第一个div元素（不常用）
☆☆$(".menuitem ~div")获取样式名为menuitem之后所有的div元素（不常用）
案例1：
JQuery选择器1
JQuery选择器1
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 6 7 <script type="text/javascript"> 8 $(function () { 9 $('.test').click( 10 function () { 11 alert($(this).text()); 12 } 13 ); 14 }); 15 </script> 16 <style type="text/css"> 17 .test{ background-color:Red} 18 </style> 19 </head> 20 <body> 21 <div id="div1"> 22 <p class="test"> 23 test1</p> 24 <p class="test"> 25 test2</p> 26 <p class="test"> 27 test3</p> 28 </div> 29 </body> 30 </html>
6、JQuery的迭代
如何判断对象是否存在，jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象)，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：
if($("#btn1").length <= 0) {
alert("id为btn1的元素不存在！");
}
7、节点遍历
（1、 next() 方法用于获取节点之后的挨着的第一个同辈元素，
（2、$(".menuitem").next("div") 、 nextAll() 方法用于获取节点之后的所 有同辈元素， $(".menuitem").nextAll("div") prev 、 prevAll 之前的元素
（2、$(".menuitem").next("div") 、 nextAll() 方法用于获取节点之后的所 有同辈元素， $(".menuitem").nextAll("div") prev 、 prevAll 之前的元素
（3、siblings() 方法用于获取所有同辈元素，$(".menuitem").siblings("li") siblings 、next 等所有能传递选择器的地方能够使用的语法都和 $() 语法一样。
节点遍历
添加样式和移除样式
五角星评分
View Code
节点遍历
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 /*next() 和nextAll()的用法 8 $(function () { 9 $("div").click(function () { 10 //alert($(this).next().text()); 11 //alert($(this).next("p").text()); 12 //alert($(this).nextAll().text()); 13 //alert($(this).nextAll("div").text()); 14 }); 15 });*/ 16 /*高亮显示所以next*/ 17 //$(function () { $("div").click(function () { $(this).nextAll("div").css("background","red"); }); }); 18 /*高亮显示自己而已*/ 19 //$(function () { $("div").click(function () { $(this).css("background", "red"); $(this).siblings().css("background","white"); }); }); 20 $(function () { $("div").click(function () { $(this).css("background", "red").siblings().css("background", "white"); }); }); 21 22 23 </script> 24 </head> 25 <body> 26 <div> 27 aa</div> 28 <div> 29 bb</div> 30 <div> 31 cc</div> 32 <p> 33 p1</p> 34 <p> 35 p2</p> 36 <div> 37 dd</div> 38 <div> 39 ee</div> 40 </body> 41 </html>
8、链式编程
链式编程就是对象一棒棒向下传，能不能正确传下来要看返回值，html()不能传，prevAll().nextAll()也传错。
$("#tableRating td").click(function() {$(this).prevAll().next().html("a"); });//经典！
案例1：样式的增删：addClass和removeClass
添加样式和移除样式
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 .menuitem{background-color:Yellow; } 7 .highlight { background-color: Red;} 8 </style> 9 <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 10 <script type="text/javascript"> 11 $(function () { $(".menuitem").click(function () { $(this).addClass("highlight").siblings().removeClass("highlight"); }); }); 12 13 </script> 14 </head> 15 <body> 16 <p class="menuitem">111111</p><br /> 17 <p class="menuitem">111111</p><br /> 18 <p class="menuitem">111111</p><br /> 19 </body> 20 </html>
案例2：五角星评分
五角星评分
1 /* 2 $(function() { 3 $("#ratings td").html("<img src='images/star_off.gif' />") 4 .mouseover(function() { $("#ratings td").html("<img src='images/star_on.gif' />"); $(this).nextAll().html("<img src='images/star_off.gif' />"); }); 5 6 }); 7 */ 8 9 $(function() { 10 $("#ratings td").html("<img src='images/star_off.gif' />") 11 .mouseover(function() { $("#ratings td").html("<img src='images/star_on.gif' />") 12 .siblings().html("<img src='images/star_on.gif' />"); 13 $(this).nextAll().html("<img src='images/star_off.gif' />"); 14 }); 15 16 }); 17 18 19 <table id=ratings> 20 <tr><td></td><td></td><td></td><td></td><td></td></tr> 21 </table>
9、基本过滤选择器
（1、:first 选取第一个元素。 $("div:first") 选取第一个 <div>
（2、:last 选取最后一个元素。 $("div:last") 选取最后一个 <div>
（3、:not( 选择器 ) 选取不满足 " 选择器 " 条件的元素，
$("input:not(.myClass)") 选取样式名不是 myClass 的 <input>
（4、:even 、 :odd ，选取索引是奇数、偶数的元素： $("input:even") 选
取索引是奇数的 <input>
（5、:eq( 索引序号 ) 、 :gt( 索引序号 ) 、 :lt( 索引序号 ) 选取索引等于、大于、小于索引序号的元素，比如 $("input:lt(5)") 选取索引小于 5 的 <input>
（6、$(":header") 选取所有的 h1 …… h6 元素（ * ）
$("div:animated") 选取正在执行动画的 <div> 元素。 （ * ）
案例1：
$("#table1 tr:last").css("color", "red");
$("#table1 tr:gt(0):lt(3)").css("color", "red");//lt(3)是从gt(0)后得到的新序列中的序号，不要写成lt(4);
$("#table1 tr:gt(0):even").css("background", "red"); //表头不参与"正文表格的奇数行是红色背景",所以gt(0)去掉表头
10、相对选择器
不仅可以使用选择器进行进行绝对定位，还可以进行相对定位， （双重选择）
只要在 $() 指定第二个参数，第二个参数为相对的元素 . $("ul", $(this)).css("background", "red"); //ul下面的+包含本身=ul下面的本身
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5
6 <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 $(function () {
9 $("#t1 tr").click(function () {
10 $("td", $(this)).css("background", "Yellow");
11 });
12 });
13 </script>
14 </head>
15 <body>
16 <table id="t1">
17 <tr><td>姓名</td><td>成绩</td></tr>
18 <tr><td>tom</td><td>100</td></tr>
19 <tr><td>lucy</td><td>99</td></tr>
20 <tr><td>jim</td><td>95</td></tr>
21 <tr><td>david</td><td>85