JQuery content filtering selector tutorial _ jquery

This article mainly introduces jQuery's content filtering selector learning tutorial, detailed the usage of the four filters in jQuery, you can refer to the following content filter rules to filter sub-elements or text content.

$ ('P: contains ("xxx" example 'background .css ('background ',' # ccc '); // select the element whose text node contains the xxx text $ ('P: 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('p'}.css ('background ',' # ccc '); // select the parent element p 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:

John Resign
George Martin
Malcom John Sinclair
J.Ohn
Has p

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: