This article describes the usage of contains selector in jQuery. Share it for your reference. The specific analysis is as follows:
This selector matches elements containing the given text.
grammar:
This selector should generally be used in conjunction with other selectors, such as class selectors and element selectors, etc. For example:
The above code sets the font color in the li element containing "html" in the text to blue.
If not used with other selectors, the default state is to use with * selectors, for example $(":contains") is equivalent to $("*:contains").
Parameter list:
Example code:
Example 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https:///" />
<title>I</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8."></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li:contains('html')").css("color","blue")
})
})
</script>
</head>
<body>
<ul>
<li>html zone</li>
<li>div+css zone</li>
<li>Jquery Zone</li>
<li>Javascript area</li>
<li>html5 zone</li>
</ul>
<button>Click to view the effect</button>
</body>
</html>
The above code can set the text color in the li element containing "html" to blue.
Example 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https:///" />
<title>I</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8."></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("*:contains('html')").css("border","1px solid red")
})
})
</script>
</head>
<body>
<ul>
<li>html zone</li>
<li>div+css zone</li>
<li>Jquery Zone</li>
<li>Javascript area</li>
<li>html5 zone</li>
</ul>
<div>I</div>
<button>Click to view the effect</button>
</body>
</html>
Since the above code does not specify a selector that is used with the :even selector, it is used with the * selector by default.
I hope this article will be helpful to everyone's jQuery programming.