jQuery API及用法總結
選擇器
基本選擇器
-
* 通用選擇器
-
.class 類選擇器，一個元素可以有多個類(chrome使用原生js函式getElementByClassName()實作)
利用類選擇器改變元素的樣式
<div class="demo"></div>
<script type="text/javascript">
$('.demo').css({
border: '3px solid red',
})
</script>
- element元素選擇器，DOM節點的標簽名(呼叫函式getElementByTagName()實作)
利用元素選擇器查找檔案中的元素,添加css樣式
<script type="text/javascript">
$('div').css({
color: 'skyblue',
})
</script>
- id選擇器，具有唯一性,在一個檔案中只能使用一次（原生js呼叫getElementById()函式)
查找id元素添加樣式
<div id="demo">demo3</div>
<script type="text/javascript">
$('#demo').css({
border: '3px solid skyblue',
})
</script>
層級選擇器
- 子選擇器(選擇父元素的子元素)
<div>
<p></p>
</div>
<script type="text/javascript">
$('div>p').css({
border: '3px solid skyblue',
})
</script>
- 群組選擇器（選擇可以匹配的所有元素）
選擇.demo和#demo,以逗號為間隔隔開
<div class="demo">demo2</div>
<div id="demo">demo3</div>
<script type="text/javascript">
$('.demo, #demo').css({
border: '2px solid red',
})
</script>
- 后代選擇器（選擇元素的下一個元素）
注意：會選擇該元素下所有匹配合適的元素
此例中所有的p均會被加上border樣式
<div>
<p>demo</p>
<p>demo</p>
<p>demo</p>
</div>
<script type="text/javascript">
$('div p').css({
border: '1px solid skyblue',
})
</script>
- 前綴選擇器
此例中選擇只有div下面類名為demo的元素
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
<script type="text/javascript">
$('div.demo').css({
color: 'red',
})
</script>
- next選擇器（只選擇到緊跟其后的同級元素）
注意：元素之間的關系必須是同級即兄弟元素，不能為父子關系
此例中選擇的是僅緊跟著p標簽的第一個span標簽，故會改變1的樣式
<p></p>
<span>1</span>
<span>2/span>
<span>3</span>
<script type="text/javascript">
$('p+span').css({
border: '2px solid blue',
})
</script>
- nextAll選擇器（選擇到跟隨其后的所有同級元素）
同第五個next選擇器，只不過選擇的范圍不同
此例中會選擇p標簽之后的所有span標簽，改變樣式
<p></p>
<span>1</span>
<span>2/span>
<span>3</span>
$('p~span').css({
border: '2px solid blue',
})
屬性選擇器
- [attribute]
$('div[title]')
查找所有屬性名為title的元素
此例三個div均會被添加border樣式
<div title = "demo"></div>
<div title = "demo"></div>
<div title = ""></div>
$('div[title = demo]').css({
border: '5px solid skyblue',
})
- [attribute = value],屬性名 = 屬性值
$('div[title = demo]')
查找title的屬性值為demo的所有元素并設定樣式
此例加邊框樣式的只有第一個第二個div
<div title = "demo"></div>
<div title = "demo"></div>
<div title = ""></div>
$('div[title = demo]').css({
border: '5px solid skyblue',
})
- [attribute|='value']
跟[attribute = value]基本類似，均是選擇屬性名等于該屬性值的所有元素
- [attribute='value']=以value開頭的所有元素
div[title^=demo]
查找title屬性是以demo開頭的元素
此例三個div中只有前兩個div會被選擇改變樣式
<div title = "demo"></div>
<div title = "demodemo"></div>
<div title = "de"></div>
$('div[title = demo]').css({
border: '5px solid skyblue',
})
- [attribute$='value']$=以value結尾的所有元素
div[title$=demo]
查找title屬性是以demo結尾的元素
此例三個div中前三個div會被選擇改變樣式
<div title = "demo"></div>
<div title = "demo demo"></div>
<div title = "demodemo"></div>
<div title = "de"></div>
$('div[title $= demo]').css({
border: '5px solid skyblue',
})
- [attribute!='value']
這個選擇器等同于 :not([attr=value]) 即非
div[title!=demo]
原生dom提供querySelectorAll()提高查詢的性能
此例中選擇title不等于demo的元素，即第一個和第三個
<div title = "demo"></div>
<div title = "demodemo"></div>
<div title = "de"></div>
$('div[title != demo]').css({
border: '5px solid skyblue',
})
- [attribute*='value']
只要屬性名中的一部分包含了value這個屬性值，均會被選擇到
div[title*=demo]
此例中第一個和第二個div均包含demo，所以選擇第一二個div元素
<div title = demo"></div>
<div title = "demodemo"></div>
<div title = "de"></div>
$('div[title*=demo]').html('jianmei');
- [attribute~='value']
div[title~=demo]即title屬性中有用空格分隔后的值等于demo
此例中第一個和第三個中都含有demo，且第二個有空格，故選擇的是第一個和第三個
__注意：__若此例中使用div[title=demo]，則選擇的只有第一個
<div title = "demo"></div>
<div title = "de demo"></div>
<div title = "demodemo"></div>
<div title = "de"></div>
$('div[title~=demo]').html('jianmei');
基本篩選選擇器
- :eq(index) index 匹配元素的索引值，從0開始
eq = equal平等的，即是等于index的值
此例中選擇的是index等于0的div
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
$('div:eq(0)').css({
color: 'red',
})
- :gt(index)
gt = great than 即是大于index的值
此例中第二個和第三個div會被選擇，選擇的是index大于0的元素
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
$('div:gt(0)').css({
color: 'red',
})
- :lt(index)
lt = less than 即是小于index的值
此例中第一個和第二個div會被選擇，選擇的是index小于0的元素
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
$('div:lt(2)').css({
color: 'red',
})
- :odd選擇__index為奇數__的元素,并不是按照視覺可見的順序
此例中選擇的是第二個和第四個div，index分別為1，3
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
<div class="demodemo">demo4</div>
$('div:odd').css({
color: 'red',
})
5.:even 選擇__index為偶數__的元素,并不是按照視覺可見的順序
此例中選擇的是第一個和第三個div，index分別為0，2
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
<div class="demodemo">demo4</div>
$('div:even').css({
color: 'red',
})
- :first相當于:eq(0),為了更好的性能，一般使用.filter(':first')
此時的順序是視覺上可見的順序
此例中僅選擇第一個div
<div class="demo">demo1</div>
<div class="demo">demo2</div>
$('div:first').html('jianmei');
- :last，為了更好的性能，一般使用.filter(':last')
此例中僅選擇最后一個div
<div class="demo">demo1</div>
<div class="demo">demo2</div>
$('div:last').html('jianmei');
- :header 選擇所有的標題元素，為了更好的性能，一般使用.filter(':header')
此例中的h1和h2均會被選擇，改變樣式
<h1>jianmei</h1>
<h2>jianmei</h2>
$(':header').css({
background: 'skyblue',
})
- :not() 用于過濾的選擇器，但是通常會構建非常復雜的選擇器，所以大多數情況下使用.not()方法
這里只寫.not(selector)方法
此例中選擇的是index不是奇數的div，所以選擇的是第一個和第三個div
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
<div class="demodemo">demo4</div>
$('div').not(':odd').css({
border: '2px solid skyblue',
})
- :lang('language') 選擇指定語言的所有元素
注意：此例中只有第一個和第二個span元素均會被選中，:lang會選中含有language或者第一個符合的language的元素，并不是只要含有language的元素都會被選擇
<span lang = "en">1</span>
<span lang = "en-mei">2</span>
<span lang = "mei-en">3</span>
$('span:lang(en)').css({
border: '2px solid red',
})
- :root 選擇的根元素永遠都是html
此例中會向每一個p中添加一個html
<p>demo</p>
<p>demo</p>
<p>demo</p>
$('<b></b>').html($(':root')[0].nodeName).appendTo('p');
- :target 匹配ID和識別符號相匹配的元素
例如：給定url : http://example.com/#foo
$('p:target');
將選擇 <p id = 'foo'>的元素
- :animated選擇所有正在執行影片效果的元素
為了更好的使用效果，首先使用純CSS選擇器選擇元素，然后使用.filter(":animated")
內容篩選
- :parent選擇所有包含子元素或者文本的父級元素
為了獲得更好的性能，首先使用純css選擇器選擇元素，然后使用.filter(':parent')
注意:parent涉及的子元素包含文本節點
此例中選擇的是第一個和第二個div，因為只有第三個是沒有子元素和文本節點的
<div><p></p></div>
<div> </div>
<div></div>
$('div:parent').css({
border: '3px solid skyblue',
})
- empty:和parent相反，選擇沒有包含子元素的元素
此例中選擇的是第三個div，因為只有第三個是沒有子元素和文本節點的
<div><p></p></div>
<div> </div>
<div></div>
$('div:empty').css({
border: '3px solid skyblue',
})
- :has()
$('div:has(p)')選擇一個div，這個div內至少含有一個p標簽
此處選擇的是第一個div，只有第一個div內含有p標簽
<div><p></p></div>
<div></div>
$('div:has(p)').css({
border: '2px solid skyblue',
})
- :contains(text)text區分大小寫，選擇所有包含指定文本的元素
$('div:has(mei)') 查找所有含有mei的div
<div>jian mei</div>
<div>mei</div>
$('div:contains(mei)').css({
border: '2px solid skyblue'
})
可見性篩選
- :hidden 選擇所有隱藏的元素
元素可以被認為是隱藏的幾種情況：
- css的display值為none
- type = "hidden"
- 元素的高度和寬度顯式設定為0
元素visibility:hidden和opcity:0被認為是可見的，因為他們仍然占據檔案空間，
使用:hidden()查詢不能充分利用原生DOM提供的querySelectorAll()方法來提高性能，為了在現代瀏覽器上獲得更佳的性能，請使用.filter(":hidden")代替
此例中div本來是隱藏的，選擇的是有隱藏元素的div，并在3s之后顯示
<div style="display: none;">hidden</div>
// :hidden
$('div:hidden').show(3000);
```
1. :visible 選擇所有可見的元素
跟hidden用法相反
<p>demo</p>
<p>demo</p>
<p>demo</p>
$('p:visible').click(function() {
$(this).css({
background: 'skyblue',
})
})
***
### 子元素篩選選擇器
1. :first-child 選擇所有父級元素下的第一個子元素
此例中僅div下面的第一個p改變樣式
<div>
<p>demo</p>
<p>demo</p>
<p>demo</p>
</div>
$('div p:first-child').css({
'text-decoration': 'underline',
})
2. first-of-type 選擇所有相同的元素名稱的第一個兄弟元素
_注意_：此例中跟first-child不一樣的地方是，first-child只選擇直系的第一個，如果第一個不是，則不選擇，first-of-type選擇的是只要包含有就選擇包含的第一個兄弟元素，此處選擇的是div內包含的p標簽的第一個
<div>
<a href=https://www.cnblogs.com/meijiang/p/"">
demo
demo
demo