##jQuery是一个jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。
##先讲一下jQuery的优势
轻量级
强大的选择器
出色的DOM操作
可靠的事件处理机制
完善的Ajax
出色的浏览器兼容性
链式操作方式
丰富的插件支持
完善的文档
开源
##配置jQuery环境
获取jQuery最新版本
进入jQuery官网，下载最新jQuery库文件。
1.x代表的是兼容ie6-8
2.x代表的是不兼容ie6-8
在页面中引入jQuery
在head标签内引入jQuery，格式如下：
##代码及注意事项
$(document).ready(function(){
alert(“Hello World!”);
});
注意：
1.在jQuery库中，$ 就是jQuery的一个简写形式
例如： $(“#div”)==jQuery(“#div”)
2.当浏览器解析完document后，执行ready小括号内的函数。
##jquery使用入门
选择器:类似于css的选择器(包含css1-css3的选择器)
例子：
$(“#div1>p”)事件绑定：
$(“#btn”).click(function (){});
$(“#btn”).on(“click”,function (){});修改样式：
$(“#div1”).css({“left”:100});修改属性：
$(“#img1”).attr({“src”: “img/1.jpg”});动画：
$(“#div1”).animate({“left”:100},500,function (){alert(‘a’);});dom操作
创建元素：
$("<div><a href=‘###'>xx</a></div>")
添加元素：
$("<div><a href='###'>xx</a></div>").appendTo('#div1');
原生对象转jquery对象
var div1 = document.getElementById(“div1”);
$(div1).css();
##jQuery选择器的优势
简洁的写法
支持CSS1到CSS3选择器
完善的处理机制
##jQuery选择器的分类
基本选择器
层次选择器
过滤选择器
###基本选择器
1.#id
描述：根据给定的id匹配一个元素
返回：单个元素
实例：$(“#demo”)选取id为demo的元素
2..class
返回：集合元素
描述：根据给定的类名匹配元素
实例：$(“#demo”)选取id为demo的元素
3.element
返回：集合元素
描述：根据给定的元素名匹配元素
实例：$(“p”)选取所有的<p>元素
4.*
返回：集合元素
描述：匹配所有元素
实例：$(“*”)选取所有的元素；
5.Selector1,selector2,…，selectorN
返回：集合元素
描述：将每一个选择器匹配到的元素合并后一起返回
实例：$(“div,span,p.myClass”)选取所有<div>，<span>和拥有class为myClass的<p>标签的一级组元素
###层次选择器
1.$(“ancestor desendant”)
描述：选取ancestor元素里的所有desendant(后代)元素
返回：集合元素
实例：$(“div span”)选取<div>里的所有的<span>元素
2.$(“parent>child”)
描述：选取parent元素下的子元素
返回：集合元素
实例：$(“div>span”)选取<div>元素下元素名是<span>的子元素
3.$(“prev+next”)
描述：选取紧接在prev元素后的next元素
返回：集合元素
实例：$(“.one+div”)选取class为one的下一个<div>同辈元素
4.$(“prev~siblings”)
描述：匹配所有元素选取prev元素之后的所有siblings元素
返回：集合元素
实例：$(“#two~div”)选取id为two的元素后面的所有<div>同辈元素
###基本过滤选择器
1.:first
描述：选取第一个元素
返回：单个元素
实例：$(“#demo”)选取id为demo的元素$(“div :first”)选取所有<div>元素中第1个<div>元素
2.:last
描述：选取最后一个元素
返回：单个元素
实例：$(“div:last”)选取所有<div>元素中最后一个<div>元素
3.:not(selector)
描述：去除所有与给定选择器匹配的元素
返回：集合元素
实例：$(“input:not(.myClass)”)选取class不是myClass的<input>元素
4.:even
描述：匹配所有元素选取索引是偶数的所有元素，索引从0开始
返回：集合元素
实例：$(“input:even”)选取索引是偶数的<input>元素
5.:odd
描述：选取索引是奇数的所有元素，索引从0开始
返回：集合元素
实例：$(“input:odd”)选取索引是奇数的<input>元素
6.:eq(index)
描述：选取索引等于index的元素(index从0开始)
返回：单个元素
实例：$(“input:eq(1)”)选取索引等于1的<input>元素
7.:gt(index)
描述：选取索引大于index的元素(index从0开始)
返回：集合元素
8.:lt(index)
描述：选取索引小于index的元素(index从0开始)
返回：集合元素
实例：$(“input:even”)选取索引是偶数的<input>元素
内容过滤选择器
1.:contains(text)
描述：选取含有文本内容为“text”的元素
返回：集合元素
实例：$(‘div:contains(“测试”)’)选取包含文本“测试”的<div>元素
2.:empty
描述：选取不包含子元素或者文本的空元素
返回：集合元素
实例：$(‘div:empty’)选取不包含子元素和文本的<div>空元素
3.:has(selector)
描述：选取含有选择器所匹配的元素的元素
返回：集合元素
实例：$(‘div:has(p)’)选取含有<p>元素的<div>元素
4.:parent
描述：选取含有子元素或者文本的元素
返回：集合元素
实例：$(“div:parent”)选取拥有子元素或文本元素的<div>元素
###属性过滤选择器
1.[attr]
描述：选取拥有此属性的元素
返回：集合元素
实例：$(“div[id]”)选取拥有属性id的元素
2.[attr=value]
描述：选取属性的值为value的元素
返回：集合元素
实例：$(“div[title=test]”)选取属性title为”test”的<div>元素
3.[attr!=value]
描述：选取属性的值不等于value的元素
返回：集合元素
实例：$(“div[title!=test]”)选取属性title不等于 ”test”的<div>元素
4.attr^=value]
描述：选取属性的值以value开始的元素
返回：集合元素
实例：$(“div[title^=test]”)选取属性title以”test”开始的<div>元素
5.[attr$=value]
描述：选取属性的值以value结束的元素
返回：集合元素
实例：$(“div[title$=test]”)选取属性title以”test”结束的<div>元素
6.attr*=value]
描述：选取属性的值含有value的元素
返回：单个元素
实例：$(“div[title*=test]”)选取属性title含有”test”的<div>元素
7.[attr1][attr2][attrN]
描述：选择满足所有属性选择器的元素
返回：集合元素
实例：$(“div[id][title$=‘test’]”)选取拥有属性id,并且属性title以”test”结束的<div>元素
子元素过滤选择器
1.:nth-child(index/even/odd)
描述：选取每个父元素下的第index个或者奇偶元素。index从1开始
返回：集合元素
实例：$(‘div:nth-child(1)’) 选取所有div中的，是其父标签的第一个子标签的div；$(‘div:eq(0)’);选取第一个div；
2.:first-child
描述：选取每个父元素的第一个子元素
返回：集合元素
实例：$(“ul li: first-child”)选取每个<ul>中第一个<li>元素
$(‘div:first’)选择所有div标签中的第一个。
3.:last-child
描述：选取每个父元素的最后一个子元素
返回：集合元素
实例：$(“ul li: last-child”)选取每个<ul>中最后一个<li>元素；$(‘div:last’)选择所有div标签中的最后一个。
4.:only-child
描述：如果某个元素是它父元素中唯一的子元素，那么将会被匹配。
返回：集合元素
实例：$(“ul li:only-child”)在<ul>中选取是惟一子元素的<li>元素
