JQuery content filtering selector learning tutorial, jquery Selector

JQuery content filtering selector learning tutorial, jquery Selector

The content filter rules mainly include child elements or text content.

$ ('Div: contains ("xxx" comment 'background .css ('background ',' # ccc '); // select an element whose text node contains xxx text $ ('div: empty'background .css ('background', '# ccc'); // select an empty element $ ('ul: has(.red+'background .css ('background', '# ccc '); // select the child element $ (': parent'background .css ('background',' # ccc ') whose class is red. // select a non-empty Element

JQuery provides an has () method to improve the performance of the has filter:

Optional ('ul'background .has('.red'background .css ('background ',' # ccc '); // select the child element containing the element whose class is red.

JQuery provides a method similar to parent, but this method does not select an element containing child elements or text, but obtains the parent element of the current element, and returns a set of elements.

Certificate ('li').parent().css ('background ',' # ccc '); // select the parent element of the current element nickname ('li').parents().css ('background',' # ccc '); // select the parent element of the current element and the ancestor element parent ('li'}.parentsuntil('div'}.css ('background ',' # ccc '); // select the parent element of the div to stop when the current element is selected

The filtering rules of the jQuery content filter selector are mainly applied to the child elements contained in DOM elements or their text content. They mainly include the following four filtering methods:

For better learning, first write the HTML structure of several DOM elements:

<div>John Resign</div><div>George Martin</div><div>Malcom John Sinclair</div><div>J.Ohn</div><div></div><p></p><div><p>Has p</p></div>

I. Content Filtering selector --: contains (text)
Selector:

E: contains (text) // E refers to the text contained in the DOM element: contains (text). text indicates the string to be searched.
Description:

Select an element with the text content as "text"

Return Value:

Set Element

Instance:

<script type="text/javascript"> $(document).ready(function(){  $('div:contains(John)').css('background','#f36'); });</script>

Function:

Change the background color of the div element containing the text "John"

Effect:

Back to the preceding HTML structure, we can see that there are two div elements that contain the "John" text, because here we mainly change the background color of the div containing the text "John, therefore, we can see in the effect that the background color of the first and third divs has changed to "# f36". In order to better understand the changes, you can see the HTML changes through the Firebug tool in Firefox:

Ii. Content Filtering selector --: empty

Selector:

E: empty // where E is the DOM element, and empty means that the DOM element does not contain any child element or text
Description:

Select an empty element without any child element or text

Return Value:

Set Element

Instance:

<script type="text/javascript"> $(document).ready(function(){  $('div:empty').css('background','#f36'); });</script>

Function:

Changes the background color of a div that does not contain child elements (including text elements). In other words, it changes the background color of a div that does not contain anything.

Effect:

Although all the elements in the preceding html do not contain child elements, some of them contain text elements. Only one div and one p element have no child element or text content. In this example, we only set the background color for the div that does not contain child elements and text content, therefore, we only add the "# f36" background color to the div. Let's also look at the HTML changes:

Iii. Content Filtering selector --: has (selector)

Selector:

E: has (selector) // where E is an element tag with a DOM effect. has (selector) contains a selector, which is used for filtering.

Description:

Select the element containing the element matched by the selector

Return Value:

Set Element

Instance:

<script type="text/javascript"> $(document).ready(function(){  $('div:has(p)').css('background','#f36'); });</script>

Function:
Change the background color of the div element containing the child element P
Effect:

In our example, only one div contains the child element P, so the background color of the div element that meets this requirement is set to "# f36", and the changed HTML:

Iv. Content Filtering selector --: parent

Selector:

E: parent // E is a valid DOM element tag. parent contains child elements or text content.

Description:

Select an element tag containing child elements or text

Return Value:

Set Element

Instance:

<script type="text/javascript"> $(document).ready(function(){  $('div:parent').css('background','#f36'); });</script> 

Function:
Changes the background color of a div containing child elements or text content. In other words, when a div contains any child element or any content, its background color changes.
Effect:

In this example, only one div and one p element do not contain any child element or text content, because we set the div here, so the effect is displayed, except for the two divs that do not contain child elements or any content, the background color is changed to "# f36". The changed HTML:

For the content filtering selector in the jQuery selector, let's simply put it here. If you want to learn more about its usage, you can do a few instance exercises locally. If you are interested in the usage of other selectors of the jQuery selector, you can learn the specific functions and usage of other selectors on this site. You can also view the content updates on this site at any time.