jQuery：就是让页面动起来
参考手册：http://jquery.cuishifeng.cn/
DOM/BOM/javaScript 继承的类库 《---》模块
一、查找元素
二、操作元素
三、实例
一、jQuery的导入
版本：1.x 2.x 3.x 推荐使用1.x版本（兼容浏览器低版本）
1 <script src="jquery-1.12.4.js"></script>
2 <scirpt>
3 $. 或 jquery.来调用方法
4 </script>
jquery与dom相互转换：
jquery对象【0】 --》 dom对象
dom对象 --> $(dom对象)
二、查找元素
2.1选择器
1.id选择器
$(‘#id‘)
2.类选择器
$(‘.class‘)
3.标签选择器
$(‘p‘)
4.属性选择器
$(‘[alex]‘) 查找具有alex属性的标签
$(‘[alex="sb"]‘) 查找alex=‘sb’属性的标签
$(‘input[type="text"]‘) 超找input标签中text的标签
5.组合选择器
$(a,.class,#id) 以，隔开
6.层级选择器
$(div a) 子子孙孙，div下的a标签
$(div>a) 只找儿子
7.基本过滤
:first 第一个
:eq 索引0开始
:odd 偶数
2.2 筛选器
根据选择器选的东西，进行筛选
parent() 父标签
children() 所有的子标签
next() 下一个标签
perv() 上一个标签
sibling() 所有的兄弟便签，除了自己
左侧菜单jquery实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ width: 80px; border: 1px solid #ddd; } .header{ border: 1px solid #dddddd; height: 30px; background-color: #2459a2; } .hide{ display: none; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="header">菜单1</div> <div class="content">内容1</div> </div> <div class="item"> <div class="header">菜单2</div> <div class="content hide">内容2</div> </div> <div class="item"> <div class="header">菜单3</div> <div class="content hide">内容3</div> </div> <div class="item"> <div class="header">菜单4</div> <div class="content hide">内容4</div> </div> </div> <script src="jqure/jquery-1.12.4.js"></script> <script> $(‘.header‘).click(function(){ //this 当前点击的便签对象 //要是jquery 必须先进行转换 // $(this).next().removeClass(‘hide‘); // $(this).parent().siblings().children(‘.content‘).addClass(‘hide‘) //支持链式编程 $(this).next().removeClass(‘hide‘).parent().siblings().children(‘.content‘).addClass(‘hide‘); //$(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id=‘i1‘ type="button" value="全选"> <input id="i2" type="button" value="取消"> <input id="i3" type="button" value="反选"> <table id=‘tb‘ border="1px"> <tr> <th>选择</th> <th>主机</th> <th>IP</th> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>888</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>888</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>888</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>888</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>888</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>888</td> </tr> </table> <script src="jquery-1.12.4.js"></script> <script> //使用jquery的each循环方法 //this 是代表每一个被过滤出来的对象（dom对象） //$(dom) 进行转换 // $(‘#i1‘).click(function() { // $(‘#tb :checkbox‘).each(function(k) { // //console.log(this) 查看this的属性 // //console.log($(this)) // // //dom的实现方式 //// if(this.checked){ //// this.checked=false; //// } // // //第二种jquery的方法 // $(this).prop(‘checked‘,true) // }) // }); $(‘#i1‘).click(function(){ //内部自己帮我们进行循环 $(‘#tb :checkbox‘).prop(‘checked‘,true); }); $(‘#i2‘).click(function(){ $(‘#tb :checkbox‘).prop(‘checked‘,false); }); $(‘#i3‘).click(function(){ //进行反选的时候，无法使用简单的内部循环，so我们使用each方法 //each的k代表索引 $(‘#tb :checkbox‘).each(function () { var tag=$(this).prop(‘checked‘)?false:true; //使用三元运算判断当前的的选择状态 $(this).prop(‘checked‘,tag) }) }) </script> </body> </html>
