一、JQuery介绍
JQuery是一个轻量级、兼容多浏览器的JavaScript库。可以更方便的处理HTML Document、Events、实现动画效果、方便的进行Ajax交互，能够极大的简化JavaScript编程。
JQuery1.X版本兼容IE678，官方制作BUG维护，功能不更新。3.x版本不兼容IE678，只支持最新浏览器，官方主页维护该版本。
JQuery对象是JQuery包装DOM对象后产生的对象，如可以通过$("#i1").html()获取id值为i1的元素的html代码。JQuery对象无法使用DOM对象的任何方法。
一般在声明一个JQuery对象变量的时候在变量名前面加上$，如 var $variable = JQuery对象。可以通过$variable[0]将JQuery对象转为DOM对象。
二、JQuery基础语法
1.查找标签
id选择器：
$("#id")
标签选择器：
$("tagName")
class选择器：
$(".calssName")
配合使用：
$("div.c1") //具有c1样式类的div标签
所有元素选择器：
$("*")
组合选择器：
$("#id,.className,tagName")
层级选择器：
x和y可以为任意选择器
$("x y"); //x的所有后代y
$("x > y"); //x的所有儿子y
$("x + y"); //找到所有紧挨在x后面的y
$("x ~ y"); //x之后所有的兄弟y
基本筛选器：
:first //第一个 :last //最后一个 :eq(index) //索引等于index的那个元素 :even //匹配所有索引值为偶数的元素，从0开始计数 :odd //匹配所有索引值为计数的元素，从0开始计数 :gt(index) //匹配所有大于给定索引值的元素 :lt(index) //匹配所有小于给定索引值的元素 :not(元素选择器) //移除所有满足not条件的标签 :has(元素选择器) //选取所有包含一个或多个标签在内的标签（后代元素中找）
属性选择器：
[attribute] [attribute=value] //属性等于 [attribute!=value] //属性不等于
示例：
<input type="text"> <input type="password"> <input type="checkbox"> $("input[type=‘checkbox‘]") ; //选取checkbox类型的input标签 $("input[type!=‘text‘]"); //选取类型不是text的input标签
表单常用筛选器：
:text
:password
:file
:redio
:checkbox
:submit
:reset
:button
示例：
$(":checkbox") //找到所有的checkbox
表单对象属性：
:enabled
:disabled
:checked
:selected
示例：
<form>
<input name="email" disabled="disabled">
<input name="id">
</form>
$("input:enabled") //找到可用的input标签
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") //找到所有被选中的option
2.筛选器
下一个元素：
$("#id").next()
$("#id").nextALL()
$("#id").nextUntil("#i2")
上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素：
$("#id").parent()
$("#id").parents() //查找当前元素的所有父辈元素
$("#id").parentUntil("#i2") //查找当前元素的所有父辈元素，知道遇到匹配的那个元素为止。
儿子和兄弟元素：
$("#id").children(); //儿子们
$("#id").siblings(); //兄弟们
查找元素：
$("#id").find() //搜索所有与指定表达式匹配的元素。
补充：
.first() //获取匹配的第一个元素 .last() //获取匹配的最后一个元素 .not() //从匹配元素的集合中删除与指定表达式匹配的元素 .has() //保留包含特定后代的元素，去掉那些不包含指定后代的元素。
3.操作标签
样式类:
addClass(); //添加指定的css类名 removeClass(); //移除指定的css类名 hasClass(); //判定样式是否存在 toggleClass(); //切换css类名，如果有就删除，如果没有就添加
示例：开关灯的模态框
//CSS css("color","red") //DOM操作：tag.style.color="red" //JQuery $("p").css("color","red")
位置：
offset() //获取匹配元素在当前窗口的相对偏移或设置元素位置 position() //获取匹配元素相对父元素的偏移 scrollTop() //获取匹配元素相对滚动条顶部的偏移 scrollLeft() //获取匹配元素相对滚动条左侧的偏移
.offset()方法允许检索一个元素相对于文档(document)的当期位置。和.position()的差别在于.position()是相对于父级元素的位移。
尺寸：
height()
width()
innerHeight()
innerWidth()
outterHeight()
outerWidth()
文本操作
html代码：
html() //取得第一个匹配元素的html内容 html(val) //设置所有匹配元素的HTML内容
文本值：
text() //取得所有匹配元素的内容 text(val) //设置所有匹配元素的内容
值：
val() //取得第一个匹配元素的当前值 val(val) //设置所有匹配元素的值 val([val1,val2]) //设置checkbox、select的值
示例：
获取被选中的checkbox或radio的值
<label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1">
JQuery中使用
$("input[name=‘gender‘]:checked").val()
属性操作
用于id等或自定义属性：
attr(attrName) //返回第一个匹配元素的属性值 attr(attrName,attrValue) //为所有匹配元素设置一个属性值 attr({k1:v1,k2:v2}) //为左右匹配元素设置多个属性值 removeAttr() //从每一个匹配的元素中删除一个属性
用于checkbox和readio
prop() //获取属性 removeProp() //移除属性
