JQuery :contains(text) 선택기 사용 사례-JS 튜토리얼-php.cn

JQuery :contains(text) 선택기 사용 사례

黄舟

풀어 주다： 2017-06-23 11:05:25

원래의

1777명이 탐색했습니다.

Overview

주어진 텍스트를 포함하는 요소와 일치

매개변수

textStringV1.1.4

A 찾을 문자열

예

설명:

"John" div 요소를 포함하는 모든 요소 찾기

HTML 코드 : l

<div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn

로그인 후 복사

jquery 코드 :

$("div:contains(&#39;John&#39;)")

로그인 후 복사

result :

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

로그인 후 복사

example 코드 :

예 :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $("li:contains(&#39;html&#39;)").css("color","blue") 
  }) 
}) 
</script>
</head>
<body>
<ul>
  <li>html专区</li>
  <li>div+css专区</li>
  <li>Jquery专区</li>
  <li>Javascript专区</li>
  <li>html5专区</li>
</ul>
<button>点击查看效果</button>
</body>
</html>

로그인 후 복사

위의 코드에는 "html"텍스트 색상이 포함될 수 있습니다. li 요소는 파란색으로 설정됩니다.

jQuery의 :contains(text)

<body>
    <div>
        我    </div><script>
    $(function(){
        $(&#39;:contains(你)&#39;).css(&#39;background&#39;,&#39;lime&#39;);
    });</script>    </body>

로그인 후 복사

:contains 선택기는 지정된 문자열을 포함하는 요소를 선택합니다. (W3school)

문자열 "you"가 포함된 요소를 선택하고 싶습니다. 당연히 페이지에 기준에 맞는 요소가 없지만 페이지도 녹색으로 변합니다. 다음 두 가지 방법으로 페이지를 녹색으로 만들 수도 있습니다(블라인드 테스트) $(':even').css('Background','lime') $(':odd').css('Background','lime ') ; 왜 그렇습니까? 감사해요.

1.:contains('you') 페이지 아트가 녹색으로 바뀌는 이유는 무엇인가요?

스크립트 태그가 html 화면에 있으므로 jquery는 요소를 검색할 때 전체 화면을 검색합니다. 그런 다음 스크립트에서 귀하가 작성한 JavaScript 코드인 'you'를 찾으십시오. 프로그램은 이를 당분간 텍스트로 처리합니다.

 $(function(){
        $(&#39;:contains(你)&#39;).css(&#39;background&#39;,&#39;lime&#39;);
 });

로그인 후 복사

So: 포함(you)은 html, body, As 등 세 가지 요소를 찾아야 합니다. 물론 이 스크립트의 세 가지 요소에 대한 스타일을 추가하려면 스크립트에서 지원하지 않으면 쓸모가 없습니다.

2.$(':even').css('Background','lime'); $(':odd').css('Background','lime'); 왜 화면이 녹색으로 바뀌나요?

$(':even')은 html을 선택하고, $(':odd')는 본문을 선택하며, 이 두 요소의 배경을 설정하는 것은 물론 유용합니다.

또 다른 추가 사항: 첫 번째 사항에 대해 js 코드를 js 파일에 작성한 다음 스크립트 태그를 통해 도입하면 이러한 문제가 발생하지 않습니다. 찾고 있는 텍스트가

댓글에 나타나면 해당 텍스트도 무시됩니다.

위 내용은 JQuery :contains(text) 선택기 사용 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!