一、使用jQuery为标签添加属性或者样式
1、$("#id名").css("css属性名"，"属性值")；比如：$("tbody tr:even").css("background-color","yellow");
2、使用addClass（"class名"），然后在引入的css文件中写样式：.class名{。。。}；比如：$("tbody tr:even").addClass("even"); css中：.even{back-groundcolor：red；}
二、js和jQuery当前对象的区别、事件的区别
1、js中用this来表示当前操作的对象；而jQuery中用${this}来表示当前操作的对象；
注：这里指的是，要使用jQuery属性，或者使用jQuery中的方法时，就必须用${this}.属性名；如：${this}.value；但是，jQuery代码中也可以用this代表当前对象，前提是js和jQuery属性或者方法不混用；
2、jQuery中的事件去掉了前边的on；
三、jQuery中的遍历（遍历集合，js中只有数组，没有集合）
注：关于方式二，可以遍历对象，例如：
四、文档处理操作：
1、追加（插入操作）内容（A、B是jQuery对象）
apend: A.append(B) 将B追加到A的内容的末尾处；
appendTo: A.appendTo(B) 将A加到B内容的末尾处；
2、删除
a、empty()；返回值：jQuery，删除匹配的元素集合中所有的子节点。
b、remove（[expr]）；返回值：jQuery；从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
c、detach([expr])；返回值：jQuery；这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
3、复制操作：
4.替换操作
五、属性操作、表单对象属性；
1、attr属性操作：
a、attr（name）：$("img").attr("src")获取的是img标签里的src属性的值，返回：/xxx.jpg；
b、attr（key，value）：$("img").attr("height","800px")；设置属性的值；
c、attr（properties）：同时设置多个属性值；$("img").attr({"width":"90px","height":"100px"});
d、removeAttr（name）：删除某个属性和值；$("img").removeAttr("width")；
2、css类操作
3、val（）、text（）、html（）；
html操作：
text操作：
val操作：
3、表单对象属性：
enabled、disabled、checked、selected，下面以selected为例：
结果只显示出被选中的option，即获得了被选中的option对象；
六、jQuery案例
1、省市二级联动
（1）步骤分析：
第一步：确定事件(change事件),在绑定的函数里面获取用户选择的省份
第二步：创建二维数组来存储省份和城市
第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】
第四步：接着遍历数组中的城市
第五步：创建一个城市文本节点
第六步：创建option元素节点
第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】
第八步：获取第二个下拉列表并将option元素节点添加进去
第九步：清除第二个下拉列表的option内容
（2）代码实现：
1 js代码： 2 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 3 <script> 4 $(function(){ 5 //2.创建二维数组用于存储省份和城市 6 var cities = new Array(3); 7 cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市"); 8 cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市"); 9 cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市"); 10 cities[3] = new Array("郑州市","洛阳市","开封市","安阳市"); 11 12 $("#province").change(function(){ 13 //10.清除第二个下拉列表的内容 14 $("#city").empty(); 15 16 //1.获取用户选择的省份 17 var val = this.value; 18 //alert(val); 19 //3.遍历二维数组中的省份 20 $.each(cities,function(i,n){ 21 //alert(i+":"+n); 22 //4.判断用户选择的省份和遍历的省份 23 if(val==i){ 24 //5.遍历该省份下的所有城市 25 $.each(cities[i], function(j,m) { 26 //alert(m); 27 //6.创建城市文本节点 28 var textNode = document.createTextNode(m); 29 //7.创建option元素节点 30 var opEle = document.createElement("option"); 31 //8.将城市文本节点添加到option元素节点中去 32 $(opEle).append(textNode); 33 //9.将option元素节点追加到第二个下拉列表中去 34 $(opEle).appendTo($("#city")); 35 }); 36 } 37 }); 38 39 }); 40 }); 41 </script> 42 43 html代码（部分）： 44 <tr> 45 <td>籍贯</td> 46 <td> 47 <select onchange="changeCity(this.value)"> 48 <option>--请选择--</option> 49 <option value="0">湖北</option> 50 <option value="1">湖南</option> 51 <option value="2">河北</option> 52 <option value="3">河南</option> 53 </select> 54 <select id="city"> 55 56 </select> 57 </td> 58 </tr>
2、下拉列表左右选择
效果图：
（1）步骤分析：
第一步：确定事件(鼠标单击事件click) 第二步：获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left] 第三步：将获取到的option添加到右侧的下拉列表中去。(append方法的使用)
（2）代码实现：
1 js代码： 2 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 3 <script> 4 $(function(){ 5 /*1.选中单击去右边*/ 6 $("#selectOneToRight").click(function(){ 7 $("#left option:selected").appendTo($("#right")); 8 }); 9 10 /*2.单击全部去右边*/ 11 $("#selectAllToRight").click(function(){ 12 $("#left option").appendTo($("#right")); 13 }); 14 15 /*3.选中双击去右边*/ 16 $("#left option").dblclick(function(){ 17 $("#left option:selected").appendTo($("#right")); 18 }); 19 }); 20 </script> 21 22 html代码： 23 <td> 24 <span style="float: left;"> 25 <font color="green" face="宋体">已有商品</font><br/> 26 <select multiple="multiple" style="width: 100px;height: 200px;" id="left"> 27 <option>IPhone6s</option> 28 <option>小米4</option> 29 <option>锤子T2</option> 30 </select> 31 <p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p> 32 <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p> 33 </span> 34 <span style="float: right;"> 35 <font color="red" face="宋体">未有商品</font><br/> 36 <select multiple="multiple" style="width: 100px;height: 200px;" id="right"> 37 <option>三星Note3</option> 38 <option>华为6s</option> 39 </select> 40 <p><a href="#" ><<</a></p> 41 <p><a href="#" ><<<</a></p> 42 </span> 43 </td>
七、jQuery事件总结（jQuery里的事件都是方法，比如blur（fn）、change（fn）、click（fn），fn代表函数）
1、ready（）页面载入事件（页面加载顺序问题，及解决方案）；如：
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 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>页面未加载执行失败</title> 7 <script type="text/javascript"> 8 document.getElementById("panel").onclick = function() { 9 alert("元素已经加载完毕 !"); 10 } 11 /* 12 执行错误，为什么？ 13 因为dom还未加载完毕。 14 */ 15 </script> 16 </head> 17 18 <body> 19 <div id="panel">click me.</div> 20 </body> 21 22 </html>
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 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>4-1-2</title> 7 </head> 8 <!--解决办法： 9 方式一：将JS代码移到需要操作的html代码后面，一般建议放到body的外面 10 方式二：将JS代码放到一个页面加载函数中去--> 11 12 <body> 13 <div id="panel">click me.</div> 14 <script type="text/javascript"> 15 document.getElementById("panel").onclick = function() { 16 alert("元素已经加载完毕 !"); 17 } 18 /*正确执行*/ 19 </script> 20 </body> 21 22 </html>
2、bind（"click",function(){}）绑定函数事件；如：
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 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>点击展开</title> 7 <link rel="stylesheet" type="text/css" href="../../../css/style.css" /> 8 <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script> 9 <script type="text/javascript"> 10 $(function() { 11 $("#panel h5.head").bind("click", function() { 12 var $content = $(this).next(); 13 if($content.is(":visible")) { 14 $content.hide(); 15 } else { 16 $content.show(); 17 } 18 }) 19 }) 20 </script> 21 </head> 22 23 <body> 24 <div id="panel"> 25 <h5 class="head">什么是jQuery?</h5> 26 <div class="content"> 27 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 28 </div> 29 </div> 30 </body> 31 32 </html>
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 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>鼠标滑过</title> 7 <link rel="stylesheet" type="text/css" href="../../../css/style.css" /> 8 <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script> 9 <script type="text/javascript"> 10 $(function() { 11 $(".head").mouseover(function() { 12 $(this).next().show(); 13 }).mouseout(function() { 14 $(this).next().hide(); 15 }) 16 }) 17 </script> 18 </head> 19 20 <body> 21 <div id="panel"> 22 <h5 class="head">什么是jQuery?</h5> 23 <div class="content"> 24 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 25 </div> 26 </div> 27 </body> 28 29 </html>
3、next（）返回后面那个紧邻的同辈元素；如：
HTML 代码: <p>Hello</p><p>Hello Again</p><div><span>And Again</span></div> jQuery 代码: $("p").next()； 结果：返回的是每个段落的后面紧邻的同辈元素（第一个p后面的p，第二个p对象后面的div对象）： <p>Hello Again</p><div><span>And Again</span></div> 如果只有一个p：<p>Hello Again</p><div><span>And Again</span></div> 则$("p").next()；结果返回的只有<div><span>And Again</span></div>
4、事件移除：
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 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>事件移除</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 body { 14 font-size: 13px; 15 line-height: 130%; 16 padding: 60px; 17 } 18 19 p { 20 width: 200px; 21 background: #888; 22 color: white; 23 height: 16px; 24 } 25 </style> 26 <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script> 27 <script type="text/javascript"> 28 $(function() { 29 $('#btn').bind("click", function() { 30 $('#test').append("<p>我的绑定函数1</p>"); 31 }); 32 $('#delAll').click(function() { 33 $('#btn').unbind("click"); 34 }); 35 }) 36 </script> 37 </head> 38 39 <body> 40 <button id="btn">点击我</button> 41 <div id="test"></div> 42 <button id="delAll">删除所有事件</button> 43 </body> 44 45 </html>
5、事件合成：
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 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>合成事件hover</title> 7 <link rel="stylesheet" type="text/css" href="../../../css/style.css" /> 8 <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script> 9 <script type="text/javascript"> 10 $(function() { 11 $(".head").hover(function() { 12 $(this).next().show(); 13 }, function() { 14 $(this).next().hide(); 15 }) 16 }) 17 </script> 18 </head> 19 20 <body> 21 <div id="panel"> 22 <h5 class="head">什么是jQuery?</h5> 23 <div class="content"> 24 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 25 </div> 26 </div> 27 </body> 28 29 </html>
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 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>合成事件toggle</title> 7 <link rel="stylesheet" type="text/css" href="../../../css/style.css" /> 8 <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script> 9 <script type="text/javascript"> 10 $(function() { 11 $(".head").toggle(function() { 12 $(this).next().hide(); 13 }, function() { 14 $(this).next().show(); 15 }) 16 }) 17 </script> 18 </head> 19 20 <body> 21 <div id="panel"> 22 <h5 class="head">什么是jQuery?</h5> 23 <div class="content"> 24 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 25 </div> 26 </div> 27 </body> 28 29 </html>
