Juqery learning-4 filtering lookup _ jquery-js tutorial

Juqery 4. Filter and search. For more information about jquery learning, see. Add (expr) adds the elements matching the expression to the jQuery object. This function can be used to connect the element result set that matches the two expressions respectively. Adds more elements, matched by the given expression, to the set of matched elements. Return Value

JQuery

Parameters

Expr(String, DOMElement, Array ): Used to match an element and add an expression string, or to dynamically generate HTML code. If it is a string array, multiple elements are returned.

Example

Add a new element to a group of matching elements, and the new element can match the given expression.

HTML code:

Hello

Hello Again

JQuery code:

$ ("P"). add ("span ")

Result:

[

Hello

, Hello Again]

Dynamically generate an element and add it to the matching element.

HTML code:

Hello

JQuery code:

$ ("P"). add ("Again ")

Result:

[

Hello

, Hello Again]

Add one or more matching elements

HTML code:

Hello

Hello Again

JQuery code:

$ ("P"). add (document. getElementById (""))

Result:

[

Hello

,

Hello Again

, Hello Again]

Bytes ----------------------------------------------------------------------------------------------------------------

Children ([expr]) obtains a set of elements that contain all child elements of each element in a matched element set. You can use an optional expression to filter matched child elements. Note: parents () searches for all ancestor elements, while children () considers child elements instead of all descendant elements. Get a set of elements containing all of the unique children of each of the matched set of elements. this set can be filtered with an optional expression that will cause only elements matching the selector to be collected. also note: while parents () will look at all ancestors, children () will only consider immediate child elements. return Value

JQuery

Parameters

Expr(String): (optional) expression used to filter sub-elements

Example

Find each child element in the DIV.

HTML code:

Hello

Hello Again

And Again

JQuery code:

$ ("P"). children ()

Result:

[Hello Again]

Find the. selected class in each p.

HTML code:

Hello

Hello Again

And Again

JQuery code:

$ ("P"). children (". selected ")

Result:

[

Hello Again

]

Bytes ----------------------------------------------------------------------------------------------------------------

Contents () searches for all child nodes (including text nodes) within the matching element ). If the element is an iframe, search for the document content Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe. Return Value

JQuery

Example

Search for all text nodes and bold them

HTML code:

Hello John, how are you doing?

JQuery code:

$ ("P"). contents (). not ("[@ nodeType = 1]"). wrap (" ");

Result:

HelloJohn,How are you doing?

Add some content to an empty frame

HTML code:

JQuery code:

$ ("Iframe"). contents (). find ("body"). append ("I'm in an iframe! ");

Bytes ----------------------------------------------------------------------------------------------------------------

Find (expr) searches for all elements that match the specified expression. This function is a good way to find the child element of the element being processed. All searches rely on jQuery expressions. This expression can be written using the selector syntax of the CSS1-3. Searches for all elements that match the specified expression. this method is a good way to find additional descendant elements with which to process. all searching is done using a jQuery expression. the expression can be written using CSS 1-3 Selector syntax. return Value

JQuery

Parameters

Expr(String): the expression used for searching.

Example

Search for the following span element from all paragraphs. Same as $ ("p span.

HTML code:

Hello, how are you?

JQuery code:

$ ("P"). find ("span ")

Result:

[Hello]

Bytes ----------------------------------------------------------------------------------------------------------------

Next ([expr]) gets a set of elements next to each element in the matched element set. This function only returns the next peer element, instead of all peer elements (nextAll can be used ). You can use an optional expression for filtering. Get a set of elements containing the unique next siblings of each of the matched set of elements. it only returns the very next sibling for each element, not all next siblings (nor does it return the next closest sibling ). you may provide an optional expression to filter the match. return Value

JQuery

Parameters

Expr(String): (optional) filtering expression

Example

Find the peer element next to each section.

HTML code:

Hello

Hello Again

And Again

JQuery code:

$ ("P"). next ()

Result:

[

Hello Again

,

And Again

]

Find the peer element next to each section and the class name is selected.

HTML code:

Hello

Hello Again

And Again

JQuery code:

$ ("P"). next (". selected ")

Result:

[

Hello Again

]

Bytes ----------------------------------------------------------------------------------------------------------------

NextAll ([expr]) searches for all elements after the current element. You can use expressions to filter data. Find all sibling elements after the current element. Use an optional expression to filter the matched set. Return Value

JQuery

Parameters

Expr(String): (optional) expression used for filtering

Example

Add a class to all elements after the first p

HTML code:

JQuery code:

$ ("P: first"). nextAll (). addClass ("after ");

Result:

[

,

,

]

Bytes ----------------------------------------------------------------------------------------------------------------

Parent ([expr]) obtains a set of elements that contain the unique parent element of all matching elements. You can use an optional expression to filter data. Get a set of elements containing the unique parents of the matched set of elements. You may use an optional expression to filter the set of parent elements that will match. Return Value

JQuery

Parameters

Expr(String): (optional) filtering expression

Example

Find the parent element of each paragraph

HTML code:

Hello

Hello

JQuery code:

$ ("P"). parent ()

Result:

[

Hello

Hello

]

Find the parent element of each class named selected in the parent element of a paragraph.

HTML code:

Hello

Hello Again

JQuery code:

$ ("P"). parent (". selected ")

Result:

[

Hello Again

]

Bytes ----------------------------------------------------------------------------------------------------------------

Parents ([expr]) obtains a set of elements (excluding the root element) that contain the ancestor elements of all matching elements ). You can use an optional expression to filter data. Get a set of elements containing the unique ancestors of the matched set of elements (could t for the root element). The matched elements can be filtered with an optional expression. Return Value

JQuery

Parameters

Expr(String): (optional) expression used to filter ancestor Elements

Example

Find all the ancestor elements of each span element.

HTML code:

Hello

Hello Again

JQuery code:

$ ("Span"). parents ()

Find all the ancestor elements of the p element in each span.

JQuery code:

$ ("Span"). parents ("p ")

Bytes ----------------------------------------------------------------------------------------------------------------

Prev ([expr]) obtains a set of elements that match the previous generation element next to each element in the element set. You can use an optional expression for filtering. Only peer elements that are adjacent to each other will be matched, instead of all peer elements. Get a set of elements containing the unique previous siblings of each of the matched set of elements. use an optional expression to filter the matched set. only the immediately previous sibling is returned, not all previous siblings. return Value

JQuery

Parameters

Expr(String): (optional) the expression used to filter the previous element of the same generation.

Example

Find the first peer element next to each paragraph.

HTML code:

Hello

Hello Again

And Again

JQuery code:

$ ("P"). prev ()

Result:

[

Hello Again

]

Find the element of the class named selected in the previous peer element next to each paragraph.

HTML code:

Hello

Hello Again

And Again

JQuery code:

$ ("P"). prev (". selected ")

Result:

[

Hello Again

]

Bytes ----------------------------------------------------------------------------------------------------------------

PrevAll ([expr]) can be used to search for all peer elements before the current element. Find all sibling elements before the current element. Use an optional expression to filter the matched set. Return Value

JQuery

Parameters

Expr(String): (optional) filtering expression

Example

Add a class to all p before the last one.

HTML code:

JQuery code:

$ ("P: last"). prevAll (). addClass ("before ");

Result:

[

,

,

]

Bytes ----------------------------------------------------------------------------------------------------------------

Siblings ([expr]) obtains a set of elements that contain all unique peer elements of each element in a matched element set. You can use an optional expression for filtering. Get a set of elements containing all of the unique siblings of each of the matched set of elements. Can be filtered with an optional expressions. Return Value

JQuery

Parameters

Expr(String): (optional) expression used to filter peer Elements

Example

Find all peer elements of each p.

HTML code:

Hello

Hello Again

And Again

JQuery code:

$ ("P"). siblings ()

Result:

[

Hello

,

And Again

]

Find all peer elements of each p with the class name selected.

HTML code:

Hello

Hello Again

And Again

JQuery code:

$ ("P"). siblings (". selected ")

Result:

[

Hello Again

]
Bytes ------------------------------------------------------------------------------------------------------------------------
Adding andSelf () to the previously selected elements to the current element is useful for filtering or searching the elements to be added to the previously selected elements. Add the previous selection to the current selection. Useful for traversing elements, and then adding something that was matched before the last traversion. Return Value

JQuery

Example

Select All p and internal p, and add the border class

HTML code:

First Paragraph

Second Paragraph

JQuery code:

$ ("P"). find ("p"). andSelf (). addClass ("border ");

Result:

First Paragraph

Second Paragraph

Bytes ------------------------------------------------------------------------------------------------------------------------
End () returns to the latest "destructive" operation. That is, the list of matched elements is changed to the previous state. If no destructive operation is performed before, an empty set is returned. The so-called "destructive" refers to the operation of any change to the matching jQuery element. This includes any function in Traversing that returns a jQuery object-'add', 'andself ', 'Children', 'filter', 'Find ', 'map ', 'Next', 'nextall', 'not ', 'parent', 'Parents', 'prev', 'prevall ', 'siblings 'and 'slice' -- add 'clone 'in Manipulation '. Revert the most recent 'structive' operation, changing the set of matched elements to its previous state (right before the destructive operation ). if there was no destructive operation before, an empty set is returned. A 'structive' operation is any operation that changes the set of matched jQuery elements, which means any Traversing function that returns a jQuery object-including 'add', 'andself-service ', 'Children ', 'filter', 'Find', 'map', 'Next', 'nextall', 'not', 'parent', 'Parents ', 'prev ', 'prevall', 'siblings 'and slice-plus the 'clone' function (from Manipulation ). return Value

JQuery

Example

Select All p elements, find and select span sub-elements, and then return to select p elements.

HTML code:

Hello, how are you?

JQuery code:

$ ("P"). find ("span"). end ()

Result:

[

Hello how are you?

]