一、概述
1.简介
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
参考中文文档：http://jquery.cuishifeng.cn/
jQuery是什么？
jQuery跟python里面的模块一样，它相当于是一个封装了DOM/BOM/JavaScriptd的一个模块。
版本选择?
jQuery版本有很多，1.*,2.*,3.*，一般我们选择1.*的最高版本，因为比较稳定，兼容性好。
jQuery对象和Dom对象的转换?
- jquery对象[索引] => Dom对象
- $(Dom对象) => jquery对象
二、选择器
1.id选择器
$("#id")
2.class选择器
$(".c1")
3.标签选择器
$("a")
4.组合选择器
$("a,.c1,#i1")
5.层级选择器
$("#i1 a") 找子子孙孙
$("#i1>a") 只找儿子
6.基本筛选器
:first 第一个
:last 最后一个
:eq(index) 根据索引来取
7.属性选择器
$("[alex]") 具有alex属性的所有标签
$("[alex='123']") alex=123的所有标签
示例：
<input type='text'/> <input type='text'/> <input type='file'/> <input type='password'/> $("input[type='text']") $(':text') ==> 表单选择器
全选反选取消示例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Title</title> 8 </head> 9 <body> 10 <div id="menu1"> 11 <input type="button" value="全选" /> 12 <input type="button" value="反选" /> 13 <input type="button" value="取消" /> 14 </div> 15 <div> 16 <table border="1" width="300px" style="text-align: center"> 17 <thead> 18 <tr> 19 <th>选择</th> 20 <th>序号</th> 21 <th>用户名</th> 22 </tr> 23 </thead> 24 <tbody id="table1"> 25 <tr> 26 <td><input type="checkbox"></td> 27 <td>1</td> 28 <td>breakering</td> 29 </tr> 30 <tr> 31 <td><input type="checkbox"></td> 32 <td>2</td> 33 <td>profhua</td> 34 </tr> 35 <tr> 36 <td><input type="checkbox"></td> 37 <td>3</td> 38 <td>wolf</td> 39 </tr> 40 </tbody> 41 </table> 42 </div> 43 <script src="jquery-1.12.4.js"></script> 44 <script> 45 $("#menu1 :input[value='全选']").click(function () { 46 $("#table1 :checkbox").prop("checked", true); 47 }); 48 $("#menu1 :input[value='反选']").click(function () { 49 $("#table1 :checkbox").each(function () { 50 $(this).prop("checked", $(this).prop("checked") ? false : true) 51 }) 52 }); 53 $("#menu1 :input[value='取消']").click(function () { 54 $("#table1 :checkbox").prop("checked", false); 55 }); 56 </script> 57 </body> 58 </html>
三、筛选器
1.过滤
eq(index) # 根据索引来获取对象 eg:$("li").eq(1) == $("li :eq(1)")
first() # 获取第一个
last() # 获取最后一个
hasClass(class) # 是否有具有某类CSS样式
2.查找
children() # 所有的孩子
siblings() # 所有的兄弟姐妹
find() # 搜索与表达式匹配的元素
next() # 下一个
nextAll() # 后面的所有元素
nextUntil() # 下一个直到什么为止(不包含)
prev() # 上一个
prevAll() # 上面的所有元素
prevUntil() # 上一个直到什么为止(不包含)
parent() # 父标签
parents() # 所有的父标签
parentsUntil() # 所有的父标签直到什么为止(不包含)
3.文本操作
$(..).text() # 获取文本内容 $(..).text(“<a>1</a>”) # 设置文本内容 $(..).html() # 获取html内容 $(..).html("<a>1</a>") # 设置html内容 $(..).val() # 获取val的值 $(..).val(..) # 设置val的值
4.样式操作
addClass() # 添加一类样式
removeClass() # 移除一类样式
toggleClass() # 如果存在（不存在）就删除（添加）一类样式
5.属性操作
# 专门用于做自定义属性 $(..).attr('n') # 获取属性值 $(..).attr('n','v') # 设置属性值 $(..).removeAttr('n') # 移除属性 # 专门用于chekbox,radio $(..).prop('checked') # 获取属性 $(..).prop('checked', true) # 设置属性
切换菜单:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .menu{ 11 height: 38px; 12 background-color: #eeeeee; 13 line-height: 38px; 14 } 15 .active{ 16 background-color: brown; 17 } 18 .menu .menu-item{ 19 float: left; 20 border-right: 1px solid red; 21 padding: 0 5px; 22 cursor: pointer; 23 } 24 .content{ 25 min-height: 100px; 26 border: 1px solid #eeeeee; 27 } 28 </style> 29 </head> 30 <body> 31 32 <div style=" 700px;margin:0 auto"> 33 34 <div class="menu"> 35 <div class="menu-item active">菜单一</div> 36 <div class="menu-item">菜单二</div> 37 <div class="menu-item">菜单三</div> 38 </div> 39 <div class="content"> 40 <div>内容一</div> 41 <div class="hide">内容二</div> 42 <div class="hide">内容三</div> 43 44 </div> 45 46 </div> 47 <script src="jquery-1.12.4.js"></script> 48 <script> 49 $(".menu-item").click(function () { 50 $(this).addClass("active").siblings().removeClass("active"); 51 $(".content").children().eq($(this).index()).removeClass("hide").siblings().addClass("hide"); 52 }) 53 </script> 54 </body> 55 </html>
6.文档处理
append() # 内部加在末尾
prepend() # 内部加在开头
after() # 外部加在末尾
before() # 外部加在开头
remove() # 移除整个标签
empty() # 清空标签的内容
clone() # 克隆标签
7.CSS处理
$('t1').css('样式名称', '样式值')
# 位置
$(window).scrollTop() # 获取
$(window).scrollTop(0) # 设置
$(window).scrollLeft([val])
offset().left # 指定标签在html中的坐标
offset().top # 指定标签在html中的坐标
position() # 指定标签相对父标签(relative)标签的坐标
height() # 获取某个元素的高度
innerHeight() # 获取某个元素的高度 + 内边距 padding
outerHeight() # 获取某个元素的高度 + 内边距 padding + 边框 border
outerHeight(true) # 获取某个元素的高度 + 内边距 padding + 边框 border + 外边距 margin
width() # 获取某个元素的宽度
innerWidth() # 获取某个元素的宽度 + 内边距 padding
outerWidth() # 获取某个元素的宽度 + 内边距 padding + 边框 border
outerWidth(true) # 获取某个元素的宽度 + 内边距 padding + 边框 border + 外边距 margin
四、其他
1.事件绑定
# 第一种 $('.c1').click(function(){ }) $('.c1')..... # 第二种 $('.c1').bind('click',function(){ }) $('.c1').unbind('click',function(){ }) # 第三种（重要，委托） $('.c').delegate('a', 'click', function(){ }) $('.c').undelegate('a', 'click', function(){ }) # 三种方法内部均调用下面两种方法 $('.c1').on('click', function(){ }) $('.c1').off('click', function(){ })
2.阻止事件发生:
return false
3.当页面框架加载完成之后，自动执行
$(function(){ $(...) })
4.jQuery扩展：
- $.extend $.方法 - $.fn.extend $(..).方法 (function(){ var status = 1; // 封装变量 })(jQuery)