免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
jQuery之選擇器

基本選擇器:

  #id            根據Id匹配一個元素

  .class            根據給定的類名匹配一個元素

  element           根據元素名匹配一個元素

  *             匹配所有元素

  selecttor1,selector2     并集,返回兩個選擇器匹配到的元素

層次選擇器:

  ancestor descendant   根據祖先匹配所有的后代元素

  parent>child        根據父元素匹配所有的子元素,直接后代

  prev+next         匹配下一個兄弟元素 相當于next()方法

  prev~siblings         匹配后面的兄弟元素 相當于nextAll()方法     siblings()方法為匹配所有的兄弟元素

簡單過濾選擇器:

  :first或first()        匹配第一個元素

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

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

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

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

  :eq(index)         匹配指定索引號的元素,索引號從0開始

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

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

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

  :animated          匹配所有正在執(zhí)行動畫的元素

內容過濾選擇器:

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

  :empty          匹配所有不包含子元素或者文本的空元素

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

  :parent          匹配含有子元素或者文本的元素

可見性過濾選擇器:

  :hidden          匹配不可見元素,或者type="hidden"的元素 含有css樣式:display:"none";的元素,無論CSS是內聯(lián),導入,鏈接式

  :visible           獲取所有的可見元素

屬性過濾選擇器:

  [attribute]         匹配含有給定屬性的元素

  [attribute=value]       匹配含有屬性=value的元素

  [attribute!=value]      匹配含有屬性但!=value的元素

  [attribute^=value]     匹配屬性值是以value開始的元素

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

  [attribute*=value]      匹配屬性值包含某些值的元素,部分前后,中間有也算

  [selector][selector]     匹配屬性選擇器的交集

子元素過濾選擇器:

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

  :first            獲取所有父元素下的第一個子元素

  :last            獲取所有父元素下最后一個子元素

  :only-child         獲取所有父元素下唯一的一個元素

表單對象屬性過濾選擇器:

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

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

  :checked         獲取表單張所有被選中的元素

  :selected           獲取表單中所有被選中的option的元素

表單選擇器:

  :input           獲取所有的表單元素<input開頭的,還有textarea select

  :text             獲取所有的單行文本框  <input type="text" />

  :password        獲取所有的密碼框元素      <input type="password" />

  :radio           獲取所有的單選按鈕   <input type="radio" />

  :checkbox         獲取所有的復選框    <input type="checkbox">

  :submit          獲取所有的提交按鈕   <input type="submit" />

  :image          獲取所有的圖像按鈕   <input type="image" />

  :reset          獲取所有的重置按鈕    <input type="reset" />

  :button            獲取所有的按鈕     <input type="button">

  :file            獲取所有的文件上傳框  <input type="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>

  (3)、class  根據class屬性匹配元素

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

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

    $("*").css("background-color","red");

  (5)、selector1,selector2  選擇器之間用逗號分隔  返回每一個選擇器匹配到的元素

    $(".div1,#span1").css("background-color","red");

2、層次選擇器

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

    $("#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的后代

  (2)、parent > child  根據父元素匹配所有的子元素  返回所有的子元素  用大于號">"分隔

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

  (3)、prev + next  匹配緊接在prev元素后的相鄰的下一個元素   用加號"+"分隔。

    相當于.next()方法

    $(".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>

  (4)、prev ~ sibings    匹配prev后面的的所有兄弟元素 用波浪線"~"分隔開

    相當于 nextAll()方法

    $(".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>

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

    $(".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>

3、簡單過濾選擇器

  (1)、first()或:first    選中符合條件的第一個元素

    $("#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>

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

    $("#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>

  (3)、:not(selector)    符合條件但不能被selector選中的元素

    $("#div1 > p:not('.p1')").css("color","red");    <div id="div1">      <p>我是第一個P</p>        ***會被選中      <p class="p1">我是第二個P</p>  ***不會被選中,因為符合了:not里的條件 class="p1"      <p>我是第三個P</p>        ***會被選中    </div>

   (4)、:even      獲取指定索引值為偶數(shù)的元素(0、2、4、6、8……),注意索引號是從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>

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

    $("#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>

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

    $("#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>

  (7)、gt(index)      獲取所有索引值大于index的元素,索引號從0開始

    $("#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>

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

    $("#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>

  (9)、:header       索取所有標題類型元素h1、h2、h3、h4、h5、h6

    $("#div1 > :header").css("color","red");    <div id="div1">      <p>我是一個P</p>      ***不會被選中,不是標題類型元素      <span>我是一個span</span> ***不會被選中,不是標題類型元素      <h1>我是一個h1</h1>    ***會被選中,h1是標題類型元素      <h6>我是一個h6</h6>    ***會被選中,h6是標題類型元素    </div>

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

4、內容過濾選擇器

   (1)、:contains(text)    獲取包含給定文本的元素

    $("p:contains('三')").css("background-color","red");     <div>      <p>我是第一個P</p>  ***不會被選中      <p>我是第二個P</p>  ***不會被選中      <p>我是第三個P</p>  ***會被選中,文本里包含了"三"     </div>

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

      $(:empty).text("我是空元素");      <div>        <div><span></span></div>  ***div不會被選中,因為有<span></span>子元素。<span></span>會被選中,因為沒有子元素也沒有文本元素        <p></p>            ***會被選中,沒有子元素,也沒有文本元素        <span>我是一個span</span>  ***不會被選中,有文本元素      </div>

   (3)、:has(selector)   選中含有selector所匹配元素的元素,(注意不限于直接子元素,只要是后代含有都算)

      $("div:has('span')").css("background-color","red");      <div>          ***此div會被選中,因為他的有孫子span        我是最外層div            <div><p>我是一個P</p></div>    ***此div不會被選中,因為不含有后代span        <div><span>我是一個span</span></div>  ***此div會被選中,含有后代span      </div>

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

      $(":parent").text("不含子元素或文本元素");      <div>我是一個div</div>  ***不會被選中,因為含有文本元素      <div><span>我是一個span</span></div>  ***不會被選中,含有子元素?!     ?lt;div></div>        ***會被選中,不含子元素也不含有文本元素

5、可見性過濾選擇器

  (1)、:hidden  選中所有不可見元素

      $("span:hidden").css("display","block");      $("input:hidden").val("我是jQuery");       <span style="display:none">我是一個span</span>  ***會被第一條規(guī)則選中      <input type="hidden" value="我是一個隱藏的input" /> ***會被第二條jQuery選中      <span class="span1">我是span1</span>       ***會被第一條jQuery選中

(2)、:visible  選中所有可見元素

6、屬性過濾選擇器

  (1)、[attribute]  獲取包含給定屬性的元素

    $("div[class]").css("font-size","30px");     <div>       <div class="div1">我是第一個div</div>  ***會被選中,含有class屬性       <div>我是第二個div</div>         ***不會被選中,沒含有class屬性。     </div>

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

    $("div[class=div1]").css("font-size","30px");      <div>        <div class="div1">我是div1</div>  ***會被選中,class屬性等于div1。        <div class="div2">我是div2</div>  ***不會被選中,class屬性不等于div1。      </div>

   (3)、[attribute!=value]  獲取屬性值不等于value的元素

      $("div[class!=div1]").css("color","red");      <div>我是一個沒有class屬性的div</div>            ***會被選中,沒有class屬性自然class屬性不等于div1      <div class="div2">我是一個class屬性等于div2的div</div>   ***會被選中,class屬性不等于div1      <div class="div1">我是一個class屬性等于div1的元素</div>  ***不會被選中,class屬性等于div1

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

      $("div[class^=div]").css("color","red');      <div class="div1">我是div1</div>  ***會被選中,class屬性以div開始      <div class="div2">我是div2</div>  ***會被選中,class屬性以div開始      <div class="abc">我是div3</div>   ***不會被選中,class屬性不以div開始

  (5)、[attribute$=value]  獲取屬性值以value結束的元素

      $("div[class$=div]").css("color","red");      <div class="1div">我是第一個div</div>  ***會被選中,class屬性以div結束      <div class="2div">我是第二個div</div>  ***會被選中,class屬性以div結束      <div class="abc">我是第三個div</div>   ***不會被選中,class屬性不以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不是選中的?!     ?lt;/selected>    </div>

9、表單選擇器

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

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

(2)、:text  獲取所有的單行文本框,也就是<input type="text" />元素

    $(":text").val("jQuery");    <div>      <input type="text" value="我是一個input" />  ***會被選中,是單行文本框      <input type="button" value="確定" />      ***不會被選中,不是單行文本框      <textarea>我是一個textarea</textarea>     ***不會被選中,不是單行文本框    </div>

(3)、:password  獲取所有的密碼框  也就是<input type="password" />元素

    $(":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>

 

本站僅提供存儲服務,所有內容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權內容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
前端css選擇器
css系列教程
CssFullText
jQuery 選擇器、DOM操作、事件、動畫
jquery 選擇器(name,屬性,元素)大全
淺談CSS選擇器中的空格
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服