Find the parent element, child element, append element, insert element and delete element in jquery

jquery is powerful, and it has a lot to do with syntax that is compatible with CSS selectors when acquiring objects. And it's compatible with the CSS3 selector, and it's a lot more.

So the jquery selector becomes a lot more powerful. On the most basic there are the following four:

$ (' * ') matches all elements of the page

$ (' #id ') ID Selector

$ ('. class ') class selector

$ (' element ') tag Selector

$ (' e[attr] ') contains attribute attr element E

$ (' e[attr=value] ') attribute attr=value element E

Find the parent element in jquery

. Closest ()

Closest first checks whether the current element matches, and if so, returns the element itself directly. If it does not match, look up the parent element, one layer at a level, until the element that matches the selector is found. Returns an empty jquery object if no matching element has been found

<ul class= "Ulcss" ><li class= "ItemA" >a</li><li class= "Itemb" >B</li></ul>< Script>$ (' Li.itema '). Closest (' ul '). CSS (' background-color ', ' red '); </script>

Here, $ (' Li.itema '). Closest (' ul ') gets <ul class= "ulcss" > This element

. Parent ()

Parent () finds only one layer up, which returns a unique parent element. If the selector selects multiple objects (such as $ ("div"). Parent (), where the selector $ ("div") returns all the div on the page, or if there are multiple div on the page, that is, the selector $ (' div ') is the selection of multiple objects), then the parent element array is returned.

For example: $ ("div"). Parent () returns the parents of all DIV elements on the page, and the result is an array. If you need to continue to select within this array, you can use $ ("div"). Parent ("#id"), $ ("div"). Parent (". ClassName")

. Parents ()

The parents () method is not to look up only one layer, but to look up one layer at a level until all the matching elements are returned. That is, it looks for all the ancestor elements of the jquery object that conform to the selector, but does not include the element itself.

$ ("p.selected"). Parents ("div"). CSS ("Border", "2px red Solid") will look for all the ancestor Div elements of the P element of the CSS class selected. Then add the border attribute "2px red solid" to these div elements

So the difference between parents () and closest ()

1. Parents () begins to match elements from the parent, while closest () starts from itself

2. Parents () finds all the parent elements up to the root element. All of these results are then placed in a temporary set and filtered by the rated conditions.

Closest () looks up from its own element and stops until a valid matching element is found.

3. The value of the element returned by parents () can be 0, 1, or more. The closest () result return value is only 0 or one

Find child elements in jquery

. Children ()

The. Children () method and the. Parent () method (note not parents ()) correspond

Children is the child's meaning in English, so it only has to be traced down one layer .

The Children () method returns all the immediate child elements of the selected element, and the method only traverses the DOM tree one level down.

such as $ ("div"). Children () returns all the immediate child elements of each div on the page.

. Find ()

The Find () method is used to find the descendant elements of the specified element, all the way down to the last descendant Note: Find () finds all descendant elements of the current element

$ (' ul '). "Find (' Li '). css (' background-color ', ' red ') first find all the UL elements on the page, and then find all the descendants of the UL element under the LI element, give them a background color-red

Another example is $ ("#table1"). Find ("TD") and $ ("#table1 TD") effects are the same.

$ ("div"). Find ("*") returns all descendant elements of <div>.

The basic method in jquery

. Ready (Handler)

The method to execute after the document is loaded, as distinct from window.onload

Find the parent element, child element, append element, insert element and delete element in jquery