Use of jquery-selectors (selector) (IV-V. Content & visibility)

Use of jquery-selectors (selector) (4-5. Content & visibility)

This series Article This article mainly describes how to use selectors in the jquery framework. I will describe them in the form of examples. It is based on simplicity and comprehensiveness and will not be very deep. My learning method is as follows: getting started, advanced!
This series of articles includes nine articles: basic articles, level articles, simple articles, content articles, visibility articles, attributes articles, child elements articles, forms articles, and form object attributes articles.
This article explains: Contains (text),: Empty,: Has (selector),: parent,: hidden,: visible usage.
If you have any suggestions or comments on this series of articles, please send to: sjzlgt@qq.com
Because it is the first time to write a series of technical articles, it is inevitable that errors or Code Bug. Thank you!
You can go to the official jquery website to learn more about jquery.
Copyright: code-cat blog: http://www.cnblogs.com/bynet/ reprint Please retain the source and copyright information! Because the content and visibility are few, I merge the two articles into one and publish them together. 1.: Contains (text) Usage
Definition: match the elements that contain the given text
Returned value: array <element>
Parameter: Text (string): a string to be searched
Example: change the background color of the DIV element with the ID of "div_a1" to red.
Code: $ ("# div_a1: Contains (AAA)" ground .css ("background-color", "Red ");// Click the button to execute the code

Div id = "div_a1" Div id = "div_a2" aaadiv id = "div_a3" bbbdiv id = "div_a4" aaadiv id = "div_a5" aaa 2. Empty usage
Definition: Match All null elements that do not contain child elements or text
Returned value: array <element>
Example: change the background color of all empty elements without child elements or text in the DIV with ID "div_b1" to red.
Code: $ ("# div_b1: empty" ).css ("background-color", "Red ");// Click button 2 to execute the code

Div id = "div_b1" Div id = "div_b2" Div id = "div_b5"

Note: The input element is considered as an empty element. 3. Usage of has (selector)
Definition: match an element that contains the element matched by the selector.
Returned value: array <element>
Parameter: selector (selector): A Selector Used for filtering
Example: change the background color of all elements in the DIV with ID "div_c1" to red.
Code: $ ("# div_c1: Has (SPAN)" ground .css ("background-color", "Red ");// Click "3" to execute the code.

Div id = "div_c1" Div id = "div_c2" Span Div id = "div_c3" Div id = "div_c4" Span

SpanSpan

Div id = "div_c5" Span 4. Parent usage
Definition: matching elements containing child elements or text
Returned value: array <element>
Example: change the background color of all elements containing child elements or text in the DIV with ID "div_d1" to red.
Code: $ ("# div_d1: parent" ground .css ("background-color", "Red ");// Click button 4 to execute the code

Div id = "div_d1" Div id = "div_d2" Div id = "div_d5" Use of jquery-selectors (selector) (V. Visibility)

Copyright: code-cat blog: http://www.cnblogs.com/bynet/ reprint Please retain the source and copyright information! 1.: hidden usage
Definition: matches all invisible elements. If the type attribute of the input element is "hidden", it will also be matched
Returned value: array <element>
Example: Display All hidden divs In the div id "div_e1"
Code: $ ("# div_e1 Div: hidden" ).css ("display", "Block ");// Click button 5 to execute the code

Div id = "div_e1" Div id = "div_e2" divdiv id = "div_e5" 2. Visible usage
Definition: match all visible elements
Returned value: array <element>
Example: change the background color of all visible divs In the div id "div_f1" to red and display the hidden Divs.
Code: $ ("# div_f1 Div: visible" ).css ("background-color", "Red"); $ ("# div_f1 Div: hidden" ).css ("display ", "Block ");// Click button 6 to execute the code

Div id = "div_f1" Div id = "div_f2" divdiv id = "div_f5"

 

You can download the HTML source file of this article: Download