Jquery学习笔记
中文参考文档：http://jquery.cuishifeng.cn
Jquery是一个包含DOM/BOM/JavaScript的类库
引入jquery文件方法：<script src='jquery-1.12.4.js'></script>
调用jquery方法有以下2种
<script>
jQuery 或者 $
</script>
Jquery版本系列包含：
1.X -> 推荐 兼容性更好IE8以下
2.X
3.X
Jquery和dom之间的转换方法：
jquery和dom输出的区别：jquery的输出是使用中括号[]包裹的，dom输出是直接输出的html标签样式。
jquery对象转换为dom方法：在jquery语句后面加上第0个元素[0]，这时输出就转换为DOM对象。
如：首先需要导入jquery文件
执行：$('#l1')
jquery输出：[div#l1, context: document, selector: "#l1"]
执行：$('#l1')[0]
输出：<div >123</div>
DOM对象转换为jquery写法：在dom对象外使用$()包裹后，即刻转为jquery对象，如：$(DOM对象)
如：d =document.getElementById('l1')
$(d) 转换为jquery
输出：[div#l1, context: div#l1]
一：查找元素
DOM : 10个左右(get系列）
jquery分2种：
第一种选择器：直接找到某个或者某类标签
1：id选择器，根据标签内的ID进行查询。如：$('#l1')
2：class选择器，根据标签内的class进行查询。如：$('.l1')
3：标签选择器，根据标签名进行查询。如：$('div')
4：组合选择器，可以根据标签，ID，class名统一查询，如：$('div,#l1,.l1')
5：层级选择器
$('#i10 a') 先定位到i10标签，然后从其内部包含的所有标签中查找所有的a标签
$('#i10>a') 只在i10下的子标签中查找a标签
6：基本筛选器
:first 从查询结果中提取第一个元素
:last 从查询结果中提取最后一个元素
:even 筛选所有的基数行
:odd 筛选所有的偶数行
:eq(index) 根据索引查找
:header 找到所有的h标签
7：属性
$('[name]') 具有name属性的所有标签
$('[name="123"]') name属性等于123的标签
$("input[type='text']") # 这里第一步筛选input,然后找到type=text的所有标签
$(':text') 简写
jquery方法内置循环:
$('#tb:checkbox').each(function(k){
// k 当前索引
//this 是dom对象，代指当前循环的元素 $(this)
}
三元运算写法：var v = 条件 ？ 真值 ： 假值
实例见：jquery多选反选全选.html
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="channelAll();" /> 11 <table border="1" > 12 <thead> 13 <th>选择</th> 14 <th>IP</th> 15 </thead> 16 <tbody id="tb"> 17 <tr> 18 <td><input type="checkbox"></td> 19 <td>1.1.1.1</td> 20 </tr> 21 <tr> 22 <td><input type="checkbox"></td> 23 <td>2.2.2.2</td> 24 </tr> 25 <tr> 26 <td><input type="checkbox"></td> 27 <td>3.3.3.3</td> 28 </tr> 29 </tbody> 30 </table> 31 <script src="jquery-1.12.4.js"></script> 32 <script> 33 /* 获取id=tb下所有的checkbox属性标签，使用prop方法，如果后面带1个参数表示获取值，带2个参数表示赋值*/ 34 function checkAll() { 35 $('#tb :checkbox').prop('checked',true) 36 } 37 function channelAll() { 38 $('#tb :checkbox').prop('checked',false) 39 } 40 function reverseAll() { 41 /* each方法是循环获取的所有checkbox属性标签,然后通过函数对每个标签进行操作，k表示所有标签的索引*/ 42 $(':checkbox').each(function (k) { 43 /* DOM写法，this表示当前的标签 44 if(this.checked){ 45 this.checked = false; 46 }else{ 47 this.checked = true; 48 } 49 */ 50 /* jquery写法，这里用$(this)将doc标签转换为jquery格式 51 if ($(this).prop('checked')) { 52 $(this).prop('checked', false) 53 } else { 54 $(this).prop('checked', true) 55 }*/ 56 // 写法3，三元运算，v = 条件? 值1:值2，当条件为真将值1赋予v，反之值2赋予v 57 var v = $(this).prop('checked')?false:true; 58 $(this).prop('checked',v) 59 }) 60 } 61 </script> 62 </body> 63 </html>