Use the jQuery content filter selector to select an element

Source: Internet
Author: User

<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>

<! --


Content Filtering selector: gets an element based on the text content in the element or its child element features. The text content can be fuzzy or absolutely matched for element locating.

JQuery selector details

Based on the elements in the obtained page, jQuery selectors can be divided into four categories: Basic selector, level selector, filter selector, and form selector. There are six 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: on the page, create four <div> tags as needed, and create a <span> tag in <div>, the other <div> inputs (or is empty) in the tag are obtained through the content filter and displayed 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 that contain the given text
$ ("Div: contains ('A')" ).css ('display', 'block ');
})
$ (Function () {// display all empty elements that do not contain child elements or text
$ ('Div: empty'demo.css ('display', 'block ');
})
$ (Function () {// display elements that match the selector
$ ('Div: has(span='hangzhou.css ('display', 'block ');
})
$ (Function () {// display elements containing child elements or text
$ ('Div: parent'mirror.css ('display', 'block ');
})
</Script>
<! -- Note: In the contains (text) Content Filter selector, if you are searching for letters, there are case-sensitive differences -->
</Head>
<Body>
<Div> ABCD </div>
<Div> <span> </div>
<Div> EFAH </div>
<Div> </div>
</Body>
</Html>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.