jQuery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
http://www.php100.com/manual/jquery/ jQuery 1.12中文文档
jQuery和dom之间的转换关系：
jQuery对象[0] => Dom对象
Dom对象 => $(Dom对象)
查找元素：引入jQuery后用$调用其方法
1.选择器，直接找到某个或者某类标签
1.1 id
$('#id') #通过id找到对应标签
1.2. class
<div class='c1'></div>
$(".c1") #通过class找到对应标签
1.3. 标签
$('a') #找到所有的a标签
1.4 组合查找
$('a') #找到所有的a标签
$('.c2') #找到所有的class=c2的标签
$('a,.c2,#i10') #找到所有的a标签和class=c2的标签以及id=i10的标签
1.5 层级查找
$('#i10 a') #子子孙孙（匹配id=i10的标签下面所有的a标签）
$('#i10>a') #只匹配子标签（只匹配id=i10的标签子标签中的a标签）
1.6 基本选择器
:first #匹配符合要求的所有标签的第一个标签
:last #匹配符合要求的所有标签的最后一个标签
:eq(index) #通过索引匹配，index从0开始
1.7 属性
$('[tony]') #具有tony属性的所有标签
$('[tony="123"]') #tony属性等于123的标签
$("input[type='text']") #先匹配标签后匹配属性
$(':text') #简写（匹配所有的text属性）
实例：多选，反选，全选
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <input type="button" value="全选" onclick="checkAll();">
9 <input type="button" value="反选" onclick="reverseAll();">
10 <input type="button" value="取消" onclick="cancleAll();">
11 <table border="1">
12 <thead>
13 <tr>
14 <th>请选择</th><th>IP</th><th>Port</th>
15 </tr>
16 </thead>
17 <tbody >
18 <tr>
19 <td><input type="checkbox"></td>
20 <td>1.1.1.1</td>
21 <td>80</td>
22 </tr>
23 <tr>
24 <td><input type="checkbox"></td>
25 <td>1.1.1.1</td>
26 <td>80</td>
27 </tr>
28 <tr>
29 <td><input type="checkbox"></td>
30 <td>1.1.1.1</td>
31 <td>80</td>
32 </tr>
33 </tbody>
34 </table>
35 <script src="jquery-1.12.4.js"></script>
36 <script>
37 function checkAll() {
38 $('#tb :checkbox').prop('checked',true);
39 }
40 function cancleAll() {
41 $('#tb :checkbox').prop('checked',false);
42 }
43 function reverseAll() {
44 /*$('#tb :checkbox').each(function () {
45 var v = $(this).prop('checked')?false:true;
46 $(this).prop('checked',v);
47 });*/
48 $('#tb :checkbox').each(function () {
49 // dom操作:
50 // if(this.checked){
51 // this.checked = false;
52 // }else{this.checked = true;}
53
54 // jQuery操作:
55 // if ($(this).prop('checked')){
56 // $(this).prop('checked',false);
57 // }else{$(this).prop('checked',true);}
58
59 // 三元运算:
60 var v = $(this).prop('checked')?false:true;
61 $(this).prop('checked',v);});}
62 </script>
63 </body>
64 </html>
1.8对checkbox标签的操作（prop方法）：
- $('#tb:checkbox').prop('checked'); #不传值表示获取值
- $('#tb:checkbox').prop('checked', true); #传值表示设置值为true
1.9 jQuery方法内置循环：
- $('#tb :checkbox').xxxx （xxxx为直接做操作），例如：
$('#tb :checkbox').prop('checked', true) #给匹配到的每一个chackbox标签加上checked属性为true
或者.each() 内套函数：
- $('#tb :checkbox').each(function(k){
// k为当前索引
// this，DOM对象（代指当前循环的元素），$(this)转换成jQuery对象
})
三元运算：
- var v = 条件 ? 真值 : 假值 （若条件成立则v为true，否则false）
2.筛选：
$('#i1').next() #获取当前标签的下一个标签
$('#i1').nextAll() #获取当前标签的下边所有标签
$('#i1').nextUntil('#i2') #获取当前标签以下直到id为i2的标签
$('#i1').prev() #上一个
$('#i1').prevAll()
$('#i1').prevUntil('#i2')
$('#i1').parent() #父标签
$('#i1').parents()
$('#i1').parentsUntil()
$('#i1').children() #子标签
$('#i1').siblings() #获取当前标签的所有同级（兄弟）标签
$('#i1').find(‘#c1’) #匹配当前标签所有子孙标签中class=c1的标签
代码示例：（筛选器）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .c1 {border: 1px solid #DDDDDD;
8 height: 400px;width: 200px;}
9 .item {color:white;}
10 .hide {display: none;}
11 </style>
12 </head>
13 <body class="c1">
14 <div>
15 <div class="item">标题一</div>
16 <div class="content">内容一</div>
17 </div>
18 <div>
19 <div class="item">标题二</div>
20 <div class="content hide">内容二</div>
21 </div>
22 <div>
23 <div class="item">标题三</div>
24 <div class="content hide">内容三</div>
25 </div>
26 <script src="jquery-1.12.4.js"></script>
27 <script>
28 $('.item').click(function () {
29 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
30 // $(this).next().removeClass('hide');
31 // $(this).parent().siblings().find('.content').addClass('hide')
32 })
33 </script>
34 </body>
35 </html>