一、jQuery語法
基礎語法：$(selector).action();
jQuery的所有代碼都將寫在$(document).ready()函數中。
二、選擇器
2.1 基礎選擇器
#id根據id匹配一個元素.class根據class匹配一個元素- element 根據元素名稱匹配元素
*選擇所有元素，包括body
上述實例如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery ex01</title>
</head>
<body>
<h2>welcome to jQuery</h2>
<div id="demo01"></div>
<div class="demo02">
<a href="http://www.baidu.com">
http://www.baidu.com<em>hai</em>
</a>
</div>
<script src="http://labfile.oss.aliyuncs.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("h2").css({
"color": "darkred",
"margin-bottom":"10px"
}),
$("#demo01").css({
"margin": "10px",
"float": "left",
"width":"100px",
"height":"100px",
"background":"red"
}),
$(".demo02").css({
"margin": "10px",
"float": "left",
"width":"100px",
"height":"100px",
"background":"blue"
}),
$("a,em").css({
"margin-left": '150px',
"float":"left",
"color": 'purpose',
"width":"100px",
"height":"100px"
});
});
</script>
</body>
</html>selector1,selector2,……
用“，”分隔開然後再拼成一個選擇器字符串，同時選擇多個匹配的選擇器的內容。
2.2 層次選擇器
- ancestor descendant
選中ancestor中的所有descendant後代元素，選擇類名爲demo02的元素的所有後代a元素，直接的第一個子元素百度，字體樣式得到改變，實驗樓也是demo02的後代，也得到了樣式的改變。
<div class="demo02">
<a href="http://www.baidu.com">百度</a>
<div class="innerDemo">
<a href="http://www.shiyanlou.com">實驗樓</a>
</div>
</div>
-----------------------------------------------------------
$(document).ready(function() {
$(".demo02 a").css({
"font-size": "25px",
})
});- parent>child
選中parent的直接子節點child，child必須包含在parent中，並且父類是parent元素。注：選擇的是子元素，與後代元素區分。後代是一個空格，這裏是>。
$(document).ready(function() {
$(".demo02>a").css({
"font-size": "25px",
})
});- prev + next
prev和next是兩個同級別的元素。選中在prev元素後面的next元素。選中class爲demo後面的a元素，並設置大小如下：
$(document).ready(function() {
$(".demo02+a").css({
"font-size": "30px",
})
});- prev~siblings
選擇prev後面的根據siblings過濾的所有元素中選中class爲demo的div元素後面的所有a同輩元素，並設置大小如下：
$(document).ready(function() {
$(".demo02~a").css({
"font-size": "30px",
})
});2.3 表單選擇器
:input 選取所有的
<input>、<textarea>、<select>、<button>元素
:text 選取所有的單行文本框
:password 選取所有的密碼框
:radio 選取所有的單選框
:checkbox 選取所有的多選框
:submit 選取所有的提交按鈕
:image 選取所有的圖像按鈕
:reset 選取所有的重置按鈕
:button 選取所有的按鈕 集合元素
:file 選取所有的上傳域
:hidden 選取所有的不可見元素
如：
$(document).ready(function() {
$(":input").css({
"font-size": "30px",
})
});2.4 過濾選擇器
(1). 基本過濾選擇器
:first-匹配第一個元素-
$("div:first")
:last-匹配最後一個元素-$("span:last")
:not(selector)-選取不包含匹配條件的元素-$("p:not(.a)")
:even-匹配索引是偶數的元素索引從0開始-$("li:even")
:odd-匹配索引是奇數的元素-索引從0開始-$("li:odd")
:eq(index)-匹配索引等於index的元素(索引從0開始)-$("input:eq(2)")
:gt(index)-匹配索引大於index的元素(索引從0開始)-$("input:gt(1)")
:lt(index)-匹配索引小於index的元素(索引從0開始)-$("input:lt(5)")
:header-匹配所有h1,h2…等標題元素-$(":header")
:animated-匹配所有正在執行動畫的元素-$("div:animated")
:foucus-選取當前獲取焦點的元素-$(":focus")
(2). 內容過濾選擇器
:contains(text)-匹配含有文本內容text的元素-
$("p:contains(今天)")
:empty-匹配不含子元素或文本元素的空元素-$("p:empty")
:has(selector)匹配包含selector元素的元素-$("div:has(span)")
:parent-匹配含有子元素或文本的元素集合元素-$("div:parent")
(3). 可見性過濾選擇器
:hidden-匹配所有不可見的元素-
$(":hidden")
:visible-匹配所有可見元素-$(":visible")
(4). 屬性過濾選擇器
[attr]-匹配擁有此屬性的元素-
$("img[alt]")
[attr=value]-匹配屬性值爲value的元素-$("a[title=test]")
[attr!=value]-匹配屬性值不等於value的元素-$("a[title!=test]")
[attr^=value]-匹配屬性值以value開頭的元素-$("img[alt^=welcome]")
[attr$=value]-匹配屬性值以value結尾的元素-$("img[alt$=last]")
[attr*=vlaue]-匹配屬性值中含有value的元素-$("div[title*=test]")
[attr1][attr2]…通過多個屬性進行匹配-$("div[id][title*=test]")
(5). 子元素過濾選擇器
:first-child-選取第一個子元素-
$("div:first-child")
:last-child-選取最後一個子元素-$("div:last-child")
:nth-child-匹配每個父元素下的第index個子元素索引從1開始-$("div:nth-child(2)")
:only-child-某元素是它父元素中的唯一的子元素則匹配它-$("div:only-child")
(6). 表單對象屬性過濾選擇器
:enabled-匹配所有可用元素-
$("form:enabled")
:disabled-匹配所有不可用的元素-$("form:disabled")
:checked-匹配所有被選中的元素(含單選框，複選框)-$("input:checked")
:selected-匹配所有被選中的選項元素-$("select :selected")