jquery Traversal Selector-Random collation

I cut a picture from the world view:

Let's talk about it in detail. These selectors.

The 1.add () method adds an element to the collection of matching elements. Example:

. Add (selector)

$ ("div"). Add ("P") . CSS ("Background", "yellow"), add a P element to the Div, and set his background.

2.andSelf () Listen to name all know is include oneself. Example:

<ul>   <li>list Item 1</li>   <li>list item 2</li>   <li class= "Third-item" >list Item 3</li>   <li>list Item 4</li>   <li>list Item 5</li></ul>

$ ("Li.third-item"). Nextall (). Andself (). CSS ("Background-color", "Red"); The result is that the project 3,4,5 has a red background

$ ("div") .children(".selected") . CSS ("Color", "blue"), and//find child elements of all div with the class name "selected" and set it to blue:

$ (document). Bind ("click", Function (e) {    $ (e.target) .closest("li") . Toggleclass ("Hilight");  });

$ ("P") .contents() . Filter (function () {return this.nodetype! = 1;}). Wrap ("<b/>");//Find all the text nodes in the paragraph and wrap them in bold labels

The 6.each () method specifies the function to run for each matching element.

$ ("button"). Click (function () {  $ ("Li"). each (function () {    alert (the. text ())  }); /output text for each LI element

$ ("P"). FIND ("span") .end() . CSS ("Border", "2px red Solid");//Select all paragraphs, locate the span elements in these paragraphs, and then revert them to paragraphs and set the paragraph to a two-pixel red border

The 8.eq () method assigns a matching element set reduction value to one on index

$ ("body"). Find ("div") .eq(2) . addclass ("blue");//By adding the appropriate class to the Div for index 2, turn it blue

$ ("div"). CSS ("Background", "#c8ebcc")  .filter(".middle")  . CSS ("Border-color", "Red");

$ ("P") .find("span") . CSS (' Color ', ' red ');//search for descendant span elements in all paragraphs and set their color to red

$ ("P span") .first() . AddClass (' highlight ');//Highlight the first span in a paragraph

$ ("ul"). Append ("<li>" + ($ ("ul") .has("li") . Length? "Yes": "No") + "</li>"); $ ("ul") .has("li") . addclass ("full");

var isformparent = $ ("input[type= ' checkbox ']"). Parent () .is("form") ; $ ("div"). Text ("isformparent =" + isformparent);//Return False because the parent element of the INPUT element is a P element

$ ("P span") .last() . AddClass (' highlight ');//Highlight the last span in a paragraph

$ ("P"). Append ($ ("input"). .map(function(){  return $(this).val();}) get (). Join (","));//Build a list of all values in the form

$ ("P") .next(".selected") . CSS ("Background", "yellow");//Find the next sibling element for each paragraph, select only the paragraph with the class named "Selected"

$ ("Div:first") .nextAll() . addclass ("after");//Find all class names after the first div and add class names to them

$ ("#term-2") .nextUntil("dt") . CSS ("Background-color", "Red"), var term3 = document.getElementById ("term-3"); $ ("#term-1") .nextUntil(term3, "dd") . CSS ("Color", "blue");

$ ("P"). Not ("#selected")//remove the paragraph with the ID "selected" from the collection that contains all the paragraphs

$ (' li.item-a '). OffsetParent (). CSS (' background-color ', ' red ');//Set the background color of the nearest-positioned parent element of the Li element with the class name Item-a

$ ("P").parent(".selected")//查找每个段落的带有 "selected" 类的父元素

$ ("B").parents()//查找每个 b 元素的所有父元素

$ ("li.item-a") .parentsUntil(".level-1")  . CSS ("Background-color", "Red"), $ ("li.item-2") .parentsUntil( $("ul.level-1"), ".yes" )  . CSS ("Border", "3px solid Blue"); /Find the ancestor elements of <li class= "Item-a" > until <ul class= "Level-1", and set them to a red background. Also, find the ancestor elements of <li class= "Item-2" > with all the classes named "Yes" until <ul class= "Level-1", and set the blue border for them.

$ ("P").prev(".selected")//检索每个段落，找到类名为 "selected" 的前一个同胞元素

$ ("Div:last") .prevAll() . addclass ("before");//Locate all the div before the last div and add classes for them

$ ("#term-2") .prevUntil("dt") . CSS ("Background-color", "Red"), var term1 = document.getElementById (' term-1 '); $ ("#term-3") .prevUntil(term1, "dd") . CSS ("Color", "green");
Find <dt id= "Term-2" > before the sibling elements until the previous <dt> and set them to red. Also, look for <dt id= "term-3" > Front <dd> compatriots until <dt id= "Term-1", and set them to blue text

$ ("P").siblings(".selected")//查找每个 p 元素的所有类名为 "selected" 的所有同胞元素

$ ("P") .slice(0, 2) . Wrapinner ("");//Select all paragraphs and then reduce the selection to include only the first and second paragraphs

Over~ is very practical ~

jquery Traversal Selector-Random collation