jQuery의 필터 선택기는 무엇입니까?-JS 튜토리얼-php.cn

jQuery의 필터 선택기는 무엇입니까?

yulia

풀어 주다： 2018-09-18 16:02:13

원래의

1687명이 탐색했습니다.

jQuery에는 자식 요소 선택자, 하위 요소 선택자, 필터 선택자 등 많은 선택자가 있습니다. 이 글에서는 jQuery의 필터 선택자에 대해 설명하겠습니다. 참고해 보세요.

:first 및 :last 필터 선택기

:first는 동일한 태그가 있는 요소 그룹에서 첫 번째 요소를 가져옵니다.
:last는 동일한 태그가 있는 요소 그룹에서 마지막 요소를 가져옵니다.
예:

<body>
  <div>改变最后一行"苹果"背景颜色：</div>
  <ol>
    <li>葡萄</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
    <li>苹果</li>
  </ol>       
<script type="text/javascript">
  $("li:last").css("background-color", "red");
</script>

로그인 후 복사

:contains(text) 필터 선택기

:contains(text)는 지정된 문자열을 포함하는 모든 요소를 선택합니다. 일반적으로 "텍스트" 문자열 내용을 포함하는 모든 요소 개체를 얻기 위해 다른 요소와 조합하여 사용됩니다. 예:

<body>
  <div>改变包含"jQuery"字符内容的背景色：</div>
  <ol>
    <li>强大的"jQuery"</li>
    <li>"javascript"也很实用</li>
    <li>"jQuery"前端必学</li>
    <li>"java"是一种开发语言</li>
    <li>前端利器——"jQuery"</li>
  </ol>
<script type="text/javascript">
  $("li:contains(&#39;jQuery&#39;)").css("background", "green");
</script>
</body>

로그인 후 복사

:has(selector) filter selector

:has(selector) 필터 선택기의 기능은 선택기

에 지정된 요소 이름을 포함하는 모든 요소를 가져오는 것입니다. 예:

<body>
  <div>改变包含"label"元素的背景色：</div>
  <ol>
    <li><p>我是P先生</p></li>
    <li><label>L妹纸就是我</label></li>
    <li><p>我也是P先生</p></li>
    <li><label>我也是L妹纸哦</label></li>
    <li><p>P先生就是我哦</p></li>
  </ol>
<script type="text/javascript">
  $("li:has(&#39;label&#39;)").css("background-color", "blue");
</script>
</body>

로그인 후 복사

: 숨겨진 필터 선택기

:숨겨진 필터 선택기의 기능은 모든 보이지 않는 요소를 얻는 것입니다. 이러한 보이지 않는 요소에는 유형 속성 값이 Hidden

인 요소가 포함됩니다. 예:

<body>
  <h3>显示隐藏元素的内容</h3>
  <input id="hidstr" type="hidden" value="我已隐藏起来"/>
  <div></div>
  <script type="text/javascript">
    var $strHTML = $("input:hidden").val();
    $("div").html($strHTML);
  </script>
</body>

로그인 후 복사

:visible filter selector

:visible filter 선택기 표시되는 모든 요소를 가져옵니다. 즉, 요소의 표시 속성 값이 "없음"으로 설정되지 않은 한 이 선택기를 통해 모든 요소를 가져올 수 있습니다.

예:

<body>
  <h3>修改可见“水果”的背景色</h3>
  <ul>
    <li style="display:none">橘子</li>
    <li style="display:block">香蕉</li>
    <li style="display:">葡萄</li>
    <li>苹果</li>
    <li style="display:none">西瓜</li>
  </ul>
  <script type="text/javascript">
    $("li:visible").css("background-color","blue");
  </script>
</body>

로그인 후 복사

[attribute=value] 속성 선택기

[attribute=value] 속성 선택기의 기능은 정확히 동일한 속성 이름과 속성 값을 가진 모든 요소를 가져오는 것입니다. 여기서 []는 속성 선택기 괄호로 묶인 매개변수 속성은 속성 이름을 나타내고 값 매개변수는 속성 값을 나타냅니다.

예:

<body>
  <h3>改变"title"属性值为"蔬菜"的背景色</h3>
  <ul>
    <li title="蔬菜">茄子</li>
    <li title="水果">香蕉</li>
    <li title="蔬菜">芹菜</li>
    <li title="水果">苹果</li>
    <li title="水果">西瓜</li>
  </ul>
  <script type="text/javascript">
    $("li[title=&#39;蔬菜&#39;]").css("background-color", "green");
  </script>
</body>

로그인 후 복사

[attribute!=value] 속성 선택기

[attribute!=value] 속성 선택기의 기능은 속성 이름을 포함하지 않거나 속성과 다른 모든 요소를 가져오는 것입니다. 이름 및 속성 값. 여기서 []는 속성 선택자에만 사용되는 대괄호 기호입니다. 매개변수 속성은 속성 이름을 나타내고, 값 매개변수는 속성 값을 나타냅니다.

[attribute*=value] 속성 선택기

[attribute*=value] 속성 값에 지정된 내용을 포함하는 모든 요소를 가져올 수 있습니다. 여기서 []는 속성 선택기 전용 대괄호 기호이고, 매개변수 속성은 속성 이름을 나타내고, 값 매개변수는 해당 속성 값을 나타냅니다.

예:

<body>
  <h3>改变"title"属性值包含"果"的背景色</h3>
  <ul>
    <li title="蔬菜">茄子</li>
    <li title="水果">香蕉</li>
    <li title="蔬菜">芹菜</li>
    <li title="人参果">小西红柿</li>
    <li title="水果">西瓜</li>
  </ul>
  <script type="text/javascript">
    $("li[title*=&#39;果&#39;]").css("background-color", "green");
  </script>
</body>

로그인 후 복사

:first-child 하위 요소 필터 선택기

:first-child 하위 요소 필터 선택기는 각 상위 요소에서 반환된 첫 번째 하위 요소를 가져올 수 있으며 일반적으로 사용되는 여러 요소입니다. 수집 데이터 선택 처리.

예:

<body>
  <h3>改变每个"蔬菜水果"中第一行的背景色</h3>
  <ol>
    <li>芹菜</li>
    <li>茄子</li>
    <li>萝卜</li>
    <li>大白菜</li>
    <li>西红柿</li>
  </ol>
  <ol>
    <li>橘子</li>
    <li>香蕉</li>
    <li>葡萄</li>
    <li>苹果</li>
    <li>西瓜</li>
  </ol>
  <script type="text/javascript">
    $("li:first-child").css("background-color", "green");
  </script>
</body>

로그인 후 복사

:last-child 하위 요소 필터링 선택기

:first-child 하위 요소 필터링 선택기의 기능과 달리 :last-child 하위 요소 필터링 선택기의 기능은 다음의 내용을 가져오는 것입니다. 각 상위 요소 반환된 마지막 하위 요소도 컬렉션이며, 이는 일반적으로 여러 컬렉션 데이터의 선택 처리에 사용됩니다.

위 내용은 jQuery의 필터 선택기는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!