>  기사  >  웹 프론트엔드  >  분류 파싱 jQuery 선택기

분류 파싱 jQuery 선택기

高洛峰
高洛峰원래의
2016-12-05 15:06:38869검색

기본 선택기:

#id ID를 기준으로 요소와 일치

.class 주어진 클래스 이름을 기준으로 요소와 일치

요소 요소 이름

* 모든 요소와 일치

selecttor1,selector2 Union, 두 선택기와 일치하는 요소를 반환

계층적 선택기:

조상 자손에 따르면 Ancestor는 모든 하위 요소와 일치

parent>child 상위 요소에 따라 모든 하위 요소와 일치, 직계 자손

prev+next 다음 형제 요소와 일치하는 것은 next() 메소드와 동일합니다

prev~siblings 다음 형제 요소를 일치시키는 것은 nextAll() 메서드와 동일합니다 siblings() 메서드는 모든 형제 요소와 일치합니다

단순 필터 선택기:

:first 또는 first( ) 첫 번째 요소 일치

:last 또는 last() 마지막 요소와 일치

:not(selector) 선택기로 일치할 수 없는 요소와 일치

:even index value 짝수인 요소의 경우 인덱스 번호는 0부터 시작합니다.

:odd 홀수인 요소와 일치하며, 인덱스 번호는 0부터 시작합니다.

:eq(index) 지정된 인덱스 번호를 갖는 요소, index 번호는 0부터 시작

 :gt(index)     인덱스 번호가 주어진 인덱스 값보다 크고, 인덱스 번호는 0부터 시작하는 요소와 일치

  :lt(index)     인덱스 번호가 주어진 인덱스 값보다 작은 요소와 일치합니다. 인덱스 번호가 0부터 시작하는 요소

:header 모든 헤더 요소와 일치합니다. h1 h2 h3 h4 h5 h6

:animated 애니메이션을 실행하는 모든 요소와 일치

콘텐츠 필터링 선택기:

:contains(text) 주어진 텍스트를 포함하는 요소와 일치

:empty 다음과 같은 모든 빈 요소와 일치 하위 요소 또는 텍스트를 포함하지 않음

:has(selector )    해당 요소와 일치할 수 있는 선택자가 하위 요소에 포함된 요소 일치

:parent    하위 요소 또는 텍스트가 포함된 요소 일치

가시성 필터 선택기:

:hidden           일치하지 않음 표시되는 요소 또는 CSS 스타일:display:"none";을 포함하는 type="hidden" 요소, CSS가 인라인인지, 가져오기인지, 링크인지

 :visible       보이는 모든 요소 가져오기

속성 필터 선택기:

[속성] 주어진 속성을 포함하는 요소와 일치

[속성=값] 요소와 일치

[속성 !=값]   속성을 포함하지만 !=값인 일치 요소

 [attribute^=값]   일치 속성 값은 값으로 시작하는 요소입니다.

 [attribute$= 값]   일치 속성 값은 값으로 끝나는 요소

[속성*=값] 속성 값이 특정 값을 포함하는 일치 요소, 전후 부분, 중간도 계산됩니다

[selector][selector] 일치하는 속성 선택기

하위 요소 필터 선택기의 교차점:

:nth-child(eq|even|odd|index) 특정 위치에서 모든 하위 요소를 가져옵니다. 상위 요소의 위치

:first 모든 상위 요소 아래의 첫 번째 하위 요소를 가져옵니다.

:last 모든 상위 요소 아래의 마지막 하위 요소를 가져옵니다.

:only-child Get 모든 상위 요소 아래의 유일한 요소

양식 개체 속성 필터 선택기:

:enabled 양식에서 사용 가능한 모든 요소 가져오기

:disabled 양식에서 사용할 수 없는 모든 요소 가져오기

:checked 양식에서 선택한 모든 요소 가져오기

:selected 양식에서 선택한 모든 옵션 요소 가져오기

양식 선택기:

:input 모든 양식 가져오기 요소580e0b2b514ba6fe941596ba59c49f53

:password 모든 비밀번호 상자 요소 가져오기 < ;input type="password" />

 :radio                       int should should should should should in type="checkbox">

:submit 모든 제출 버튼 가져오기 304ad795417f176379d121aa93b316e4

:image 모든 이미지 버튼 가져오기 7c696951595ca52af93ef62fe7bceaa5

: Reset 모든 재설정 버튼 가져오기eeca75b0568ea805e682104191241965

:button 모든 버튼 가져오기8e03557d3950bf880a2e4583affa2fab

:file 모든 파일 업로드 상자 가져오기61b9b53f6d762f7c3b14ccfc7d4eaf40

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 요소와 일치

$(".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), 조상 자손 조상 기준 요소는 모든 자손 요소와 일치하며, 일치하는 자손 요소는 공백으로 구분되어 반환됩니다.

$("#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 > 상위 요소를 기준으로 모든 하위 요소를 일치시키고 보다 큼 기호로 구분된 모든 하위 요소를 반환합니다. >"

$("#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 더하기 기호 "+"로 구분된 이전 요소 바로 뒤의 다음 인접 요소와 일치합니다.

.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 ~ sibins 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() method

$(".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)  조건을 만족하지만 선택자로 선택할 수 없는 요소

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

(4), :even 짝수(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), 홀수    홀수 인덱스 값(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 값이 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 값이 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), 애니메이션 검색 애니메이션 효과를 수행하는 요소

4. 콘텐츠 필터 선택기

(1), :contains(text) 해당 텍스트가 포함된 요소 가져오기

$("p:contains(&#39;三&#39;)").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 ) 선택기와 일치하는 요소를 포함하는 요소를 선택합니다. (후손에 포함되는 한 직접 하위 요소에만 국한되지는 않습니다.)

$("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), :parent 하위 요소 또는 텍스트 요소를 포함하는 요소

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

5. 🎜>

(1), :hidden 보이지 않는 요소 모두 선택

$("span:hidden").css("display","block");
 $("input:hidden").val("我是jQuery");
  <span style="display:none">我是一个span</span>  ***会被第一条规则选中
    <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] 요소와 같은 요소 가져오기 속성 값이 값

$("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] 값이

$("div[class^=div]").css("color","red&#39;);
<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不是选中的。
    </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으로 문의하세요.