JQ的選擇器使用方法整理彙總
一、jQuery選擇器
在CSS3選擇器標淮草案定義的選擇器語法中，jQuery支援相當完整的一套子集，同時還添加了一些非標準但很有用的偽類。注意:本節講述的是 jQuery選擇器。其中有不少選擇器(但不是全部)可以在CSS樣式表中使用。選擇器語法有三層結構。你肯定已經見過選擇器中最簡單的形式。”#te st”選取id屬性為”test”的元素。”blockquote”選取文件中的所有<blockquote>元素，而”div.note” 則選取所有class屬性為”note”的<blockquote>元素。簡單選擇器可以組合成“組合選擇器”，比如 “div.note>p”和“blockquote i”，只要用組合字元做分隔符就行。簡單選擇器和組合選擇器還可以分組成逗號分隔的列表。這種選擇器組是傳遞給$()函式最常見的形式。在解釋組合選擇器 和選擇器組之前，我們必須先了解簡單選擇器的語法。
1、簡單選擇器
簡單選擇器的開頭部分(顯式或隱式地)是標籤型別宣告。例如，如果只對<P>元素感興趣，簡單選擇器可以用“P”開頭。如果選取的元素和標籤名無關，則可以使用萬用字元“*”號來代替。如果選擇器沒有以標籤名或萬用字元開頭，則隱式含有一個萬用字元。
標籤名或萬用字元指定了備選文件元素的一個初始集。在簡單選擇器中，標籤型別宣告之後的部分由零個或多個過濾器組成。過濾器從左到右應用，和書寫順序一致，其中每一個都會縮小選中元素集。下表列舉了jQuery支援的過濾器。
| jQuery選擇過濾器 | |
| 過濾器 | 含義 |
| #id | 匹配id屬性為id的元素。在有效的}ITML文件中，永遠不會出現多個元素擁有相同的ID，因此該過濾器通常作為獨立選擇器來使用 |
| .class | 匹配class屬性(是一串被解析成用空格分隔的單詞列表)含有class單詞的所有元素 |
| [attr] | 匹配擁有attr屬性(和值無關)的所有元素 |
| [attr=val] | 匹配擁有attr屬性且值為val的所有元素 |
| [attr!=val] | 匹配沒有attr屬性、或attr屬性的值不為val的所有元素((jQuery的擴充套件) |
| [attr^=val] | 匹配attr屬性值以val開頭的元素 |
| [attr$=val] | 匹配attr屬性值以val結尾的元素 |
| [attr*=val] | 匹配attr屬性值含有val的元素 |
| [attr~=val] | 當其attr屬性解釋為一個由空格分隔的單詞列表時，匹配其中包含單詞val的元素。因此選擇器“div.note”與“div [class~=note]”相同 |
| [attr|=val] | 匹配attr屬性值以val開頭且其後沒有其他字元，或其他字元是以連字元開頭的元素 |
| :animated | 匹配正在動畫中的元素，該動畫是由jQuery產生的 |
| :button | 匹配<button type=”button”>和<input type=”button”>元素(jQuery的擴充套件) |
| :checkbox | 匹配<input type=”checkbox”>元素( jQuery的擴充套件)，當顯式帶有input標籤字首”input:checkbox”時，該過濾器更高效 |
| :checked | 匹配選中的input元素 |
| :contains(text) | 匹配含有指定text文字的元素(jQuery的擴充套件)。該過濾器中的圓括號確定了文字的範圍—無須新增引號。被過濾的元素的文字是由textContent或innerText屬性來決定的—這是原始文件文字，不帶標籤和註釋 |
| :disabled | 匹配禁用的元素 |
| :empty | 匹配沒有子節點、沒有文字內容的元素 |
| :enabled | 匹配沒有禁用的元素 |
| :eq(n) | 匹配基於文件順序、序號從0開始的選中列表中的第n個元素(jQuery的擴充套件) |
| :even | 匹配列表中偶數序號的元素。由於第一個元素的序號是0，因此實際上選中的是第1個、第3個、第5個等元素(jQuery的擴充套件) |
| :file | 匹配<input type=”file”>元素(jQuery的擴充套件) |
| :first | 匹配列表中的第一個元素。和“:eq(0)”相同(jQuery的擴充套件) |
| :first-child | 匹配的元素是其父節點的第一個子元素。注意:這與“:first”不同 |
| :gt(n) | 匹配基於文件順序、序號從0開始的選中列表中序號大於n的元素( jQuery的擴充套件) |
| :has(sel) | 匹配的元素擁有匹配內嵌選擇器sel的子孫元素 |
| :header | 匹配所有頭元素:<h1>, <h2>, <h3>, <h4>, <h5>或<h6> (jQuery的擴充套件) |
| :hidden | 匹配所有在螢幕上不可見的元素:大體上可以認為這些元素的offsetWidth和offsetHeight為0 |
| :image | 匹配<input type=”image”>元素。注意該過濾器不會匹配<img>元素( jQuery的擴充套件) |
| :input | 匹配使用者輸入元素:<input>, <textarea>, <select>和<button>( jQuery的擴充套件) |
| :last | 匹配選中列表中的最後一個元素(( jQuery的擴充套件) |
| :last-child | 匹配的元素是其父節點的最後一個子元素。注意:這與“:last”不同 |
| :lt(n) | 匹配基於文件順序、序號從0開始的選中列表中序號小於n的元素( jQuery的擴充套件) |
| :not(sel) | 匹配的元素不匹配內嵌選擇器sel |
| :nth(n) | 與“:eq(n)”相同(jQuery的擴充套件) |
| :nth-child(n) | 匹配的元素是其父節點的第n個子元素。。可以是數值、單詞even,單詞odd或計算公式。 使用“:nth-child(even)”來選取那些在其父節點的子元素中排行第2或第4等序號的元素。使用“:nth-child(odd)”來選取那 些在其父節點的子元素中排行第1、第3等序號的元素。 更常見的情況是，n是xn或x n+y這種計算公式，其中x和y是整數，n是字面量n。因此可以用nth-child(3n+1)來選取第1個、第4個、第7個等元素。 注意該過濾器的序號是從1開始的，因此如果一個元素是其父節點的第一個子元素，會認為它是奇數元素，匹配的是3n+1，而不是3n。要和“:even以及“:odd”過濾器區分開來，後者匹配的序號是從0開始的。 |
| :odd | 匹配列表中奇數(從0開始)序號的元素。注意序號為1和3的元素分別是第2個和第4個匹配元素( jQuery的擴充套件) |
| :only-child | 匹配那些是其父節點唯一子節點的元素 |
| :parent | 匹配是父節點的元素，這與“:empty”相反(jQuery的擴充套件) |
| :password | 匹配<input type=”password”>元素(jQuery的擴充套件) |
| :radio | 匹配<input type=”radio”>元素( j Query的擴充套件) |
| :reset | 匹配<input type=”reset”>和<button type=”reset”>元素(jQuery的擴充套件) |
| :selected | 匹配選中的<option>元素。使用“:checked”來選取選中的複選框和單選框(jQuery的擴充套件) |
| :submit | 匹配<input type=”submit”>和<button type=”submit”>元素(jQuery的擴充套件) |
| :text | 匹配<input type=”text”>元素(jQuery的擴充套件) |
| :visible | 匹配所有當前可見的元素:大體上可以認為這些元素的offsetWidth和offsetHeight的值不為0，這和“:hidden”相反 |
注意:表中列舉的部分選擇器在圓括號中接受引數。例如，下面這個選擇器選取的元素在其父節點的子元素中排行第1或第2等，只要它們含有“JavaScript”單詞，就不包含元素。
p:nth-child(3n+1): text (JavaScript):not(:has(a))
通常來說，指定標籤型別字首，可以讓過濾器的執行更高效。例如，不要簡單使用”:radio”來選取單選框按鈕，使用“input:radio”會 更好。ID過濾器是個例外，不新增標籤字首時它會更高效。例如，選擇器“#address”通常比更明確的“form#address”更高效。
2、組合選擇器
使用特殊操作符或“組合符”可以將簡單選擇器組合起來，表達文件樹中元素之間的關係。下表列舉了jQuery支援的組合選擇器。這些組合選擇器與CSS3支援的組合選擇器是一樣的。
下面是組合選擇器的一些例子:
1 2 3 4 "blockquote i"//匹配<blockquote>裡的<i>元素"ol > li"//<1i>元素是<of>的直接子元素"#output+*"//id="output"元素後面的兄弟元素"div.note > h1+p"//緊跟<h1>的<P>元素，在<div class="note">裡面
注意組合選擇器並不限於組合兩個選擇器:組合三個甚至更多選擇器也是允許的。組合選擇器從左到右處理。
3、選擇器組
傳遞給$()函式(或在樣式表中使用)的選擇器就是選擇器組，這是一個逗號分隔的列表，由一個或多個簡單選擇器或組合選擇器構成。選擇器組匹配的元 素只要匹配該選擇器組中的任何一個選擇器就行。對我們來說，一個簡單選擇器也可以認為是一個選擇器組。下面是選擇器組的一些例子:
1 2 3 4 "h1, h2,h3"//匹配<h1>, <h2>和<h3>元素"#p1, #p2, #p3"//匹配id為p1, p2或p3的元素"div.note, p.note"//匹配class="note"的<div>和<P>元素"body>p,div.note>p"//<body>和<div class="note">的<P>子元素
注意:CSS和jQuery選擇器語法允許在簡單選擇器的某些過濾器中使用圓括號，但並不允許使用圓括號來進行更常見的分組。例如，不能把選擇器組或組合選擇器放在圓括號中並且當成簡單選擇器:
相關推薦
JQ的選擇器使用方法整理彙總
一、jQuery選擇器 在CSS3選擇器標淮草案定義的選擇器語法中，jQuery支援相當完整的一套子集，同時還添加了一些非標準但很有用的偽類。注意:本節講述的是 jQuery選擇器。其中有不少選擇器(但不是全部)可以在CSS樣式表中使用。選擇器語法有三層結構。你肯定已經見過選擇器中最簡
JQ 選擇器各種方法 （筆記）
nim textarea input 多個 contains 內容 checked new 使用 $("#a") //id選擇器，根據ID選擇元素，唯一$(".class") //class選擇器。根據元素的class選取元素節點，可能會有多個$("div") //標簽選
jq選擇器
cnblogs nbsp image http .cn log com 技術分享 bsp jq選擇器
關於選擇器的整理
條目 基於 匹配 目標 語法 伸縮性 第一個 鏈接 瀏覽器 選擇器可以采用多種方式，提供一個可伸縮性來匹配文檔中的各種標記，下面整理一下常用的選擇器類型： 1、元素選擇器 元素選擇器是最常見，最易理解的選擇器，元素選擇器選擇匹配選擇器的網頁上的任何HTML元素，不
jQuery鏈式選擇器方法-導航
長袖t恤 功能 log back color menu set alt ack 利用vs新建一個空白web項目， 再用nuget安裝jQuery 1.x最新版，目前是 jQuery 1.12.4 新建一個html頁面 再將jquery.js拖進新建的頁面的頭部
『Scrapy』終端調用&選擇器方法
selector 我們 resp 必須 數據結構 tor ipy lec 結合 Scrapy終端 示例，輸入如下命令後shell會進入Python（或IPython）交互式界面： scrapy shell "http://www.itcast.cn/channel/t
jquery的遍歷選擇器-隨機整理下
highlight nts ext 下一個 over tor evel andself block 我從w3c上截了一張圖，如圖所示： 下面我們來詳細說一說。這些選擇器。 1.add() 方法將元素添加到匹配元素的集合中。例子： .add(selector) $("di
2018-06-26 jq選擇器
spa parent children IV 基本選擇器 ont ren 組合選擇器 ID 1.基本選擇器 * -> 所有標簽 #id ->id選擇器 .class -> 類選擇器 h1,h2 -> 組合選擇器 2.層級選擇器
css選擇器簡單整理
簡單整理關於css選擇器的一些內容， 大體上直觀以符號觀察是： ， —— 選擇器分組 . —— 類選擇器 # —— ID 選擇器 [] —— 屬性選擇器 空格 —— 後代選擇器 > —— 子元素選擇器 + —— 相鄰兄弟選擇器 一、元素選擇器 選擇器通
JQ選擇器與關係
* $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro
轉載:CSS選擇器知識點整理.
1、class 和 id 的使用場景? id：指定標籤的唯一標識。根據提供的唯一id號，快速獲取標籤物件。如：document.getElementById(id)。id屬性的值，在當前的page頁面要是唯一的。 class：指定標籤的類名。CSS操作，把一些特定樣
js 實現對jq選擇器 id class tag *選擇器的模仿封裝
簡單弄了一下，大神勿噴，僅供自己練習 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
獲取document物件除了getElement方法，居然還可以使用css選擇器方法！！！
例子： <!DOCTYPE html> <html><head><meta charset="utf-8"><title>example</title><style type="text/css"
css選擇器與JQ選擇器的效能比對與優化方案
css和JQ的選擇器寫起來似乎很相似，但他們的寫法在效能上有一定的區別。以下就較為常用的選擇器進行比對和優化：CSS選擇器效率高到低：1.id選擇器（#id）2.類選擇器（.class）3.標籤選擇器（div,h1,p）4.後代選擇器（li a）優化方案： 1.優先考慮用class選擇器，雖然id選擇器效率最
前端學習記錄-jq選擇器
學了又忘，遂記之 jq選擇器： .parent() 父元素，由選擇器篩選（可選），如：$("p").parent(".selected") .parents() 祖先元素，，由選擇器篩選（可選），如：$("p").parent(".selected") .chi
CSS選擇器分類整理
讀完《CSS權威指南》，對選擇器有如下整理： selector 選擇器型別： <!-- 實體，即HTML中存在 --> 1.通配選擇器 * 匹配任意 2.類選擇器 .class 3.ID選擇器 #id 4.屬性選擇器 element[rep] (不常用) 4.屬性選擇器 element[re
jquery選擇器 簡單整理
簡單地總結一下常用的元素查詢方法 $("A B") 查詢A元素下面的所有子節點，包括非直接子節點 $("A>B") 查詢A元素下面的直接子節點 $("A+B") 查詢A元素後面的兄弟節點，包括非直接子節點 $("A~B") 查詢A元素後面的
jQuery選擇器大全整理
一、選擇網頁元素 $(document) //選擇整個文件物件 $('#myId') //選擇ID為myId的網頁元素 $('div.myClass') // 選擇class為myClass的div元素 $('input[name=first]') //
JQ選擇器複習
前端的基礎 jQuery 選擇器 jQuery 選擇器的分類，大致分為四種：基本選擇器、層次選擇器、過濾選擇器、表單選擇器 基本選擇器： 一：jQuery選擇器之id選擇器 id選擇器：一個用來查詢的ID，即元素的id屬性，語法是 ：$( "#id" ) ，
jQuery框架使用，jq選擇器，jq操作頁面內容， jq操作類名，jq操作全局屬性,jq獲取盒子信息,jq獲取位置信息，js/jq頁面加載完畢事件，jq事件
log html 事件對象 remove js事件對象 屬性 相對 eight prevent jq選擇器 // 獲取所有的頁面元素jq對象 $(‘css3選擇器語法‘); var $box = $(".box:nth-child(1)"); 獲取的是j