JQuery :contains(text) selector use case-JS Tutorial-php.cn

JQuery :contains(text) selector use case

黄舟

Release： 2017-06-23 11:05:25

Original

1799 people have browsed it

Overview

Matches elements containing the given text

Parameters

textStringV1.1.4

A parameter to String to find

Example

Description:

Find all div elements containing "John"

HTML code:

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

Copy after login

jQuery code:

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

Copy after login

Result:

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

Copy after login

##Instance code:

Example 1:

<!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>

Copy after login

The above code can set the text color in the li element containing "html" to blue.

:contains(text)

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

Copy after login

:contains selector in jQuery selects elements that contain the specified string . (W3school)

I want to select elements that contain the string "you". Obviously there are no elements that meet the conditions on the page, but the page also turns green. The following two can also make the page green (blind test) $(':even').css('background','lime'); $(':odd').css('background','lime '); Why is this? Thanks.

1. Why does the :contains('you') page painting turn green?

Because your script tag is on the html screen, jquery will search the entire screen when searching for elements. Then find the word 'you' in the script, which is the JavaScript code you wrote. The program treats it as text for the time being:

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

Copy after login

So: contains(you) should find three elements: There are three elements: html, body, and this script. Add background to the styles of these three elements. Of course, adding background is useless if script does not support it.

2.$(':even').css('background','lime'); $(':odd').css('background','lime'); Why does the screen change? Become green?

$(':even') will select html, $(':odd') will select body, and setting the background of these two elements will of course be useful.

Another addition: Regarding the first point, if you write your js code in a js file and then introduce it through the script tag, there will be no such problem. If the text you are looking for appears in the

comment, it will also be ignored.

The above is the detailed content of JQuery :contains(text) selector use case. For more information, please follow other related articles on the PHP Chinese website!