《锋利的jQuery》笔记 第2章 jQuery选择器
生活随笔
收集整理的這篇文章主要介紹了
《锋利的jQuery》笔记 第2章 jQuery选择器
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
常見(jiàn)用法
$(’.demo’)： 按類(lèi)搜索
$(’#demo’)：按ID搜索
優(yōu)勢(shì)
基本選擇器
| #id | 根據(jù)id匹配一個(gè)元素 | $(’#id) 選擇ID為id的單個(gè)元素 |
| .class | 根據(jù)給定的類(lèi)名匹配元素 | $(’.text’) 選擇所有class為text的所有元素 |
| element | 根據(jù)給定的元素名匹配元素 | $(‘p’) 選擇所有的<p>元素 |
| * | 匹配所有元素 | $(’*’) 選擇所有的元素 |
| selector1, selector2, …selectorN | 將每一個(gè)選擇器匹配到的元素合并后一起返回 | $(‘div, span, p.myClass’) 選擇所有<div>,<span>,以及class為myClass的p元素 |
層次選擇器
| $(‘a(chǎn)ncestor descendant’) | 選擇ancestor元素里的所有descendant(后代)元素 | $(‘div span’)選擇<div>里的所有的<span>元素 |
| $(‘parent > child’) | 選擇parent元素下的直接子元素child | $(‘div>span’)選擇<div>元素下的直接<span>子元素 |
| $(‘prev+next’) | 選擇緊接在prev元素后的next元素 | $(’.one+div’)選擇class為one的后面的兄弟元素<div> |
| $(‘prev ~ siblings’) | 選擇prev元素之后的所有siblings元素 | $(’#two~div’)選擇id為two的元素后面的所有<div>同輩元素 |
選擇器與 jQuery中的等價(jià)方法
在jQuery中的源代碼文件src\traversing.js中，可以看到如下幾個(gè)方法：
jQuery.each( {parent: function( elem ) {var parent = elem.parentNode;return parent && parent.nodeType !== 11 ? parent : null;},....上面這些方法就是用來(lái)遍歷元素的，通常與層次選擇器有關(guān)聯(lián)，我們先來(lái)分析一下這些常用的方法是怎么使用的。
先來(lái)一個(gè)demo文件吧。
parent()方法
// 找到class是mini的所有元素的父元素 $('.mini').parent();一共有4個(gè)父元素，都是div元素：
我們看一下parent()是怎么執(zhí)行的：
在core.js中可以看到j(luò)Query.map方法的實(shí)現(xiàn)：
// arg is for internal usage onlymap: function( elems, callback, arg ) {var length, value,i = 0,ret = [];// Go through the array, translating each of the items to their new valuesif ( isArrayLike( elems ) ) {length = elems.length;for ( ; i < length; i++ ) {// 就是針對(duì)當(dāng)前jQuery實(shí)例$('.mini')中的每個(gè)網(wǎng)頁(yè)元素遍歷調(diào)用callback方法，其實(shí)也就是// parent()方法，并且把結(jié)果存儲(chǔ)起來(lái)value = callback( elems[ i ], i, arg );看一下parent方法：
parent: function( elem ) {//很簡(jiǎn)單，直接調(diào)用元素的parentNode屬性，如果類(lèi)型不是DocumentFragment,就直接返回，否則返回nullvar parent = elem.parentNode;return parent && parent.nodeType !== 11 ? parent : null; },所以最后的操作結(jié)果就是4個(gè)div元素。
我們還可以加個(gè)過(guò)濾，比如只取parent中id為two的元素：
$('.mini').parent('#two');結(jié)果只有一個(gè)：
這時(shí)候看一下parent()方法怎么執(zhí)行的：
parents()方法
這個(gè)方法是查找某個(gè)元素的所有祖先元素：
$('.mini').parents();看一下結(jié)果，多了2個(gè)元素，分別是body, html元素：
parents實(shí)現(xiàn)如下：
你也可以傳入?yún)?shù)，對(duì)結(jié)果進(jìn)行再過(guò)濾。
上面兩個(gè)方法只是拋磚引玉，這樣你了解了上面方法的使用，其他方法的使用也就會(huì)了。
有些層次選擇器可以找到對(duì)應(yīng)的方法調(diào)用：
| $(’.one + div’) | $(’.one’).next(‘div’) |
| $(’#prev~div’) | $(’#prev’).nextAll(‘div’) |
選擇過(guò)濾器
基本過(guò)濾選擇器
| :first | 選取第1個(gè)元素 | 單個(gè)元素 | $(‘div:first’)選取所有<div>元素中的第1個(gè)<div>元素 |
| :last | 選擇最后1個(gè)元素 | 單個(gè)元素 | $(‘div:last’)選取所有<div>元素中的最后1個(gè)<div>元素 |
| :not(selector) | 去除所有與給定選擇器匹配的元素 | 集合元素 | $(‘input:not(.myClass)’)選擇class不是myClass的所有<input>元素 |
| :even | 選取索引是偶數(shù)的所有元素，索引從0開(kāi)始 | 集合元素 | $(‘input:even’)選取索引是偶數(shù)的<input>元素 |
| :odd | 選取索引是奇數(shù)的所有元素，索引從0開(kāi)始 | 集合元素 | $(‘input:odd’)選取索引是奇數(shù)的<input>元素 |
| :eq(index) | 選取索引等于index的元素(index從0開(kāi)始) | 單個(gè)元素 | $(‘input:eq(1)’)選取索引等于1的<input>元素 |
| :gt(index) | 選取索引大于index的元素(index從0開(kāi)始) | 集合元素 | $(‘input:gt(1)’)選取索引大于1的<input>元素(注：大于1，而不包括1) |
| :lt(index) | 選取索引小于index的元素(index從0開(kāi)始) | 集合元素 | $(input:lt(1)’)選取索引小于1的<input>元素(注：小于1，而不包括1) |
| :header | 選取所有的標(biāo)題元素，如h1, h2, h3等等 | 集合元素 | $(’:header’)選擇網(wǎng)頁(yè)中所有的<h1>, <h2>,<h3>… |
| :animated | 選取當(dāng)前正在執(zhí)行動(dòng)畫(huà)的元素 | 集合元素 | $(‘div:animated’)選取正在執(zhí)行動(dòng)畫(huà)的<div>元素 |
| :focus | 選取當(dāng)前獲取焦點(diǎn)的元素 | 集合元素 | $(’:focus’)選取當(dāng)前獲取焦點(diǎn)的元素 |
內(nèi)容過(guò)濾選擇器
| :contains(text) | 選取含有文本內(nèi)容為"text"的元素 | 集合元素 | $(‘div:contains(‘我’)’)選取含有文本"我"的<div>元素 |
| :empty | 選取不包含子元素或者文本的空元素 | 集合元素 | $(‘div:empty’)選取不包含子元素(包括文本元素)的<div>空元素 |
| :has(selector) | 選取含有選擇器匹配的元素的元素 | 集合元素 | $(‘div:has§’)選取含有<p>元素的<div>元素 |
| :parent | 選取含有子元素或者文本的元素 | 集合元素 | $(‘div:parent’)選取擁有子元素(包括文本元素)的<div>元素 |
可見(jiàn)性過(guò)濾選擇器
| :hidden | 選取所有不可見(jiàn)的元素 | 集合元素 | $(’:hidden’)選擇所有不可見(jiàn)的元素。包括<input type=“hidden”/>，<div style=“display:none;”>和<div style=“visibility:hidden”>等元素。如果只想選取<input>元素，可以使用$(‘input:hidden’) |
| :visible | 選取所有可見(jiàn)的元素 | 集合元素 | $(‘div:visible’)選取所有可見(jiàn)的<div>元素 |
屬性過(guò)濾選擇器
| [attribute] | 選取擁有此屬性的元素 | 集合元素 | $(‘div[id]’)選取擁有屬性id的<div>元素 |
| [attribute=value] | 選取屬性的值為value的元素 | 集合元素 | $(‘div[title=test]’)選取屬性title為’test’的’<div>元素 |
| [attribute!=value] | 選取屬性的值不等于value的元素 | 集合元素 | $(‘div[title!=test]’)選取屬性title不等于’test’的<div>元素（注意：沒(méi)有屬性title的<div>元素也會(huì)被選取） |
| [attribute^=value] | 選取屬性的值以value開(kāi)頭的元素 | 集合元素 | $("div[title^=test]’)選取屬性title以’test’開(kāi)頭的<div>元素 |
| [attribute$=value] | 選取屬性的值以value結(jié)尾的元素 | 集合元素 | $(‘div[title$=test]’)選取屬性title以’test’結(jié)尾的<div>元素 |
| [attribute*=value] | 選取屬性的值含有value的元素 | 集合元素 | $(‘div[title*=test]’)選取屬性title含有’test’的<div>元素 |
| [attribute|=value] | 選取屬性等于給定字符串或以該字符串為前綴(該字符串后跟一個(gè)連字符"-")的元素 | 集合元素 | $(‘div[title|=en]’)選取屬性title等于en或以en為前綴(該字符串后跟一個(gè)連字符"-")的元素 |
| [attribute~=value] | 選取屬性用空格分隔的值中包含一個(gè)給定值的元素 | 集合元素 | $(‘div[title~=uk]’)選取屬性title用空格分隔的值中包含字符uk的元素 |
| [attribute][attribute2][attributeN] | 用屬性選擇器合并成一個(gè)復(fù)合屬性選擇器，滿足多個(gè)條件。每選擇一次，縮小一次范圍 | 集合元素 | $(‘div[id][title$=test]’)選取擁有屬性id，并且title屬性值以’test’結(jié)尾的<div>元素 |
子元素過(guò)濾選擇器
| :nth-child(index/even/odd/equation) | 選取每個(gè)父元素下的第index個(gè)子元素或者奇偶元素(index從1算起) | 集合元素 | :eq(index)只匹配一個(gè)元素，而:nth-child將為每一個(gè)父元素匹配子元素，并且 :nth-child(index)的index是從1開(kāi)始的，而:eq(index)是從0算起的 |
| :first-child | 選取每個(gè)父元素的第1個(gè)子元素 | 集合元素 | :first只返回單個(gè)元素，而:first-child選擇符將為每個(gè)父元素匹配第1個(gè)子元素。例如$(‘ul li:first-child’)選擇第個(gè)<ul>中第一個(gè)<li>元素 |
| :last-child | 選取每個(gè)父元素的最后一個(gè)子元素 | 集合元素 | 同樣，:last只返回單個(gè)元素，而:last-child選擇符將為每個(gè)父元素匹配最后一個(gè)子元素。例如$(‘ul li:last-child’)選擇每個(gè)<ul>中最后一個(gè)<li>元素 |
| :only-child | 如果某個(gè)元素是它父元素中惟一的子元素，那么將會(huì)被匹配。如果父元素中含有其他元素，則不會(huì)被匹配 | 集合元素 | $(‘ul li:only-child’)，在<ul>中選擇是唯一子元素的<li>元素 |
表單對(duì)象屬性過(guò)濾選擇器
| :enabled | 選取所有可用元素 | 集合元素 | $(’#form1 :enabled’)選擇id為‘form1‘ 表單內(nèi)的所有可用元素 |
| :disabled | 選取所有不可用元素 | 集合元素 | $(’#form2 :disabled’)選取id為’form2’的表單內(nèi)的所有不可用元素 |
| :checked | 選取所有被選中的元素(單選框，復(fù)選框) | 集合元素 | $(‘input:checked’)選擇所有被選中的<input>元素 |
| :selected | 選擇所有被選中的選項(xiàng)元素(下拉列表) | 集合元素 | $(‘select option:selected’)選取所有被選中的選項(xiàng)元素 |
表單選擇器
| :input | 選取所有的<input>、<textarea>、<select>和<button>元素 | 集合元素 | $(’:input’)選擇所有的<input>、<textarea>、<select>和<button>元素 |
| :text | 選擇所有的單行文本框 | 集合元素 | $(’:text’)選取所有的單行文本框 |
| :password | 選取所有的密碼框 | 集合元素 | $(’:password’)選取所有的密碼框 |
| :radio | 選取所有的單選框 | 集合元素 | $(’:radio’)選取所有的單選框 |
| :checkbox | 選取所有的多選框 | 集合元素 | $(’:checkbox’)選取所有的復(fù)選框 |
| :submit | 選取所有的提交按鈕 | 集合元素 | $(’:submit’)選取所有的提交按鈕 |
| :image | 選取所有的圖像按鈕 | 集合元素 | $(’:image’)選取所有的圖像按鈕 |
| :reset | 選取所有的重置按鈕 | 集合元素 | $(’:reset’)選取所有的重置按鈕 |
| :button | 選取所有的按鈕 | 集合元素 | $(’:button’)選取所有的按鈕 |
| :file | 選取所有的上傳域 | 集合元素 | $(’:file’)選取所有的上傳域 |
| :hidden | 選取所有不可見(jiàn)元素 | 集合元素 | $(’:hidden’)選取所有不可見(jiàn)元素 |
總結(jié)
以上是生活随笔為你收集整理的《锋利的jQuery》笔记 第2章 jQuery选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： pipenv相关指令
- 下一篇： Flask爱家租房--celery（总结