一、jQuery简介（write less，do more）
1、jQuery概念
jQuery是一个轻量级（严格意义上说，不能称为一个框架）的js库，辅助js开发，兼容css，多浏览器，jQuery2.0及之后的版本不再支持IE6/7/8，能够使用户更加方便的处理HTML、events、实现动画效果，并且方便的为网站提供AJAX交互；最大的优势是：说明文档很全，各种应用说明的十分详细，还有许多成熟的js插件可供选择。
使用了jQuery之后，就不需要在HTML里边插入大量的js代码，只需要定义一个id即可（有些时候不需要）；
2、jQuery版本
jquery-1.8.3.js：体积大，适合学习使用；jquery-1.8.3.min.js：，压缩版，体积小，适合开发使用；（1.8.3是目前使用较多的版本）
二、jQuery的引入和对象获取
1、jQuery既然是一个js库，使用前就要先引入：<script type="text/javascript" src="xxx/jquery-1.8.3.js"></script>;
/*知识点*/：传统的js页面加载（onload）和jQuery页面加载的区别：
a、传统的js页面加载（onload）只能写一次，多次书写会存在后面覆盖前面的现象，且jQuery的页面加载比js快；
b、jQuery加载会在整个dom树结构绘制完成之后进行加载，而js是在整个页面加载完成之后再加载；
c、jQuery多次书写不存在覆盖的问题，多次加载的话，从上往下顺序执行，如下（包含了几种jQuery的书写规范）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS与JQ页面加载区别</title> 6 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 7 <script> 8 window.onload = function(){ 9 alert("张三"); 10 } 11 12 //传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>) 13 window.onload = function(){ 14 alert("老王"); 15 } 16 17 //JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载) 18 jQuery(document).ready(function(){ 19 alert("李四"); 20 }); 21 22 //JQ不存在覆盖问题，加载的时候是顺序执行 23 $(document).ready(function(){ 24 alert("王五"); 25 }); 26 27 //简写方式 28 $(function(){ 29 alert("汾九"); 30 }); 31 32 </script> 33 </head> 34 <body> 35 </body> 36 </html>
2、jQuery获取对象
(1)语法：var a = $("#id名")；（括号里边实际上放的是选择器，这里写的是id选择器（常用的），也可以使用别的，如：$("p")，指的是p标签选择器）；
例如：$("#id名").click(function(){ alert("dadada"); })；
注：a、DOM对象（js）无法操作JQ对象里面属性和方法；JQ对象也无法操作JS里面的属性和方法；
b、var b = document.getElementById("span1")；其中a是jQuery对象，b是dom对象，两者不同，属性不能混着使用，但是两个对象可以转换；
(2)两种对象之间的转换：
jQuery对象向dom对象的转换(转换后可以使用dom的属性innerHTML)的两种方法：
a、$("#span1").get(0).innerHTML="美美哒！";
b、$("#span1").[0].innerHTML="美美哒！";
dom对象向jQuery对象的转换：
var b = document.getElementById("span1")；——>${b}.html="美美哒";
注：转换为jQuery对象之后，html可以换位css（即：可以使用jQuery的属性）：
比如：$("tbody tr:even").css("background-color","yellow");
（3）在实际开发中，var opEle= xxx；opEle是一个js变量，var $opEle= xxx；$opEle指的是jQuery变量；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dom与JQ对象之间的转换</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
function write1(){
//1.JS的DOM操作
//document.getElementById("span1").innerHTML="萌萌哒！";
//DOM对象无法操作JQ对象里面属性和方法
//document.getElementById("span1").html("萌萌哒！");
var spanEle = document.getElementById("span1");
//将DOM对象转换成JQ对象
$(spanEle).html("思密达");
}
$(function(){
$("#btn").click(function(){
//JQ对象无法操作JS里面的属性和方法！！！
//$("#span1").innerHTML="呵呵哒！"，innerHTML是js的属性
$("#span1").html("呵呵哒！");//这里只能用html
//JQ对象向DOM对象转换方式一
$("#span1").get(0).innerHTML="美美哒！";
//JQ对象向DOM对象转换方式二
$("#span1")[0].innerHTML="棒棒哒！";
});
});
</script>
</head>
<body>
<input type="button" value="JS写入" onclick="write1()"/>
<input type="button" value="JQ写入" id="btn"/><br />
班长：<span id="span1">你好帅！</span>
</body>
</html>
三、jQuery的方法介绍（具体见jQuery手册，这些方法不要求掌握（原因是效果太low））
1、效果类方法
show（）：显示隐藏的图片等；hide（）：隐藏图片等；
slideDown（）/slideUp（）；fadeIn（）/fadeOut（）；
掌握一种方法：toggle（）：显示/隐藏标签，写一个小代码介绍一下：
当然toggle（switch）参数可为true：显示；false：隐藏；可以用表达式代表true或者false；
1 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 2 <script> 3 $(function(){ 4 $("#btn").click(function(){ 5 $("#img1").toggle(); 6 }); 7 }); 8 </script>
四、jQuery的选择器
1、基本选择器：#id（id选择器）、element（标签选择器）、.class（类选择器）、*（通用选择器）、（selector1，selector2，selectorN）（群组选择器）；
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基本选择器</title> 6 <link rel="stylesheet" href="../../css/style.css" /> 7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 8 <script> 9 $(function(){ 10 $("#btn1").click(function(){ 11 $("#one").css("background-color","pink"); 12 }); 13 14 $("#btn2").click(function(){ 15 $(".mini").css("background-color","pink"); 16 }); 17 18 $("#btn3").click(function(){ 19 $("div").css("background-color","pink"); 20 }); 21 22 $("#btn4").click(function(){ 23 $("*").css("background-color","pink"); 24 }); 25 26 $("#btn5").click(function(){ 27 $("#two,.mini").css("background-color","pink"); 28 }); 29 }); 30 </script> 31 32 </head> 33 <body> 34 <input type="button" id="btn1" value="选择为one的元素"/> 35 <input type="button" id="btn2" value="选择样式为mini的元素"/> 36 <input type="button" id="btn3" value="选择所有的div元素"/> 37 <input type="button" id="btn4" value="选择所有元素"/> 38 <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/> 39 <hr/> 40 <div id="one"> 41 <div class="mini"> 42 111 43 </div> 44 </div> 45 46 <div id="two"> 47 <div class="mini"> 48 222 49 </div> 50 <div class="mini"> 51 333 52 </div> 53 </div> 54 55 <div id="three"> 56 <div class="mini"> 57 444 58 </div> 59 <div class="mini"> 60 555 61 </div> 62 <div class="mini"> 63 666 64 </div> 65 </div> 66 67 <span id="four"> 68 69 </span> 70 </body> 71 </html>
2、层级选择器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>层级选择器</title> 6 <link rel="stylesheet" type="text/css" href="../../css/style.css"/> 7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 8 <script type="text/javascript"> 9 $(function(){ 10 $("#btn1").click(function(){ 11 $("body div").css("background-color","gold"); 12 }); 13 14 $("#btn2").click(function(){ 15 $("body>div").css("background-color","gold"); 16 }); 17 18 $("#btn3").click(function(){ 19 $("#two+div").css("background-color","gold"); 20 }); 21 22 $("#btn4").click(function(){ 23 $("#one~div").css("background-color","gold"); 24 }); 25 }); 26 </script> 27 28 29 </head> 30 <body> 31 <input type="button" id="btn1" value="选择body中的所有的div元素"/> 32 <input type="button" id="btn2" value="选择body中的第一级的孩子"/> 33 <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/> 34 <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/> 35 36 <hr/> 37 <div id="one"> 38 <div class="mini"> 39 111 40 </div> 41 </div> 42 43 <div id="two"> 44 <div class="mini"> 45 222 46 </div> 47 <div class="mini"> 48 333 49 </div> 50 </div> 51 52 <div id="three"> 53 <div class="mini"> 54 444 55 </div> 56 <div class="mini"> 57 555 58 </div> 59 <div class="mini"> 60 666 61 </div> 62 </div> 63 64 <span id="four"> 65 66 </span> 67 </body> 68 </html>
3、基本过滤选择器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>层级选择器</title> 6 <link rel="stylesheet" href="../../css/style.css" type="text/css"/> 7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 8 <script> 9 $(function(){ 10 $("#btn1").click(function(){ 11 $("body div:first").css("background-color","red"); 12 }); 13 14 $("#btn2").click(function(){ 15 $("body div:last").css("background-color","red"); 16 }); 17 18 $("#btn3").click(function(){ 19 $("body div:odd").css("background-color","red"); 20 }); 21 22 $("#btn4").click(function(){ 23 $("body div:even").css("background-color","red"); 24 }); 25 }); 26 </script> 27 28 29 </head> 30 <body> 31 <input type="button" id="btn1" value="body中的第一个div元素"/> 32 <input type="button" id="btn2" value="body中的最后一个div元素"/> 33 <input type="button" id="btn3" value="选择body中的奇数的div"/> 34 <input type="button" id="btn4" value="选择body中的偶数的div"/> 35 36 <hr/> 37 <div id="one"> 38 <div class="mini"> 39 111 40 </div> 41 </div> 42 43 <div id="two"> 44 <div class="mini"> 45 222 46 </div> 47 <div class="mini"> 48 333 49 </div> 50 </div> 51 52 <div id="three"> 53 <div class="mini"> 54 444 55 </div> 56 <div class="mini"> 57 555 58 </div> 59 <div class="mini"> 60 666 61 </div> 62 </div> 63 64 <span id="four"> 65 66 </span> 67 </body> 68 </html>
4、属性选择器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>层级选择器</title> 6 <link rel="stylesheet" href="../../css/style.css" /> 7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 8 <script> 9 $(function(){ 10 $("#btn1").click(function(){ 11 $("div[id]").css("background-color","red"); 12 }); 13 14 $("#btn2").click(function(){ 15 $("div[id='two']").css("background-color","red"); 16 }); 17 18 }); 19 </script> 20 21 22 </head> 23 <body> 24 <input type="button" id="btn1" value="选择有id属性的div"/> 25 <input type="button" id="btn2" value="选择有id属性的值为two的div"/> 26 27 <hr/> 28 <div id="one"> 29 <div class="mini"> 30 111 31 </div> 32 </div> 33 34 <div id="two"> 35 <div class="mini"> 36 222 37 </div> 38 <div class="mini"> 39 333 40 </div> 41 </div> 42 43 <div id="three"> 44 <div class="mini"> 45 444 46 </div> 47 <div class="mini"> 48 555 49 </div> 50 <div class="mini"> 51 666 52 </div> 53 </div> 54 55 <span id="four"> 56 57 </span> 58 </body> 59 </html>
5、表单选择器：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>表单选择器</title> 5 <link rel="stylesheet" type="text/css" href="../../css/style.css"/> 6 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 7 <script> 8 $(function(){ 9 $("#btn1").click(function(){ 10 $(":input").css("background-color","pink"); 11 }); 12 $("#btn2").click(function(){ 13 $(":text").css("background-color","pink"); 14 }); 15 }); 16 </script> 17 </head> 18 <body> 19 <input type="button" id="btn1" value="选择所有input元素" /> 20 <input type="button" id="btn2" value="选择文本框" /> 21 <br/> 22 <form> 23 <input type="text" /><br /> 24 <input type="checkbox" /><br /> 25 <input type="radio" /><br /> 26 <input type="image" /><br /> 27 <input type="file" /><br /> 28 <input type="submit" /> 29 <input type="reset" /><br /> 30 <input type="password" /><br /> 31 <input type="button" /><br /> 32 <select><option/></select><br /> 33 <textarea></textarea><br /> 34 <button></button> 35 </form> 36 </body> 37 </html>
五、jQuery案例
1、隔行换色
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成表格隔行换色</title> 6 <link rel="stylesheet" href="../css/style.css" /> 7 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 8 <script> 9 //1.页面加载 10 $(function(){ 11 /*//2.获取tbody下面的偶数行并设置背景颜色 12 $("tbody tr:even").css("background-color","yellow"); 13 //3.获取tbody下面的奇数行并设置背景颜色 14 $("tbody tr:odd").css("background-color","green");*/ 15 16 //2.获取tbody下面的偶数行并设置背景颜色 17 $("tbody tr:even").addClass("even"); 18 $("tbody tr:even").removeClass("even"); 19 //3.获取tbody下面的奇数行并设置背景颜色 20 $("tbody tr:odd").addClass("odd"); 21 }); 22 </script> 23 24 </head> 25 <body> 26 <table border="1" width="500" height="50" align="center" id="tbl" id="tbl"> 27 <thead> 28 <tr> 29 <th>编号</th> 30 <th>姓名</th> 31 <th>年龄</th> 32 </tr> 33 </thead> 34 <tbody> 35 <tr > 36 <td>1</td> 37 <td>张三</td> 38 <td>22</td> 39 </tr> 40 <tr > 41 <td>2</td> 42 <td>李四</td> 43 <td>25</td> 44 </tr> 45 <tr > 46 <td>3</td> 47 <td>王五</td> 48 <td>27</td> 49 </tr> 50 <tr > 51 <td>4</td> 52 <td>赵六</td> 53 <td>29</td> 54 </tr> 55 <tr > 56 <td>5</td> 57 <td>田七</td> 58 <td>30</td> 59 </tr> 60 <tr > 61 <td>6</td> 62 <td>汾九</td> 63 <td>20</td> 64 </tr> 65 </tbody> 66 </table> 67 </body> 68 </html>
2、全选和全不选
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不选</title> 6 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 7 <!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>--> 8 <script> 9 $(function(){ 10 $("#select").click(function(){ 11 //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。 12 //attr方法与JQ的版本有关，在1.8.3及以下有效。 13 //$("tbody input").attr("checked",this.checked); 14 $("tbody input").prop("checked",this.checked); 15 });//prop（）方法适用于高版本和低版本 16 }); 17 </script> 18 19 </head> 20 <body> 21 <table border="1" width="500" height="50" align="center" id="tbl" > 22 <thead> 23 <tr> 24 <td colspan="4"> 25 <input type="button" value="添加" /> 26 <input type="button" value="删除" /> 27 </td> 28 </tr> 29 <tr> 30 <th><input type="checkbox" id="select"></th> 31 <th>编号</th> 32 <th>姓名</th> 33 <th>年龄</th> 34 </tr> 35 </thead> 36 <tbody> 37 <tr > 38 <td><input type="checkbox" class="selectOne"/></td> 39 <td>1</td> 40 <td>张三</td> 41 <td>22</td> 42 </tr> 43 <tr > 44 <td><input type="checkbox" class="selectOne"/></td> 45 <td>2</td> 46 <td>李四</td> 47 <td>25</td> 48 </tr> 49 <tr > 50 <td><input type="checkbox" class="selectOne"/></td> 51 <td>3</td> 52 <td>王五</td> 53 <td>27</td> 54 </tr> 55 <tr > 56 <td><input type="checkbox" class="selectOne"/></td> 57 <td>4</td> 58 <td>赵六</td> 59 <td>29</td> 60 </tr> 61 <tr > 62 <td><input type="checkbox" class="selectOne"/></td> 63 <td>5</td> 64 <td>田七</td> 65 <td>30</td> 66 </tr> 67 <tr > 68 <td><input type="checkbox" class="selectOne"/></td> 69 <td>6</td> 70 <td>汾九</td> 71 <td>20</td> 72 </tr> 73 </tbody> 74 </table> 75 </body> 76 </html>