Select operation element

$ (): Use selectorSelectDOM element andCreateNew DOM elements

 

1. Select the elements to be controlled

$ (Selector, 'context of this operation ')

The context parameter can be a reference to a DOM element, a string containing the jQuery selector, or a subset of the DOM tree.

 

Basic CSS selector

* Match all elements

E. Match all the elements with the tag name E.

E f matches all the elements in the tag named E. These elements are subnodes of E.

E> F matches all the elements in the tag named E, which are the direct subnodes of E.

E + F matches all the elements in the tag named E. These elements are the first sibling node after E.

E ~ F matches all the elements whose tags are named E. These elements are one of the sibling nodes after E.

E. C matches all the elements in the tag named E. These elements have the CSS class named C. If E is omitted, it is equivalent to *. C.

E # I matches all the elements named E. The id feature of these elements is I. If E is omitted, it is equivalent to * # I

E [A] matches all the elements whose tags are named E. These elements have the feature.

E [A = V] matches all the elements with the tag name E. The acharacteristic value of these elements is V.

E [A ^ = V] matches all the elements whose tags are named E. The acharacteristic values of these elements start with V.

E [A $ = V] matches all the elements whose tags are named E. The acharacteristic values of these elements end with V.

E [! = V] matches all the elements with tags named E. The afeature value of these elements is not equal to V, or there is no afeature at all.

E [A * = V] matches all the elements whose tags are named E. The acharacteristic values of these elements include

 

Position filter selector

: First matches the first element of the context.

: Last match the last element of the context

: First-child: match the first subnode of the context

: Last-child matches the last subnode of the context

: Only-child: returns all elements without sibling nodes.

: Nth-child (n) matches the nth subnode in the context

: Nth-child (even | odd) matches even or odd subnodes in the context

: Nth-child (Xn + Y) matches the subnode calculated by the provided formula in the context.

: Eve matches even elements in the context

: The odd matches the odd element in the context.

: Eq (n) matches the nth element

: Gt (n) matches the element after the nth element (excluding the nth element)

: Lt (n) matches the element before the nth element (excluding the nth element)

 

The nth-child filter starts from 1, and other selectors start from 0.

 

CSS and custom filters

: Animated

: Button

: Checkbox

: Checked

: Contains (food)

: Disabled

: Enabled

: File

: Has (selector)

: Header

: Hidden

: Image

: Input

: Not (selector)

: Parent

: Password

: Radio

: Reset

: Selected

: Submit

: Text

: Visible

 

: Not filter

Get the src image element containing dog: $ ('IMG: not (src * = "dog ")')

 

: Has filter

Find the table that contains an image element: $ ('tr: has ([src $ = ". gng"]) ')

 

2. Create a new HTML

$ ("<Div> Hello </div> ")

$ () The second parameter is used to pass the features and feature values of the created element. This parameter is a javascript object and its attributes are applied to elements as the feature names and values.

$ (Function () {$ ('', {src: 'Images/little.bear.png ', alt: 'Little Bear', title: 'I woof in your general ction', click: function () {alert ($ (this ). attr ('title '));}}). css ({cursor: 'pointer ', border: '1px solid Black', padding: '12px 12px 20px 12px', backgroundColor: 'white '}). appendTo ('body ');});

All attribute values except the Event Processing function are included in.

// Omit the call to the chained method css () and use the object attribute in the attribute parameter instead. css: {cursor: 'pointer ', border: '1px solid Black', padding: '12px 12px 20px 12px', backgroundColor: 'white '}

 

3. Manage the packaging set

Var jqobj = $ ("header"); // jQuery package set var jqobj = jQuery ("# header"); // jQuery package set, to prevent conflicts with $ of other js frameworks, you can write a few more words.

 

1. Determine the size of the packaging set

Size (): returns the number of elements in the packaging set. No parameter is set.

 

2. Get elements from the package set ① get elements through the index

// Obtain the first element var imgElement =$ ('IMG [alt] ') [0] from the package set of all  elements with the alt feature on the page;

 

Get (index): gets one or all matching elements in the wrapper set. If no parameter is specified, all elements are returned in a javascript array.

If the index parameter is provided, the elements corresponding to the index are returned. If the parameter is a negative number, search from the end and get (-1) is the last element.

 

Eq (index): Gets the elements corresponding to the index parameter in the packaging set, and returns a new packaging set containing only this element.

 

First (): gets the first element of the wrapper set, and returns a new wrapper set containing only this element. If the package is empty, an empty package is returned.

 

Last (): gets the last element of the package set, and returns a new package set that contains only this element. If the package is empty, an empty package is returned.

 

② Retrieve all elements in array form

ToArray (): returns all elements of the wrapper set as an array of DOM elements.

 

③ Retrieve the element index

Index (element): searches for the input element in the packaging set, returns its subscript in the packaging set, or returns the subscript of the first element in the packaging set at the same level node. If this element is not found,-1 is returned.

 

3. Decomposition element packaging ① add more elements to the packaging set

Add (expression, context): create a copy of the package set and add the elements specified by the expression parameter to it. Expression can be a selector, HTML clip, DOM element, or DOM element array. Context specifies the context range to narrow the search range of elements matching the first parameter.

The comma operator combines multiple selectors into one selector.

 

You can add element references or arrays composed of elements to the package set by passing them to the add () method.

// An element named someElement has been referenced $ ('IMG [alt] '). add (someElement)

 

You can also add new elements by passing a string containing HTML tags.

// Create the package set of all p in the document, and then create a <div> element and add it to the package set $ ('P '). add ('<div> nima </div> ')

 

② Organize the content of the package set

Not (expression): creates a copy of the package set and deletes elements that match the criteria specified by the expression parameter values (selector, element, array, and function. If the function is passed, each element in the package set calls this function (this specifies the current element) and deletes the elements that return true from the package set.

// Select all  elements and delete elements without the CSS keepMe class $ ('IMG '). not (function () {return! $ (This). hasClass ('keepme ');})

 

Filter (experssion): creates a copy of the package set and deletes the set of elements that do not match the criteria specified by the expression parameter value.

// Create a package set consisting of all <td> Numbers $ ('TD '). filter (function () {filter (return (this ). innerHTML. match (/^ \ d + $/)}) // select all images and apply the CSS class seeThrough, only pictures whose title feature contains dog are retained and the class thickBorder $ ('IMG ') is applied '). addClass ('secret '). filter ('[title * = dog]'). addClass ('thickborder ')

 

③ Obtain the subset of the package set

Slice (begin, end): creates a new package set that contains a continuous part of the matching set. The position where the end is not included in the first element of the slice.

Different from the get Method, slice returns the package set containing this element, and get returns the elements in the package set.

 

Has (test): creates and returns a new package set that contains only the elements of the test expression (selector element) matched by the child nodes in the original package set.

 

④ Elements of the conversion package set

Map (callback): Call the callback function for each element of the package set and collect the returned values to the jQuery object instance. If a call to the callback function returns null, the corresponding entries are not included in the final returned set. The function receives two parameters: the subscript of an element in the set and the element itself.

// Collect all <div> IDs on the page to the javascript array var allIds =$ ('div '). map (function () {return if ($ (this ). id = undefind )? Null: this. id;}). get ();

Because the returned value is an array encapsulated by jQuery, get () is used to process the returned object to obtain the basic array.

 

⑤ Traverse elements of the package set

Each (iterator): all elements in the variable matching set, and calls the passed iteration function for each element.

// Set the attribute values of all elements in the matching set $ ('IMG '). each (function () {this. alt = 'This. Id '});

 

4. Use the link to get the package set

Children subnode

Closest, a single near ancestor element

Contents a package set consisting of the content of each element, including text nodes (often used to obtain the content of the <iframe> framework)

Next, each package element is followed by a sibling element (does not contain duplicate elements)

NextAll all the same level elements after each packaging element

NextUntil a package set consisting of all the same-level elements after each package element until an element that matches the selector is encountered, but does not include this element

OffsetParent: the parent element closest to the first element in the packaging set. Relative or absolute positioning is used.

Parent direct parent element for each packaging element (excluding duplicate elements)

All parent elements (excluding duplicate elements) of each packaging element also contain all ancestor elements on it, but not the root element.

ParentsUnitil each packaging element consists of all the ancestor elements until an element that matches the selector is encountered, but does not include this element. If the selector parameter is not matched or omitted, all ancestor elements are selected.

Prev peer element adjacent to each packaging element (does not contain duplicate elements)

PrevAll all the same level elements before each packaging element

PrevUntil the peer element next to each packaging element until an element that matches the selector is encountered, but does not include this element. If the selector parameter is not matched or omitted, select all the following sibling elements.

Siblings all same-level elements of each packaging element (excluding duplicate elements)

 

5. More methods to process the package set

Find (selector): returns a new package set that contains all descendant element parameters of the element in the original package set that matches the input selector expression.

 

Is (selector): determines whether an element in the packaging set matches the input selector expression. If at least one element matches the input selector, true is returned; otherwise, false is returned.

 

6. Manage the jQuery chain

End (): rolls back the current package set to the previous returned package set.

// Return the image set with the title feature. Call end () and then roll back to the previous package set and use the addClass () method $ ('IMG '). filter ('title '). hide (). end (). addClass ('animage ');

 

AndSelf (): merge the first two packages in the method chain.

// Create the third packaging set, which is the union of the <div element> and its descendant  elements. // <div> there are CSS class a and c, the  values of these elements are Class B and Class c $ ('div '). addClass ('A '). find ('IMG '). addClass ('B '). andSelf (). addClass ('C ');

 

Select operation element