jQuery的min版本和原版功能是一样的，min版主要应用于已经开发成的网页中，而非min版
的文件比较大，里面有整洁的代码书写规范和注释，主要应用于脚本开发过程当中。
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3
，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后
续版本将不再支持IE6/7/8浏览器。jQuery能够使用户的html页面保持代码和html内容分离
，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,
做得更多)。jQuery是免费、开源的，使用MIT许可协议。
jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。
1，引入Jquery
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <!-- 引入jquery --> 8 <script src="jquery-1.11.2.min.js"></script> 9 10 </head> 11 <body> 12 13 </body> 14 </html>
①取元素： js方式和jquery方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <!-- 引入jquery --> 8 <script src="jquery-1.11.2.min.js"></script> 9 10 </head> 11 <body> 12 13 <div id="dv">第一个DIV</div> 14 15 <div class="v">第二个DIV</div> 16 <div class="v">第三个DIV</div> 17 <div class="v">第四个DIV</div> 18 19 <input type="text" name="uid"> 20 21 </body> 22 <script type="text/javascript"> 23 //一、js方式： 24 25 //①js取元素，取出来的是具体的元素对象 26 //1,根据Id取 27 //alert(document.getElementById("dv")); 28 //2,根据class取 29 //alert(document.getElementsByClassName("v")); 30 //3, collection 根据标签名找取到的是集合 31 // alert(document. getElementsByTagName('div')); 32 //4,根据name找 取到的是NodeList 数组 33 // alert(document.getElementsByName('uid')); 34 35 36 37 38 //二、jquery方式 39 40 //①jquery取元素，取出来的是jquery对象 41 $(document).ready(function(e){ 42 //1,根据Id取 43 //alert($("#dv")); 44 //2,根据class取 45 //alert($(".v")); 46 //循环输出 根据下标取取出来的是元素，eq取取出来的是对象 47 // var v=$(".v"); 48 // for (var i = 0; i < v.length; i++) { 49 // alert(v.eq(i)[0]); 50 // } 51 //3,Object根据标签名找取到的是对象 52 //alert($("div")); 53 //4,根据属性找的是对象 任意一个属性都可以这么取 54 //alert($("[name=uid]")); 55 56 57 58 59 }) 60 </script> 61 </html>
②操作内容 ③操作属性 ④操作样式 ⑤点击事件 点击变色 checkbox下多选中要用for循环遍历
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <!-- 引入jquery --> 8 <script src="jquery-1.11.2.min.js"></script> 9 <style type="text/css"> 10 #dv{ 11 font-size:10px; 12 } 13 .list{ 14 200px; 15 height: 30px; 16 text-align: center; 17 line-height: 30px; 18 vertical-align: middle; 19 background-color: green; 20 color:red; 21 } 22 </style> 23 </head> 24 <body> 25 26 <div id="dv" name="Div"><h1>第一个DIV</h1></div> 27 28 <div class="v">第二个DIV</div> 29 <div class="v">第三个DIV</div> 30 <div class="v">第四个DIV</div> 31 <br/> 32 <div class="list">hello</div> 33 <div class="list">world</div> 34 <div class="list">hi</div> 35 <div class="list">haha</div> 36 37 <br/> 38 <input type="text" name="uid" value="表单"> 39 40 <input type="checkbox" id="aa" value="hello"> 41 <input type="button" id="box" value="取值"> 42 43 </body> 44 <script type="text/javascript"> 45 //一、js方式： 46 47 //①js取元素，取出来的是具体的元素对象 48 //1,根据Id取 49 //var v =document.getElementById("dv"); 50 //2,根据class取 51 //alert(document.getElementsByClassName("v")); 52 //3, collection 根据标签名找取到的是集合 53 // alert(document. getElementsByTagName('div')); 54 //4,根据name找 取到的是NodeList 数组 55 //var v = document.getElementsByName('uid'); 56 57 //②js操作内容 58 //alert(v.innerText);//获取文本内容 59 //alert(v.innerHTML);//获取HTMl代码 60 //v.innerText="hello";//赋新值hello文本 61 //v.innerHTML="<span style='color:red'>hello</span>";//用HTML代码把文字变色 62 //v[0].value="00";//注意取出来的是数组，获取或者设置表单元素的内容。 63 64 //③js操作属性 65 //alert (dv.getAttribute("name"));//获取属性的值 66 //dv.setAttribute("bb","cc");//设置属性 67 //dv.removeAttribute("name");//移除属性 68 69 //④js操作样式 70 //alert(dv.style.fontSize);//js操作样式只能是内联 不能是内部和外部样式表 71 //dv.style.fontSize="36px"; 72 //修改或者设置样式，优先级最高 73 //⑤js里加事件在元素中要有onclick="Show()" 74 75 // function Show(div) 76 // { 77 // alert(div.innerText); 78 // alert("aa"); 79 // } 80 81 82 //二、jquery方式 83 84 //①jquery取元素，取出来的是jquery对象 85 $(document).ready(function(e){ 86 //1,根据Id取 87 var d=$("#dv"); 88 //2,根据class取 89 //alert($(".v")); 90 //循环输出 根据下标取取出来的是元素，eq取取出来的是对象 91 // var v=$(".v"); 92 // for (var i = 0; i < v.length; i++) { 93 // alert(v.eq(i)[0]); 94 // } 95 //3,Object根据标签名找取到的是对象 96 //alert($("div")); 97 //4,根据属性找的是对象 任意一个属性都可以这么取 98 //var bd=$("[name=uid]"); 99 //②jquery操作内容 100 //alert(d.text());//获取元素的内容（文本） 101 //alert(d.html());//获取元素的内容（加html代码） 102 //d.text("改变内容");//给元素赋值 103 //d.html("<span style='color:red'>改变html代码</span>");//改变html代码，代码赋值 没参数是取值，有参数是赋值 104 //bd.val();//操作表单内容，可以取值赋值，无参取值，有参赋值，括号内双引号 105 //③jquery操作属性 106 //alert(d.attr("name"));//上面必须有var d=$("#dv"); 107 //d.attr("jq","er");//添加设置属性 108 //d.removeAttr("jq");//移除属性 注意A要大写 109 //④jquery 操作样式 110 //alert(d.css("font-size"));//取样式 不仅可以取内联样式 还可以取到内部样式 111 //d.css("font-size","100px");//设置样式 112 //⑤jquery 操作事件 113 //1,重复一次执行一次，下面重复两次，点击后执行两次 114 // $("#dv").click(function(){ 115 // alert("aa"); 116 // }) 117 118 // $("#dv").click(function(){ 119 // alert("aa"); 120 // }) 121 //2,class下 点击找到该元素 122 // $(".v").click(function(){ 123 // alert($(this).text()); 124 // }) 125 //2,菜单选中 126 // $(".list").click(function(){ 127 // //让所有元素变为非选中状态 128 // $(".list").css("background-color","green").css("color","red"); 129 130 // //让该元素变为选中状态 131 // $(this).css("background-color","blue"); 132 // $(this).css("color","#FFF"); 133 // }) 134 //3,取checkbox选中值 135 $("#box").click(function(){ 136 if($("#aa")[0].checked) 137 { 138 alert($("#aa").val()); 139 } 140 else 141 { 142 alert("未选中！"); 143 } 144 }) 145 146 147 }) 148 </script> 149 </html>
图：