jQuery（一）
定义：对JavaScript对象和函数的封装，提高开发效率
http://jquery.com/ 开发版\发布版
作用：
1.访问和操作DOM元素
2.控制页面样式
3.对页面事件进行处理
4.与Ajax技术完美结合
5.扩展新的jQuery插件
优势：
1.出色的DOM封装
2.可靠的事件处理机制
3.出色的浏览器兼容性
4.强大的选择器
5.使用隐式迭代简化编程
6.体积小，丰富的插件支持
jQuery和JavaScript区别：
window.onload $(document).ready()
执行时机 必须等页面所有的内容（包括图片，flash，视频等）加载完毕后才能执行 网页所有DOM文档绘制完毕后即可执行，可能与DOM元素无关的内容（包括图片，flash，视频等）并没有加载完
编写个数 同一个页面只能编写一个 同一个页面同时编写多个
简化写法 无 $(function(){//执行代码});
语法：
1.引入jQuery库文件
2.$(选择器).方法名();
<script>
$(document).ready(function() {
alert("Hello,jQuery！");
});
</script>
DOM元素的操作
a.js，获取的是DOM对象
var input = document.getElementById('userName');
alert(input.value);
b.jQuery，获取的是jQuery对象
var $input = $('#userName');
alert($input.val());
【注意：DOM对象和jQuery对象分别有一套独立的方法，不能混用！！！】
jQuery对象和DOM对象转换
1.数组方式
var $userName = $('#userName');
var userName = $userName[0];
2.get方法
var $userName = $('#userName');
var userName = &userName.get(0);
【★注意：jQuery对象本身是一个集合★】
范例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 <title></title> 6 </head> 7 <body> 8 9 <input id="userName" type="text" value="admin"></input> 10 <button value="点击" onclick="getUserName()">点击</button> 11 <button id="btn" value="jQuery">jQuery</button> 12 13 <script type="text/javascript" src="bootstrap/bootstrap.js"></script> 14 <!-- jQuery包 --> 15 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 16 <script type="text/javascript"> 17 18 /* 文档就绪事件 */ 19 $(document).ready(function(){ 20 alert('hello,jQuery'); 21 }); 22 23 //文档就绪的简化写法 24 $(function(){ 25 alert('您好！'); 26 }); 27 28 /* jQuery获取jQuery对象 */ 29 $(function(){ 30 31 $('#btn').click(function () { 32 /* body... */ 33 alert($('#userName').val()); 34 }); 35 36 }); 37 38 /* 原始js获取DOM对象 */ 39 function getUserName(){ 40 //使用原始方法获取DOM对象 41 var inputDom = document.getElementById('userName').value; 42 alert(inputDom); 43 } 44 </script> 45 </body> 46 </html>
jQuery选择器
1.基本选择器：class、id
a.标签选择器：$('h2')
b.类选择器：$('.title')
c.ID选择器：$('#title')
d.并集选择器：$('div,p,.title')
e.交集选择器：$('h2.title')
f.全局选择器：$('*')
2.层次选择器：HTML布局结构
a.后代选择器：$('#menu h2') 选取#menu下的所有<h2>元素
b.子选择器：$('#menu>span') 选取#menu的子元素<span>
c.相邻元素选择器：$('h2+dl') 选取紧邻<h2>元素之后的同辈元素<dl>
d.同辈元素选择器：$('h2~dl') 选取<h2>元素之后所有的同辈元素<dl>
3.过滤选择器：指定的过滤规则
1)属性过滤选择器
a.$("[href]") 选取含有href属性的元素
b.$("[href ='#']") 选取href属性值为“#”的元素
c.$("[href !='#']") 选取href属性值不为“#”的元素
d.$("[href^='en']") 选取href属性值以en开头的元素
e.$("[href$='.jpg']") 选取href属性值以.jpg结尾的元素
f.$("li[id][title=新闻要点]") 选取含有id属性和title属性为新闻要点的<li>元素
2)基本过滤选择器
a.$("li:first") 选取所有<li>元素中的第一个<li>元素
b.$("li:last") 选取所有<li>元素中的最后一个<li>元素
c.$("li:even") 选取索引是偶数的所有<li>元素（index从0开始）
d.$("li:odd") 选取索引是奇数的所有<li>元素（index从0开始）
e.$("li:eq(1)") 选取索引等于1的<li>元素（index从0开始）
f.$("li:gt(1)") 选取索引大于1的<li>元素（注：大于1，不包括1）（index从0开始）
g.$("li:lt(1)") 选取索引小于1的<li>元素（注：小于1，不包括1）（index从0开始）
3)可见性过滤选择器
a.$(":visible") 选取所有可见的元素
b.$(":hidden") 选取所有隐藏的元素
4)表单过滤选择器
a.$( ":input") 选取所有的表单元素
b.$("[type=ckeckbox]:checked") 选取所有选中的复选框元素
c.$("select:selected") 匹配所有选中的下拉框
d.$( ":enabled") 匹配所有可用元素
e.$(":disabled") 匹配所有不可用元素
jQuery提供的方法
1.DOM元素的筛选
a.位置：eq(),first(),last(),next(),prev()
b.层次：chlidren()，parent()，siblings()，closest()
c.指定表达式：find()，hasClass()
2.属性操作
a.class属性：addClass()，removeClass()，toggleClass()
b.value属性：val()：获取或设置元素的值，一般用于表单元素
c.内容属性：html()，text()
3.样式
a.单样式操作：height()，width()
b.组合样式操作：css()
4.事件
a.事件绑定：$(选择器).事件名(); / $(选择器).on(事件类型,[选择器],[参数],方法);
b.事件移除：$(选择器).off(事件类型,[选择器],方法);
c.事件触发：$(选择器).trigger(事件类型,[参数]);
常用事件：ready，click，mouseover，mouseout，focus，blur，hover
5.操作
6.动画效果
范例：jQuery对象和DOM对象区别
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 <title></title> 6 </head> 7 <body> 8 <input id="userName" type="text" value="admin"></input> 9 <button value="点击" onclick="getUserName()">点击</button> 10 <button id="btn" value="jQuery">jQuery</button> 11 <script type="text/javascript" src="bootstrap/bootstrap.js"></script> 12 <!-- jQuery包 --> 13 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 14 <script type="text/javascript"> 15 16 /* 文档就绪事件 */ 17 $(document).ready(function(){ 18 alert('hello,jQuery'); 19 }); 20 21 //文档就绪的简化写法 22 $(function(){ 23 alert('您好！'); 24 }); 25 26 /* jQuery获取jQuery对象 */ 27 $(function(){ 28 $('#btn').click(function () { 29 alert($('#userName').val()); 30 }); 31 }); 32 33 /* 原始js获取DOM对象 */ 34 function getUserName(){ 35 //使用原始方法获取DOM对象 36 var inputDom = document.getElementById('userName').value; 37 alert(inputDom); 38 } 39 40 $(function(){ 41 var inputDom = document.getElementById('userName').value; 42 console.log(inputDom); 43 var $inputJQ = $('#userName'); 44 console.log($inputJQ); 45 }); 46 </script> 47 </body> 48 </html>
范例：jQuery选择器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .step h1+ol{ 8 background-color: red; 9 } 10 li[class]{ 11 color:blue; 12 } 13 li[class=s]{ 14 color: yellow; 15 } 16 input[data-role="save"]{ 17 background-color: blue; 18 color: white; 19 border: none; 20 border-radius: 4px; 21 } 22 li:nth-child(1),li:nth-child(2){ 23 font-size: 40px; 24 } 25 </style> 26 </head> 27 <body> 28 <script type="text/javascript" src="bootstrap/jquery.min.js"></script> 29 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 30 <div class="step"> 31 <h1>把大象装进冰箱</h1> 32 <ol> 33 <li class="">打开冰箱</li> 34 <li class="s">把冰箱清空</li> 35 <li>把大象装进去</li> 36 <li>关上冰箱</li> 37 </ol> 38 <h1>把熊猫装进冰箱</h1> 39 <ol> 40 <li>打开冰箱</li> 41 <li>把冰箱清空</li> 42 <li>把熊猫装进去</li> 43 <li>关上冰箱</li> 44 </ol> 45 <input type="button" value="登录" data-role="save"></input> 46 </div> 47 <script type="text/javascript"> 48 $(function(){ 49 /* 获得所有的奇偶行 */ 50 $('li:odd').css('background-color','blue'); 51 $('li:odd').css({ 52 'background-color':'blue', 53 'color':'red', 54 'font-size':'20px' 55 }); 56 57 /* 找到第一个ol下面的第三个li */ 58 $('ol li:eq(2)').css('border','10px solid red'); 59 60 /* 找到所有ol下面的第三个li */ 61 $('ol').find('li:eq(2)').css('border','10px solid red'); 62 }); 63 </script> 64 </body> 65 </html>
范例：事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .news li.selected{ 8 background-color: red; 9 color: white; 10 } 11 </style> 12 </head> 13 <body> 14 <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> 15 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 16 17 <button id="btn_add" value="添加">添加</button> 18 <h3>新闻列表</h3> 19 <ol class="news"> 20 <li><a href="javascript:;"></a>国内新闻</li> 21 <li>国际新闻</li> 22 <li>体育新闻</li> 23 <li>新闻列表</li> 24 </ol> 25 26 <script type="text/javascript"> 27 $(function(){ 28 $('#btn_add').click(function () { 29 var $li = $('<li></li>'); 30 $li.text('新添加'); 31 $('ol').append($li); 32 }); 33 34 $('.news li').click(function () { 35 // $(this).toggleClass('selected'); 36 // $(this).addClass('selected').siblings().removeClass('selected'); 37 $(this).toggleClass('selected').siblings().removeClass('selected'); 38 $(this).css('font-size','20px'); 39 alert($(document).height()); 40 }); 41 42 $('.news').on('click','li',function(){ 43 $(this).toggleClass('selected').siblings().removeClass('selected'); 44 /* 事件触发一次，就关闭 */ 45 // $('.news').off('click'); 46 47 /* 点击li，就触发添加按钮 */ 48 $('#btn_add').trigger('click'); 49 }); 50 }); 51 </script> 52 </body> 53 </html>
范例：jQuery操作表格
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div> 9 <table> 10 <thead> 11 <tr> 12 <th>姓名</th> 13 <th>性别</th> 14 <th>出生日期</th> 15 <th>电话</th> 16 <th>邮箱</th> 17 <th>操作</th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr> 22 <td>张三</td> 23 <td>男</td> 24 <td>1999-11-11</td> 25 <td>13612345672</td> 26 <td>zhangsan@qq.com</td> 27 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 28 </tr> 29 <tr> 30 <td>李四</td> 31 <td>男</td> 32 <td>1999-11-11</td> 33 <td>13612345672</td> 34 <td>zhangsan@qq.com</td> 35 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 36 </tr> 37 <tr> 38 <td>王五</td> 39 <td>男</td> 40 <td>1999-11-11</td> 41 <td>13612345672</td> 42 <td>zhangsan@qq.com</td> 43 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 44 </tr> 45 <tr> 46 <td>赵六</td> 47 <td>男</td> 48 <td>1999-11-11</td> 49 <td>13612345672</td> 50 <td>zhangsan@qq.com</td> 51 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 52 </tr> 53 <tr> 54 <td>刘七</td> 55 <td>男</td> 56 <td>1999-11-11</td> 57 <td>13612345672</td> 58 <td>zhangsan@qq.com</td> 59 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 60 </tr> 61 </tbody> 62 </table> 63 <div>详细信息</div> 64 </div> 65 66 <div> 67 <table> 68 <thead> 69 <tr> 70 <th>姓名</th> 71 <th>性别</th> 72 <th>出生日期</th> 73 <th>电话</th> 74 <th>邮箱</th> 75 <th>操作</th> 76 </tr> 77 </thead> 78 <tbody> 79 <tr> 80 <td>张三</td> 81 <td>男</td> 82 <td>1999-11-11</td> 83 <td>13612345672</td> 84 <td>zhangsan@qq.com</td> 85 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 86 </tr> 87 <tr> 88 <td>李四</td> 89 <td>男</td> 90 <td>1999-11-11</td> 91 <td>13612345672</td> 92 <td>zhangsan@qq.com</td> 93 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 94 </tr> 95 <tr> 96 <td>王五</td> 97 <td>男</td> 98 <td>1999-11-11</td> 99 <td>13612345672</td> 100 <td>zhangsan@qq.com</td> 101 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 102 </tr> 103 <tr> 104 <td>赵六</td> 105 <td>男</td> 106 <td>1999-11-11</td> 107 <td>13612345672</td> 108 <td>zhangsan@qq.com</td> 109 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 110 </tr> 111 <tr> 112 <td>刘七</td> 113 <td>男</td> 114 <td>1999-11-11</td> 115 <td>13612345672</td> 116 <td>zhangsan@qq.com</td> 117 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 118 </tr> 119 </tbody> 120 </table> 121 <div>详细信息</div> 122 </div> 123 124 <div> 125 <table> 126 <thead> 127 <tr> 128 <th>姓名</th> 129 <th>性别</th> 130 <th>出生日期</th> 131 <th>电话</th> 132 <th>邮箱</th> 133 <th>操作</th> 134 </tr> 135 </thead> 136 <tbody> 137 <tr> 138 <td>张三</td> 139 <td>男</td> 140 <td>1999-11-11</td> 141 <td>13612345672</td> 142 <td>zhangsan@qq.com</td> 143 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 144 </tr> 145 <tr> 146 <td>李四</td> 147 <td>男</td> 148 <td>1999-11-11</td> 149 <td>13612345672</td> 150 <td>zhangsan@qq.com</td> 151 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 152 </tr> 153 <tr> 154 <td>王五</td> 155 <td>男</td> 156 <td>1999-11-11</td> 157 <td>13612345672</td> 158 <td>zhangsan@qq.com</td> 159 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 160 </tr> 161 <tr> 162 <td>赵六</td> 163 <td>男</td> 164 <td>1999-11-11</td> 165 <td>13612345672</td> 166 <td>zhangsan@qq.com</td> 167 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 168 </tr> 169 <tr> 170 <td>刘七</td> 171 <td>男</td> 172 <td>1999-11-11</td> 173 <td>13612345672</td> 174 <td>zhangsan@qq.com</td> 175 <td><a data-role="del" href="javascript:;">删除</a><a data-role="detial" href="javascript:;">详细</a></td> 176 </tr> 177 </tbody> 178 </table> 179 <div>详细信息</div> 180 </div> 181 182 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 183 <script type="text/javascript"> 184 $(function(){ 185 $('a[data-role="del"]').click(function(){ 186 /* (a)td->tr->td:first */ 187 // var name = $(this).parent().parent().find('td:first').text(); 188 var name = $(this).closest('tr').children().first().text(); 189 confirm(name + '?'); 190 }); 191 192 $('a[data-role="detial"]').click(function(){ 193 var name = $(this).closest('tr').find('td:eq(0)').text(); 194 var $detialLayer = $(this).closest('table').next(); 195 $detialLayer.html(name); 196 // confirm('查看' + name); 197 }); 198 }); 199 </script> 200 </body> 201 </html>
范例：下拉表单
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="bootstrap/select2-4.0.2-dist/css/select2.min.css"> 7 </head> 8 <body> 9 <select style="width: 200px;"> 10 <option>1</option> 11 <option>12</option> 12 <option>13</option> 13 <option>14</option> 14 <option>21</option> 15 <option>31</option> 16 <option>41</option> 17 <option>61</option> 18 </select> 19 20 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 21 <script type="text/javascript" src="bootstrap/select2-4.0.2-dist/js/select2.full.min.js"></script> 22 <script type="text/javascript"> 23 $(function () { 24 $('select').select2(); 25 }); 26 </script> 27 </body> 28 </html>
