Learning jQuery (3)-jQuery package set from scratch

Source: Internet
Author: User
Document directory
  • 1. Filter Filtering
  • 2. Find Finding
1. Filter Filtering
Name Description Example
Eq (index) Obtain the nth Element Obtain the Second Matching Element:
$ ("P"). eq (1)
Filter (expr)

Filters out a set of elements that match the specified expression.

Retain the elements with the select class:
$ ("P"). filter (". selected ")
Filter (fn)

Filters out a set of elements that match the specified function return value.

This function will calculate each object once (as in '$. each'). If the called function returns false, this element will be deleted, otherwise it will be retained.

The reserved sub-element does not contain ol elements:

$ ("Div"). filter (function (index ){
Return $ ("ol", this). size () = 0;
});

Is (expr)

Note: This function returns a Boolean value instead of a jQuery package set.

Use an expression to check the selected element set. If at least one element matches the given expression, true is returned.

If no element matches, or the expression is invalid, 'false'. 'filter' is actually called internally. Therefore, the original rules of the filter () function are also applicable here.

Returns true because the parent element of an input element is a form element:
$ ("Input [type = 'checkbox']"). parent (). is ("form ")
Map (callback)

Convert a group of elements into other arrays (whether or not they are element arrays)

You can use this function to create a list, whether it is a value, attribute, CSS style, or other special form. You can use '$. map ()' to easily create

Create a list of values of each input element in form:

$ ("P"). append ($ ("input"). map (function (){
Return $ (this). val ();
}). Get (). join (","));

Not (expr) Deletes an element that matches the specified expression. Delete an element with a select ID from element p:
$ ("P"). not ($ ("# selected") [0])

Slice (start, end)

Select a matched subset Select the first p element:
$ ("P"). slice (0, 1 );
2. Find Finding
Name Description Example
Add (expr)

Add 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.

Dynamically generate an element and add it to the matching element:
$ ("P"). add ("<span> Again </span> ")
Children ([expr])

Obtains the element set of 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 () only considers child elements, not all descendant elements.

Find each child element in the DIV:
$ ("Div"). children ()
Closest ([expr]) Obtain the latest parent element matching the expression.

Change the style of the parent class li object closest to the event Source:

$ (Document). bind ("click", function (e ){
Criteria (e.tar get). closest ("li"). toggleClass ("hilight ");
});

Contents () Search for all child nodes (including text nodes) within the matching element ). If the element is an iframe, search for the document content Search for all text nodes and bold them:
$ ("P"). contents (). not ("[nodeType = 1]"). wrap ("<B/> ");
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.

Search for the following span element from all paragraphs. Same as $ ("p span:
$ ("P"). find ("span ")
Next ([expr])

Obtains the Element Set of the Peer element next to each element in a 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.

Find the peer element next to each paragraph:
$ ("P"). next ()
NextAll ([expr])

Find all peer elements after the current element.

You can use expressions to filter data.

Add a class to all elements after the first div:
$ ("Div: first"). nextAll (). addClass ("after ");
OffsetParent () Returns the first parent class with a location (such as relative or absolute )).  
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.

Find the parent element of each paragraph:
$ ("P"). parent ()
Parents ([expr]) Obtains a set of elements (excluding the root element) that contain all the ancestor elements matching the elements ). You can use an optional expression to filter data. Find all the ancestor elements of each span element:
$ ("Span"). parents ()
Prev ([expr])

Obtains the Element Set of the first peer element next to each element in a matched 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.

Find the first peer element next to each paragraph:
$ ("P"). prev ()
PrevAll ([expr])

Find all peer elements before the current element

You can use expressions to filter data.

Add a class to all previous divs:
$ ("Div: last"). prevAll (). addClass ("before ");
Siblings ([expr]) Obtains the element set of all unique peer elements of each element in a matched element set. You can use an optional expression for filtering. Find all peer elements of each div:
$ ("Div"). siblings ()

3. Connect Chaining

Name Description Example
AndSelf ()

Add the previously selected element to the current element

For filtered or searched elements, it is useful to add the previously selected elements.

Select All div and internal p, and add the border class:
$ ("Div"). find ("p"). andSelf (). addClass ("border ");
End () Back to the last "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 '.

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

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

Author: Zhang Ziqiu
Source: http://www.cnblogs.com/zhangziqiu/

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.