search

Home  >  Article  >  Web Front-end  >  JQuery :contains(text) selector use case

JQuery :contains(text) selector use case

黄舟
黄舟Original
2017-06-23 11:05:251773browse

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

jQuery code:

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

Result:

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

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

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>

: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;);
 });

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of the use of jquery :focus selectorNext article：Detailed explanation of the use of jquery :focus selector

Related articles

See more