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>前端-高潮 jQuery
原文地址：http://www.cnblogs.com/louhui/p/8051837.html