jQuery
基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
示例：
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有p段落
- $("p.test").hide() - 隐藏所有 class="test" 的p段落
- $("#test").hide() - 隐藏所有 id="test" 的元素
- $("h1,h2,h3,h4,h5").css("color","blue") - 设置多种标签使用一种样式
节点选择
层级选择器使用
$("ul li").css();//获取ul中的所有li子节点
$("ul > li").css();//获取ul的直接子li节点
$("ul + li").css();//紧邻ul后的第一个li节点
$("ul ~ li").css();//获取ul后所有兄弟li节点
基本筛选选择器
:fisrt//获取第一个元素
$("ul li:first").css();//获取ul中第一个li
:not//去除所有与给定选择器匹配的元素
$("ul li:not(:checked)");//查找所有未选中的input元素
:last//获取最后一个元素
$("ul li:last").css();//获取ul中最后一个li
:even//匹配所有索引值为偶数的元素，从0开始计数
$("ul li:even").css();//获取ul中的偶数li元素，第1行开始为0，偶数
:odd//匹配所有索引值为奇数的元素，从0开始计数
$("ul li:odd").css();//获取ul中的奇数li元素
:eq//匹配一个给定索引值的元素,从0开始,第一行为0
$("ul li:eq(1)");
:gt//匹配所有大约给定索引值的元素，从第0行开始
$("ul li:gt(0)");
:it //匹配所有小于给定索引值的元素,从0开始计数
$("ul li:it(2)");
:lang //选择指定语言的所有元素
/*:lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。
例如，选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr">*/
$("ul li:lang(it)");
:header //匹配h1,h2,h3之类的标题元素
$(":header").css("background","#EEE);
:animated //选择当前的动画元素
$(":animated");
:focus //匹配当前获取焦点的元素
:root //选择该文档的根元素
//在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素。
内容选择器
:contains(text) //匹配包含给定文本的元素
//查找所有包含"John"的div元素
$("div:contains('John')");
:empty //匹配所有不包含子元素或者文本的空元素
$("td:empty");
:has(selector) //匹配含有选择器所匹配的元素的元素,selector:一个用于筛选的选择器
//给所有包含p元素的div元素添加一个test类
$("div:has(p)").addClass("test");
:parent //匹配含有子元素或者文本的元素
//查找所有含有子元素或者文本的td元素
$("td:parent");
可见性
:hidden //匹配所有不可见元素，或者type为hidden的元素
//查找隐藏的tr
$("tr:hidden");
:visible //匹配所有的可见元素
$("tr:visible");
属性
[attribute] //匹配包含给定属性的元素。
//查找所有含有id属性的div元素
$("div[id]");
[attribute=value] //匹配给定的属性是某个特定值的元素
$("input[name='uname']");
[attribute!=value] //匹配所有不含有指定的属性，或者属性不等于特定值的元素
$("input[name!='uname']");
[attribute^=value] //匹配给定的属性是以某些值开始的元素
//查找所有name属性值中包含news的input元素
$("input[name^='news']");
[attribute$=value] //匹配给定的属性是以某些值结尾的元素
//查找所有name以'letter'结尾的input元素
$("input[attribute$='letter']");
[attribute*=value] //匹配给定的属性是以包含某些值的元素
//查找所有name包含'man'的input元素
$("input[name*='man']");
[attrSel1][attrSel2][attrSelN] //复合属性选择器，需要同时满足多个条件时使用
//找到所有含有id属性，并且它的name属性是以man结尾的input元素
$("input[id][name$='man']");
子元素
:first-child //匹配第一个子元素，为每个父元素匹配一个子元素
$("ul li:first-child");
:first-of-type
//查找作为父元素的span类型子元素中的"长子"的span标签
$("span:first-of-type");
:last-child //匹配每个父元素的一个子元素
:last-of-tupe
:nth-child(2) //匹配父元素下的第N个子或奇偶元素，从1开始
//在每个ul中查找第2个li
$("ul li:nth-child(2)");
:nth-last-child(n|even|odd|formula) //选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
//倒数第几个子元素
/*
n 匹配子元素序号 必须是整数，从1开始而不是0
even 匹配所有偶数元素
odd 匹配所有技术元素
formula 使用特殊公式如(an+b)进行选择，例如:nth-last-child(3n+2) 从倒数第二个子元素开始，匹配每个3的倍数的元素
*/
:nth-last-of-type(n|even|odd|formula)
//选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。
:nth-of-type(n|even|odd|formula)//选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
:only-child //如果某个元素是父元素中唯一的子元素，那将会被匹配
//在ul中查找是唯一子元素的li
$("ul li:only-child");
:only-of-type //选择所有没有兄弟元素，且具有相同的元素名称的元素。
表单
:input //匹配所有input，textarea，select和button元素
:text //匹配所有的单行文本框
:password //匹配所有密码框
:radio //匹配所有的单选按钮
:checkbox //匹配所有的复选框
:submit //匹配所有提交按钮
:image //匹配所有图像域
:rest //匹配所有重置按钮
:button //匹配所有按钮
:file //匹配所有文件域
表单对象属性
:enabled //匹配所有可用元素
:disabled //匹配所有不用元素
:checked //匹配所有选中的被选中的元素(复选框、单选框等，select中的option，对于select元素来说，获取选中推荐使用 :selected)
:selected //匹配所有选中的option元素
jQuery对象访问
each(callback) //以每一个匹配的元素作为上下文来执行一个函数
size() //jQuery对象中元素的个数，与length返回值相同
length() //jQuery对象中元素的个数
selector() //返回传给jQuery()的原始选择器，确定查询的选择器
context //返回传个jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。
get([index]) //取得其中一个匹配的元素。
/*[index] 取得第index个位置上的元素
get() 取得所有匹配的DOM元素集合*/
index([selector|element]) //搜素匹配的元素，并返回相应的索引值，从0开始计数
数据缓存
data([key],[value]) //在元素上存放或读取数据，返回jQuery对象
removeData([name|list]) //在元素上移除存放的数据
属性选择器
<form>
姓名：<input type="text" name="uname" value="zhangsan"/></br>
年龄：<input type="text" name="age"/></br>
电话：<input type="text" name="phone"/></br>
邮箱：<input type="text" name="email"/></br>
地址：<input type="text" name="address" /></br>
</form>
<script>
$(function(){
//获取含有value值的
$("inpute[value]").css("border","2px solid red");
//获取name为age的
$("inpute[name="age"]").css("border","2px solid red");
//获取name中含有n的
$("inpute[name*='n']").css("border","2px solid red");
});
</script>
属性
属性
attr(name|properties|key,value|fn) //设置或返回被选元素的属性值
name: 属性名称
properties: 作为属性的"名/值对"对象
key,value: 属性名称，属性值
key,function(index,attr):
1:属性名称。
2:返回属性值的函数,第一8个参数为当前元素的索引值，第二个参数为原先的属性值。
removeAttr(name) //从每一个匹配的元素中删除一个属性
prop(name|properties|key,value|fn) //获取在匹配元素集中的第一个元素的属性值
removeProp(name) //删除prop()方法设置的属性集
CSS类
addClass(class|fn) //为每个匹配的元素添加指定的类名
removeClass([class|fn]) //从所有匹配的元素中删除全部或者指定的类
toggleClass(class|fn[,sw]) //如果存在(不存在)就删除(添加)一个类
HTML代码/文本/值
html([val|fn]) //取得或设置第一个匹配元素的html内容。
text([val|fn]) //取得或设置所有匹配元素的内容。
val([val|fn|arr]) //获取或设置匹配元素的当前值
文档处理
append(content|fn) //向每个匹配的元素内容追加内容
