Example of selecting elements using jQuery content filtering selector

Home

Web Front-end

JS Tutorial

Example of selecting elements using jQuery content filtering selector_jquery

May 16, 2016 pm 05:36 PM

jquery filter Selector

Copy code The code is as follows:

 
<html xmlns="http://www.w3.org /1999/xhtml"> 
<head> 
<!-- 
Content filter selector: Get the element based on the text content in the element or the characteristics of the sub-elements it contains, and its text content can Fuzzy or absolute matching for element positioning 
 Detailed explanation of jQuery selector 
 According to the different elements in the obtained page, jQuery selectors can be divided into four categories: basic selector, hierarchical selector, filter selector and form selector. Categories. Among them, there are 6 types of filter selectors: simple filter selector, content filter selector, visibility filter selector, attribute filter selector, child element filter selector, and form object attribute filter selector 
 --> 
<title></title> 
<!-- Use the jQuery content filter selector to select elements: In the page, create four <div> tags as needed, and add Create a new <span> tag in the <div>, enter content (or be empty) in the remaining <div> tags, obtain the specified element through the content filter, and display it on the page. --> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<style type="text/css"> 
body{font-size:12px;text-align:center} 
div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none} 
span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee} 
</style> 
<script type= "text/javascript"> 
$(function () { //Display elements containing the given text 
$("div:contains('A')").css('display','block '); 
}) 
$(function(){ //Display all empty elements that do not contain child elements or text 
$('div:empty').css('display','block '); 
}) 
$(function () { //Display the elements matched by the selector 
$('div:has(span)').css('display', 'block '); 
}) 
$(function () { //Display elements containing child elements or text 
$('div:parent').css('display', 'block'); 
}) 
</script> 
<!-- Note: In the:contains(text) content filter selector, if you are looking for letters, there is a case difference--> 
</head> 
<body> 
<div>ABCD</div> 
<div><span></span></div> 
<div>EFAH</div> 
<div></div> 
</body> 
</html> 

Statement of this Website

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