一、jQuery介绍
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是："Write less, do more."
二、jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
三、jQuery版本
1.x：使用最广泛
2.x：不兼容IE678,很少有人使用
3.x：比兼容IE678，只支持最新的浏览器，我们使用3.x版本
四、jQuery对象
jQuery兑现就通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。
一个对象如果是jQuery对象那么就可以使用jQuery里的方法
jQuery对象虽然是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法
同样DOM对象也不能使用jQuery里的方法
在jQuery中声明一个变量要在jQuery对象变量的时候在变量名前面加上$
例如：var $varible = jQuery对象
var varible = DOM对象
$varible[0] 将jQuery对象转换为DOM对象
jquery对象和DOM对象的使用
$（"#i1"）.html; //jQuery对象可以使用jQuery的方法
$（"#i1"）[0].innerhtml; //DOM对象使用DOM的方法
五、jQuery基础语法
$（selector）.action()
六、jQuery查找标签
1、id选择器
$("#id")
2、标签选择器
$("tahName")
3、class选择器
$(".className")
4、配合使用
$("div.c1") 找到c1 class类的div标签
$('div#d1')
5、所有元素选择器
$("*")
6、组合选择器
$("id，.className，tagName")
$('#d1，.c1，p') 并列+混用
$('div span') 后代
$('div>span') 儿子
$('div+span') 毗邻
$('div~span') 弟弟
7、层级选择器
$("x y")； x的所有后代y（子子孙孙）
$("x > y") ； x的所有儿子y（儿子）
$("x + y")； 找到所有紧挨在x后面的y
$("x ~ y")； x之后所有的兄弟y
8、基本筛选器
：first 第一个
：last 最后一个
：eq(index) 索引等于index的那个元素
：even 匹配所有索引为偶数的元素，从0开始计数
：odd 匹配所有索引为计数的元素，从0开始计数
：gt(index) 匹配所有大于给定索引值得元素
：lt(index) 匹配所有小于给定索引值得元素
：not(元素选择器) 移除所有1满足not条件的标签
：has(元素选择器) 选取所有包含一个或多个标签在其内的标签（指的是从后代元素找）
例子：
$('ul li:first') # 大儿子
$('ul li:last') # 小儿子
$('ul li:eq(2)') # 放索引
$('ul li:even') # 偶数索引 0包含在内
$('ul li:odd') # 奇数索引
$('ul li:gt(2)') # 大于索引
$('ul li:lt(2)') # 小于索引
$('ul li:not("#d1")') # 移除满足条件的标签
$("div:has('h1')")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
9、属性选择器
attribute
attribute=value\] 属性等于 \[attribute!=value\] 属性不等于 例子： \ \ \ $("input\[type='checkbox'\]");// 取到checkbox类型的input标签 $("input\[type!='text'\]");// 取到类型不是text的input标签
10、表单筛选器
：text
：password
：file
：radio
：checkbox
：submit
：reset
：button
例子：
$(":checkbox") // 找到所有的checkbox
('input\[type="text"\]')----------\>(':text')
('input\[type="password"\]')----------\>(':password')
11、表单对象属性
：enabled
：disabled
：checked
：selected
例子：找到可用的标签
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
例子2：找到被选中的option
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
$(':checked') # 它会将checked和selected都拿到
$(':selected') # 它不会 只拿selected
$('input:checked') # 自己加一个限制条件
12、筛选器方法
1、下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
2、上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prev.Until("#i2")
3、父亲元素
$("#id").parent()
$("#id")parents() 查找当前元素的所有父辈元素
$("#id").parentsUntil() 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
4、儿子和兄弟元素
$("#id").children()； 儿子们
$("#id").silblings()； 兄弟们
5、查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
("div").find("p")-------------------------等价于("div p")
6、筛选
筛选出于指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
("#div").filter(".c1") 从结果中过滤出有c1样式类的，等价于("div.c1")
7、补充
.first() 获取匹配的第一一个元素
('div span.first')----------('div span').first()
.last() 获取匹配的最后一个元素
('div span:last')----------('div span').last()
.not() 从匹配元素的集合中删除与指定表达式匹配的元素
('div span:not("#d3")')---------('div span').not("#d3")
.has() 保留包含特定后代的元素，去掉那些不含有后代的元素
.eq() 索引值等于指定值得元素