jQuery
基礎(chǔ)語法是：$(selector).action()
美元符號定義 jQuery
選擇符（selector）“查詢”和“查找” HTML 元素
jQuery 的 action() 執(zhí)行對元素的操作
示例：
- $(this).hide() - 隱藏當(dāng)前元素
- $("p").hide() - 隱藏所有p段落
- $("p.test").hide() - 隱藏所有 class="test" 的p段落
- $("#test").hide() - 隱藏所有 id="test" 的元素
- $("h1,h2,h3,h4,h5").css("color","blue") - 設(shè)置多種標(biāo)簽使用一種樣式
節(jié)點選擇
層級選擇器使用
$("ul li").css();//獲取ul中的所有l(wèi)i子節(jié)點
$("ul > li").css();//獲取ul的直接子li節(jié)點
$("ul + li").css();//緊鄰ul后的第一個li節(jié)點
$("ul ~ li").css();//獲取ul后所有兄弟li節(jié)點
基本篩選選擇器
:fisrt//獲取第一個元素
$("ul li:first").css();//獲取ul中第一個li
:not//去除所有與給定選擇器匹配的元素
$("ul li:not(:checked)");//查找所有未選中的input元素
:last//獲取最后一個元素
$("ul li:last").css();//獲取ul中最后一個li
:even//匹配所有索引值為偶數(shù)的元素，從0開始計數(shù)
$("ul li:even").css();//獲取ul中的偶數(shù)li元素，第1行開始為0，偶數(shù)
:odd//匹配所有索引值為奇數(shù)的元素，從0開始計數(shù)
$("ul li:odd").css();//獲取ul中的奇數(shù)li元素
:eq//匹配一個給定索引值的元素,從0開始,第一行為0
$("ul li:eq(1)");
:gt//匹配所有大約給定索引值的元素，從第0行開始
$("ul li:gt(0)");
:it //匹配所有小于給定索引值的元素,從0開始計數(shù)
$("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之類的標(biāo)題元素
$(":header").css("background","#EEE);
:animated //選擇當(dāng)前的動畫元素
$(":animated");
:focus //匹配當(dāng)前獲取焦點的元素
:root //選擇該文檔的根元素
//在HTML中，文檔的根元素，和$(":root")選擇的元素一樣， 永遠是<html>元素。
內(nèi)容選擇器
: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] //匹配給定的屬性是以某些值結(jié)尾的元素
//查找所有name以'letter'結(jié)尾的input元素
$("input[attribute$='letter']");
[attribute*=value] //匹配給定的屬性是以包含某些值的元素
//查找所有name包含'man'的input元素
$("input[name*='man']");
[attrSel1][attrSel2][attrSelN] //復(fù)合屬性選擇器，需要同時滿足多個條件時使用
//找到所有含有id屬性，并且它的name屬性是以man結(jié)尾的input元素
$("input[id][name$='man']");
子元素
:first-child //匹配第一個子元素，為每個父元素匹配一個子元素
$("ul li:first-child");
:first-of-type
//查找作為父元素的span類型子元素中的"長子"的span標(biāo)簽
$("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個子元素。計數(shù)從最后一個元素開始到第一個。
//倒數(shù)第幾個子元素
/*
n 匹配子元素序號 必須是整數(shù)，從1開始而不是0
even 匹配所有偶數(shù)元素
odd 匹配所有技術(shù)元素
formula 使用特殊公式如(an+b)進行選擇，例如:nth-last-child(3n+2) 從倒數(shù)第二個子元素開始，匹配每個3的倍數(shù)的元素
*/
:nth-last-of-type(n|even|odd|formula)
//選擇的所有他們的父級元素的第n個子元素，計數(shù)從最后一個元素到第一個。
:nth-of-type(n|even|odd|formula)//選擇同屬于一個父元素之下，并且標(biāo)簽名相同的子元素中的第n個。
:only-child //如果某個元素是父元素中唯一的子元素，那將會被匹配
//在ul中查找是唯一子元素的li
$("ul li:only-child");
:only-of-type //選擇所有沒有兄弟元素，且具有相同的元素名稱的元素。
表單
:input //匹配所有input，textarea，select和button元素
:text //匹配所有的單行文本框
:password //匹配所有密碼框
:radio //匹配所有的單選按鈕
:checkbox //匹配所有的復(fù)選框
:submit //匹配所有提交按鈕
:image //匹配所有圖像域
:rest //匹配所有重置按鈕
:button //匹配所有按鈕
:file //匹配所有文件域
表單對象屬性
:enabled //匹配所有可用元素
:disabled //匹配所有不用元素
:checked //匹配所有選中的被選中的元素(復(fù)選框、單選框等，select中的option，對于select元素來說，獲取選中推薦使用 :selected)
:selected //匹配所有選中的option元素
jQuery對象訪問
each(callback) //以每一個匹配的元素作為上下文來執(zhí)行一個函數(shù)
size() //jQuery對象中元素的個數(shù)，與length返回值相同
length() //jQuery對象中元素的個數(shù)
selector() //返回傳給jQuery()的原始選擇器，確定查詢的選擇器
context //返回傳個jQuery()的原始的DOM節(jié)點內(nèi)容，即jQuery()的第二個參數(shù)。如果沒有指定，那么context指向當(dāng)前的文檔(document)。
get([index]) //取得其中一個匹配的元素。
/*[index] 取得第index個位置上的元素
get() 取得所有匹配的DOM元素集合*/
index([selector|element]) //搜素匹配的元素，并返回相應(yīng)的索引值，從0開始計數(shù)
數(shù)據(jù)緩存
data([key],[value]) //在元素上存放或讀取數(shù)據(jù)，返回jQuery對象
removeData([name|list]) //在元素上移除存放的數(shù)據(jù)
屬性選擇器
<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) //設(shè)置或返回被選元素的屬性值
name: 屬性名稱
properties: 作為屬性的"名/值對"對象
key,value: 屬性名稱，屬性值
key,function(index,attr):
1:屬性名稱。
2:返回屬性值的函數(shù),第一8個參數(shù)為當(dāng)前元素的索引值，第二個參數(shù)為原先的屬性值。
removeAttr(name) //從每一個匹配的元素中刪除一個屬性
prop(name|properties|key,value|fn) //獲取在匹配元素集中的第一個元素的屬性值
removeProp(name) //刪除prop()方法設(shè)置的屬性集
CSS類
addClass(class|fn) //為每個匹配的元素添加指定的類名
removeClass([class|fn]) //從所有匹配的元素中刪除全部或者指定的類
toggleClass(class|fn[,sw]) //如果存在(不存在)就刪除(添加)一個類
HTML代碼/文本/值
html([val|fn]) //取得或設(shè)置第一個匹配元素的html內(nèi)容。
text([val|fn]) //取得或設(shè)置所有匹配元素的內(nèi)容。
val([val|fn|arr]) //獲取或設(shè)置匹配元素的當(dāng)前值
文檔處理
append(content|fn) //向每個匹配的元素內(nèi)容追加內(nèi)容
