首頁  >  文章  >  web前端  >  分類解析jQuery選擇器

分類解析jQuery選擇器

高洛峰
高洛峰原創
2016-12-05 15:06:38867瀏覽

基本選擇者:

  #id            根據Id匹配一個元素🎀『

  element          tor1,selector2     並集,傳回兩個選擇器所符合的元素

層次選擇器:

  ancestor descendant   根據祖先配對所有的後代元素

  parent>child  子 +next         將下一個兄弟元素相當於next()方法

  prev~siblings         匹配後面的兄弟元素相當於nextAll()方法     siblings()方法為匹配所有的兄弟元素相當於nextAll()方法     siblings()方法為匹配所有的兄弟元素:簡單地選擇        匹配第一個元素

  :last或last()         匹配最後一個元素

  :not(selector)        匹配非selector能匹配到的元素

  :even            匹配索引值為偶數的元素,索引號從0開始

:odd            匹配索引值為奇數的元素,索引號從0開始

  :eq(index)     :gt(index)          匹配索引號大於給定索引值的元素,索引號從0開始

  :lt(index)           匹配索引號小於給定索引值的元素,索引號從0開始

  :header          匹配所有的標題元素  h1 h2 h3 h4 h5 h6

  :animated          匹配所有正在執行動畫的元素

內容過濾選擇器:

  :contains(text)      匹配包含給定文本的元素

 :empty 匹配包含給定文本的元素

『元素

  :has(selector)        匹配後代中含有selector能符合上元素的元素

  :parent          匹配含有子元素或文本的元素🎀hden    符合不可見元素,或type="hidden"的元素含有css樣式:display:"none";的元素,無論CSS是內聯,導入,連結式

  :visible           取得所有的可見元素『     匹配含有給定屬性的元素

[attribute=value]       符合含有屬性=value的元素

  [attribute!=value]   『  符合含有屬性但符合!是以value開始的元素

  [attribute $=value]      匹配屬性值是以value結束的元素

  [attribute*=value]      🀋選擇器的交集

子元素過濾選擇器:

  :nth-child(eq|even|odd|index)  取得所有父元素特定位置的子元素

🎀                  子元素

  :last            取得所有父元素下最後一個子元素

  :only-child 〜 〜〜〜〜 元素。器:

  :enabled            取得表單中所有可用的元素

  : disabled          取得表單中所有不可用的元素

  :checked      〜  〜〜         取得表單中所有被選取的option的元素

表單選擇者:

  :input                   :text             取得所有的單行文字方塊>『『 〜 〜 〜 〜 〜 〜 〜 〜  〜  〜 、  、 、 、 、、、》 、》》》   、》、、、、、、》 、、、]取得所有的密碼框元素     

  : radio           取得所有的單選按鈕

  :checkbox     『〔 〜  〜type 的選框

  :submit          取得所有的投稿按鈕

  :image     皮 

  :reset          取得所有重置按鈕

  :button            獲取所有的按鈕

  :file            獲取所有的文件上傳框

1、基本選擇器

  (1 )、#id  根據Id匹配一個元素

$("#div1").css("background-color","red");  //匹配id为"div1"的元素
<div id="div1">我是一个DIV</div> //会选中该div元素

   

  (2)、element  根據給定的元素名稱匹配元素

$("p").css("background-color","red");    //匹配页面所有的p元素
<p>我是一个P</p>

)  

   

  (4)、*      配對所有的元素

    $("*").css("background-color","re​​d");🀀㟀〜 〕〜號與分隔號、㟀傳回每個選擇器所符合的元素

    $(".div1,#span1").css("background-color","re​​d");

2、層次選擇器

 (1)、Pstors 根據祖先元素匹配所有的後代元素,返回的是匹配到的後代元素,並用空格分開。

$(".important").removeClass();    //匹配所有class="important"元素
<p class="important">我是一个p元素</p>

   

     (2)、parent > child  依照父元素配對所有的子元素傳回所有的子元素以大於號">"分隔

rrrefee

  匹配緊接在prev元素後的相鄰的下一個元素   以加號"+"分隔。

    相當於.next()方法

$("#div1 span").css("color","red");
 
    <div id="div1">
      <span>我是span1</span>     ***会被选中,是#div1的后代span
      <div>
        <span>我是span3</span>   ***会被选中,也是#div1的后代span
      </div>
    </div>
    <span>我是span2</span>       ***不会被选中,不是#div1的后代

   

      (4)、prev ~ sibings 『   相當於nextAll()方法

$("#div1 > span").css("color","red");
    <div id="div1">
      <span>我是span1</span>     ***会被选中,是#div1的子元素span
      <div>
        <span>我是span3</span>   ***不会被选中,是#div1的后代元素,但不是直接子元素
      </div>
    </div>
    <span>我是span2</span>       ***不会被选中,不是#div1的子元素

   

 (5)、選取所有的兄弟元素siblings() 方法

$(".p1 + p").css("color","red");    //此行代码相当于$(".p1").next().css("color","red");
   <div>
     <p>我是第一个P</p>      ***不会被选中,是class为p1的上一个了
     <p class="p1">我是第二个P</p>  ***prev本身并不会被选中
     <p>我是第三个P</p>      ***会被选中,是class为p1的下一个相邻元素
     <p>我是第四个P</p>      ***不会被选中,不是class为p1的下一个,是下二个了
   </div>

   

🀜3、簡單過濾或選擇器選中符合條件的第一個元素

$(".p1 + p").css("color","red");    //此行代码相当于$(".p1").nextAll("p").css("color","red");
  <div>
    <p>我是第一个P</p>      ***不会被选中,是class为p1前面的元素
    <p class="p1">我是第二个P</p>  ***prev本身并不会被选中
    <p>我是第三个P</p>      ***会被选中,是class为p1后面的P兄弟元素
    <p>我是第四个P</p>      ***会被选中,也是class为p1后面的P兄弟元素
  </div>

   

(2)、last()或:last    符合條件的最後一個元素

$(".p1").sibings("p").css("color","red");
  <div>
    <p>我是第一个P</p>      ***会被选中,是class为p1的P兄弟元素
    <p class="p1">我是第二个P</p>  ***prev本身并不会被选中
    <p>我是第三个P</p>      ***会被选中,是class为p1的P兄弟元素
    <p>我是第四个P</p>      ***会被选中,也是class为p1的P兄弟元素
  </div>

 『被selector選取的元素

$("#div1 > p:first").css("color","red")  //此行代码相当于  $("#div1 > p").first().css("color","red");
   <div id="div1">
     <p>我是第一个P</p>   ***会被选中,是id为#div1下的第一个P元素
     <p>我是第二个P</p>   ***不会被选中,是第二个P元素了
     <p>我是第三个P</p>   ***不会被选中,是第三个P元素了
   </div>

抱歉5)、odd        取得指定索引值為奇數的元素(1、3、5、7、9......),注意索引號碼是從1開始的

$("#div1 > p:last").css("color","red");    //此行代码相当于 $("#div1 > p").last().css("color","red");
   <div id="div1">
     <p>我是第一个P</p>   ***不会被选中,是第一个
     <p>我是第二个P</p>   ***不会被选中,是第二个
     <p>我是第三个P</p>   ***会被选中,id为#div1下的最后一个P元素
   </div>

   

(index)      選取指定索引值的元素,索引值從0開始

$("#div1 > p:not(&#39;.p1&#39;)").css("color","red");
  <div id="div1">
    <p>我是第一个P</p>        ***会被选中
    <p class="p1">我是第二个P</p>  ***不会被选中,因为符合了:not里的条件 class="p1"
    <p>我是第三个P</p>        ***会被选中
  </div>

   

 (7)、gt(index)   〦〟 

 (8)、lt(index)      取得所有索引值小於index的元素,索引號從0開始

$("#div1 > p:even").css("color","red");
   <div id="div1">
     <p>我是第一个P</p>  ***会被选中,索引号0
     <p>我是第二个P</p>  ***不会被选中,索引号1
     <p>我是第三个P</p>  ***会被选中,索引号2
     <p>我是第四个P</p>  ***不会被选中,索引号3
     <p>我是第五个P</p>  ***会被选中,索引号4
   </div>

 4、h5 、h6

$("#div1 > p:odd").css("color","red");
   <div id="div1">
     <p>我是第一个P</p>  ***不会被选中,索引号0
     <p>我是第二个P</p>  ***会被选中,索引号1
     <p>我是第三个P</p>  ***不会被选中,索引号2
     <p>我是第四个P</p>  ***会被选中,索引号3
     <p>我是第五个P</p>  ***不会被选中,索引号4
   </div>

   

(10)、animated    正在執行動畫效果的元素

4、內容過濾選擇器🠎 ee

   

  (2)、:empty  獲取不包含子元素或文本的空元素

$("#div1 > p:eq(1)").css("color","red");
   <div id="div1">
     <p>我是第一个P</p>  ***不会被选中,索引号为0
     <p>我是第二个P</p>  ***不会被选中,索引号为1
     <p>我是第三个P</p>  ***不会被选中,索引号为2
     <p>我是第四个P</p>  ***不会被选中,索引号为3
   </div>

   

 (3)、:has(元素,只要是後代含有都算)

$("#div1 > p:gt(1)").css("color","red");
   <div id="div1">
     <p>我是第一个P</p>  ***不会被选中,索引号为0
     <p>我是第二个P</p>  ***不会被选中,索引号为1
     <p>我是第三个P</p>  ***会被选中,索引号为2大于1了
     <p>我是第四个P</p>  ***会被选中,索引号为3大于1了
   </div>

   

(4)、:parent  含有子元素或文字元素的元素

$("#div1 > p:lt(1)").css("color","red");
  <div id="div1">
    <p>我是第一个P</p>  ***会被选中,索引号为0,小于1
    <p>我是第二个P</p>  ***不会被选中,索引号为1,不小于1
    <p>我是第三个P</p>  ***不会被选中,索引号为2大于1了
    <p>我是第四个P</p>  ***不会被选中,索引号为3大于1了
  </div>

  . :hidden  選取所有不可見元素

$("#div1 > :header").css("color","red");
   <div id="div1">
     <p>我是一个P</p>      ***不会被选中,不是标题类型元素
     <span>我是一个span</span> ***不会被选中,不是标题类型元素
     <h1>我是一个h1</h1>    ***会被选中,h1是标题类型元素
     <h6>我是一个h6</h6>    ***会被选中,h6是标题类型元素
   </div>

   

       取得包含給定屬性的元素

$("p:contains(&#39;三&#39;)").css("background-color","red");
 <div>
  <p>我是第一个P</p>  ***不会被选中
  <p>我是第二个P</p>  ***不会被选中
  <p>我是第三个P</p>  ***会被选中,文本里包含了"三"
 </div>

   

   (2)、[attribute=value]  取得屬性值等於value的元素

$(:empty).text("我是空元素");
    <div>
      <div><span></span></div>  ***div不会被选中,因为有<span></span>子元素。<span></span>会被选中,因为没有子元素也没有文本元素
      <p></p>            ***会被选中,没有子元素,也没有文本元素
      <span>我是一个span</span>  ***不会被选中,有文本元素
    </div>

 『值不等於value的元素

$("div:has(&#39;span&#39;)").css("background-color","red");
    <div>          ***此div会被选中,因为他的有孙子span
      我是最外层div    
      <div><p>我是一个P</p></div>    ***此div不会被选中,因为不含有后代span
      <div><span>我是一个span</span></div>  ***此div会被选中,含有后代span
    </div>

   

   (4)、[attribute^=value]  取得屬性值以value開始的元素

$(":parent").text("不含子元素或文本元素");
   <div>我是一个div</div>  ***不会被选中,因为含有文本元素
   <div><span>我是一个span</span></div>  ***不会被选中,含有子元素。
   <div></div>        ***会被选中,不含子元素也不含有文本元素

   

   

  (6)、[attribute*=value]  获取属性值包含value值元素

$("div[class*=div]").css("font-size","30px");
<div class="div1">我是div1</div>  ***会被选中,属性值包含div
<div class="1div">我是1div</div>  ***会被选中,属性值包含div
<div class="1div1">我是1div1</div> ***会被选中,属性值包含div
<div class="abc">我是abc</div>   ***会被选中,属性值包含div

   

  (7)、[selector][selector][selector]  获取属性交集元素

$("div:[class][title=title1]").css("background-color","red");
<div class="div1" title="title1">我是div1,title1</div>  ***会被选中,有class属性且title属性等于title1
<div class="div1" title=title2>我是div1,title2</div>   ***不会被选中,虽然有class属性,但是title属性不等于title2
<div class="div3">我是div3</div>           ***不会被选中,没有title属性

   

7、子元素过滤选择器

   (1):nth-child(eq|even|odd|index)    获取每个父元素下的特定位置元素,索引号从1开始

$("div>p:nth-child(1)").css("background-color","red");  //选中每一个父元素下的div下的第一个直接P元素
<div>
  <p>我是第一个P</p>   *** 会被选中,是div下的第一个子P元素
  <p>我是第二个P</p>   *** 不会被选中,是第二个了
</div>
<div>
  <P>我是第三个P</P>   *** 会被选中,是div下的第一个子P元素
  <P>我是第四个P</P>   *** 不会被选中,是第二个了
</div>

   

(2):first-child    选中每个父元素下的第一个

$("p:first-child").css("background-color","red");    //选中每一个父元素下的第一个P元素
<div>
  <p>我是第一个P</p>   *** 会被选中,是div下的第一个子P元素
  <p>我是第二个P</p>   *** 不会被选中,是第二个了
</div>
<ul>
  <li>
    <P>我是第三个P</P>   *** 会被选中,是div下的第一个子P元素
    <P>我是第四个P</P>   *** 不会被选中,是第二个了
  </li>
</ul>

   

(3)、:last-child  选中每一个父元素下的最后一个元素

$("p:last-child").css("background-color","red");    //选中每一个父元素下的第一个P元素
<div>
  <p>我是第一个P</p>   *** 不会被选中,不是某父元素的最后一个子P元素
  <p>我是第二个P</p>   *** 会被选中,是div元素下的最后一个子P元素
</div>
<ul>
  <li>
    <P>我是第三个P</P>   *** 不会被选中,不是某父元素下的最后一个子P元素
    <P>我是第四个P</P>   *** 会被选中,是div元素下的最后一个P元素
  </li>
</ul>

   

(4)、:only-child  获取每个父元素下唯一仅有的一个子元素

$("p:only-child").css("background-color","red");
  <div>
    <p>我是第一个P</p>  ***不会被选中,不是某父元素下的唯一一个P元素
    <p>我是第二个P</p>  ***不会被选中,不是某父元素下的唯一一个P元素
  </div>
  <div>
    <span>我是一个span</span>  ***不会被选中,不是某父元素下的唯一一个P元素
    <p>我是第三个P</p>       ***不会被选中,不是某父元素下的唯一一个span元素
  </div>
  <div>
    <p>我是一个P</p>    ***会被选中,是div下的唯一一个P元素
  </div>

   

8、表单对象属性过滤选择器

  (1)、:enabled  获取表单中所有属性为可用的元素

$("input:enabled").val("jQuery表单对象属性过滤选择器");
  <div>
    <input type="text" value="我是一个可用的input" />    ***会被选中,是一个可用的表单元素
    <input type="text" value="我是一个不可用的input" disabled="disabled" />  ***不会被选中,是不可用的表单元素
  </div>

   

(2)、:disabled  获取表单中属性不可用的元素

$("input:enabled").val("jQuery表单对象属性过滤选择器");
<div>
 <input type="text" value="我是一个可用的input" />    ***不会被选中,是一个可用的表单元素
 <input type="text" value="我是一个不可用的input" disabled="disabled" />  ***会被选中,是不可用的表单元素 //注意,jQuery能够操作不可用   的表单元素
</div>

   

(3)、:checked    获取表单中被选中的元素  从属性能够知道用户选中了哪个

$("input:checked").val("jQuery");
  <div>
    <input type="checkbox" checked="checked" value="1">选中
    <input type="checkbox" value="0">未选中
  </div>

   

(4)、:selected    获取表单中被选中的元素  此属性能够知道用户选择了哪个

alert($("input:selected").text(""));  //获取所有被选中的option元素
  <div>
    <selected>
      <option value="0" selected="selected">option1</option>  ***会被选中
      <option value="1">option2</option>          ***不会被选中,因为本option不是选中的。
    </selected>
  </div>

   

9、表单选择器

(1)、:input  获取所有的input、textarea、select

$(":input").val("jQuery");
  <div>
    <textarea>我是一个兵</textarea>  ***会被选中
    <input text="button" value="" />  ***会被选中
    <p>我是一个P</p>          ***不会被选中
  </div>

   

(2)、:text  获取所有的单行文本框,也就是ec1428ba487b0fd5d7fe857f9d4b2faa元素

$(":text").val("jQuery");
  <div>
    <input type="text" value="我是一个input" />  ***会被选中,是单行文本框
    <input type="button" value="确定" />      ***不会被选中,不是单行文本框
    <textarea>我是一个textarea</textarea>     ***不会被选中,不是单行文本框
  </div>

   

(3)、:password  获取所有的密码框  也就是c1316d16b1c962d004723ea50186d536元素

$(":password").hide(3000);
<div>
  <input type="password" />    ***会被选中,是密码框
  <input type="text" value="我是一个文本框" />  ***不会被选中,是文本框
</div>

   

(4)、:radio  获取所有的单选按钮

$(":radio").hide(3000);
<div>
  <input type="radio" />我是一个radio  ***单选按钮会被选中,但是后面的文字不会
  <input type="text" />我是一个文本框  ***不会被选中
</div>

   

(5)、:checkbox  获取所有的复选框

$(":checkbox").hide(3000);
<div>
  <input type="checkbox" />我是一个checkbox  ***复选框会被选中,文本不会
  <input type="text" />我是一个文本框       ***不会被选中,不是复选框
</div>

   

(6)、:submit    获取所有的提交按钮

$(":submit").hide(3000);
<div>
  <input type="submit" value="提交">      ***会被选中,是提交按钮
  <input type="text" value="我是一个文本框">   ***不会被选中,不是提交按钮
</div>

   

(7)、:image    获取所有的图像域

$(":image").attr("title","我是一个图片按钮");
<div>
  <input type="image" src="http://www.baidu.com/img/baidu_sylogo1.gif" />  ***会被选中
  <input type="text" value="我是一个文本框" />      ***不会被选中,不是图片按钮
</div>

   

(8)、:reset    获取所有重置按钮

$(":reset").hide(3000);
<div>
  <input type="reset" value="重置">      ***会被选中,是重置按钮
  <input type="text" value="我是一个文本框">  ***不会被选中,不是重置按钮
</div>

   

(9)、:button    获取所有的按钮

$(":button").hide(3000);
<div>
  <input type="button" value="确认" />      ***会被选中,是按钮元素
  <input type="text" value="我是一个文本框" />   ***不会被选中,不是按钮元素
</div>

   

(10)、:file    获取所有的文件域

$(":file").hide(3000);
<div>
  <input type="file" title="file" />
  <input type="text" value="我是一个文本框" />
</div>

   


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn