Que sont les sélecteurs de jquery ?

Les sélecteurs de jquery incluent : 1. Les sélecteurs de base (ID, élément, sélecteurs de classe, etc.) ; 2. Les sélecteurs de filtre de base (:first, :last, :even, etc.) ; :has(), :parent, etc.); 4. Sélecteur de filtre de visibilité; 5. Sélecteur de filtre d'attribut, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

Introduction aux sélecteurs jQuery

　　 Les sélecteurs jQuery permettent des opérations sur des groupes d'éléments HTML ou des éléments individuels.

　 Les sélecteurs jQuery « recherchent » (ou sélectionnent) des éléments HTML en fonction de l'identifiant, de la classe, du type, des attributs, des valeurs d'attribut de l'élément, etc. Il est basé sur des sélecteurs CSS existants, en plus de certains sélecteurs personnalisés.

　　Tous les sélecteurs dans jQuery commencent par un signe dollar : $().

1.Sélecteur de base

$("#test")             　　　　   选择id值为test的元素，id值是唯一的所以返回单个元素。
$("div")               　　　　   选择所有的div标签元素，返回div元素数组 
$(".myclass")          　　　　   选择使用myclass类的css的所有元素 
$("*")                 　　　　   选取所有元素。
$("#test,div,.myclass")  　　    选取多个元素。

2.Sélecteur hiérarchique

$("div span") 　　　　　　　　　　  选取<div>里的所有<span>元素
$("div >span")   　　　　　　　　  选取<div>元素下元素名是<span>的子元素
$("#one +div")   　　　　　　　　  选取id为one的元素的下一个<div>同辈元素    　　　　等同于$("#one").next("div")
$("#one~div")    　　　　　　　　  选取id为one的元素的元素后面的所有<div>同辈元素    等同于$("#one").nextAll("div")
$("#one").siblings("div") 　　   获取id为one的元素的所有<div>同辈元素（不管前后）
$("#one").prev("div") 　　 　　 　获取id为one的元素的前面紧邻的同辈<div>元素

所以 获取元素范围大小顺序依次为：
$("#one").siblings("div")>$("#one~div")>$("#one +div")  
或是
$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")

3.Sélecteur de filtrage de base

$("div:first")               　　选取所有<div>元素中第1个<div>元素
$("div:last")                   选取所有<div>元素中最后一个<div>元素
$("input:not(.myClass)")        选取class不是myClass的<input>元素 
$("input:even")                 选取索引是偶数的<input>元素(索引从0开始) 
$("input:odd")                  选取索引是基数的<input>元素(索引从0开始) 
$("input:eq(2)")                选取索引等于2的<input>元素 
$("input:gt(4)")                选取索引大于4的<input>元素
$("input:lt(4)")                选取索引小于4的<input>元素
$(":header")                    过滤掉所有标题元素，例如：h1、h2、h3等
$("div:animated")               选取正在执行动画的<div>元素  
$(":focus")                     选取当前获取焦点的元素

4.Sélecteur de filtrage de contenu

$("div:contains(&#39;Name&#39;)")       选取所有<div>中含有&#39;Name&#39;文本的元素 
　　
$("div:empty")                  选取不包含子元素（包括文本元素）的<div>空元素 

$("div:has(p)")                 选取所有含有<p>元素的<div>元素 

$("div:parent")                 选取拥有子元素的（包括文本元素）<div>元素

5. Sélecteur de filtrage de visibilité

　　　　$("div:hidden")                 选取所有不可见的<div>元素 

　　　　$("div:visible")                选取所有可见的<div>元素

6. Sélecteur de filtre d'attribut

$("div[id]")              　　　　选取所有拥有属性id的元素
$("input[name=&#39;test&#39;]")     　　 选取所有的name属性等于&#39;test&#39;的<input>元素 
 
$("input[name!=&#39;test&#39;]")  　　　　选取所有的name属性不等于&#39;test&#39;的<input>元素 
 
$("input[name^=&#39;news&#39;]")        选取所有的name属性以&#39;news&#39;开头的<input>元素 
$("input[name$=&#39;news&#39;]")        选取所有的name属性以&#39;news&#39;结尾的<input>元素 
$("input[name*=&#39;news&#39;]")        选取所有的name属性包含&#39;news&#39;的<input>元素 
$("div[title|=&#39;en&#39;]")           选取属性title等于&#39;en&#39;或以&#39;en&#39;为前缀(该字符串后跟一个连字符&#39;-&#39;)的<div>元素
$("div[title~=&#39;en&#39;]")           选取属性title用空格分隔的值中包含字符en的<div>元素

$("div[id][title$=&#39;test&#39;]")     选取拥有属性id,并且属性title以&#39;test&#39;结束的<div>元素

7. Sélecteur de filtre d'élément enfant

$("div .one:nth-child(2)")       选取class为&#39;one&#39;的<div>父元素下的第2个子元素

$("div span:first-child")        选取每个<div>中的第1个<span>元素 

$("div span:last-child")         选取每个<div>中的最后一个<span>元素 

$("div button:only-child")       在<div>中选取是唯一子元素的<button>元素

8. Sélecteur de filtre d'attribut d'objet de formulaire

$("#form1 :enabled")             选取id为'form1'的表单内所有可用元素
$("#form2 :disabled")            选取id为'form2'的表单内所有不可用元素 
$("input :checked")              选取所有被选中的<input>元素 　　
$("select option:selected")      选取所有的select 的子元素中被选中的元素

9. Tutoriel vidéo jQuery

,

vidéo de développement web front-end】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!