The way native JS gets elements is very messy and inconsistent, so jQuery encapsulates it and makes it standard to get elements.

1. Base selector

$(" selector ") // The selector is written to the CSS selector, but in quotesCopy the code

2. Hierarchy selector

The two most commonly used hierarchical selectors are descendant selectors and child selectors.

Base selector and hierarchy selector case code

The < body > < div > I am a div < / div > < div class = "nav" > I am nav div < / div > < p > I'm p < / p > < ul > < li > I am ul < / li > < li > I am ul < / li > < li > I am ul < / li >  </ul> <script> $(function() { console.log($(".nav")); console.log($("ul li")); }) </script> </body>Copy the code

3. Implicit iteration

  • The process of iterating through internal DOM elements (stored as pseudo-arrays) is called implicit iteration.
  • Simple understanding: to match all the elements of the loop, the implementation of the corresponding method, without us to loop, simplify our operation, convenient for us to call.
$('div').hide(); // All divs in the page are hidden, no loop operationCopy the code

4. Filter the selectors

The filter selector, as its name implies, selects all the options that meet the criteria for a filter selection. Common as follows:

Case code

</li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </ol> <script> $(function() { $("ul li:first").css("color", "red"); $("ul li:eq(2)").css("color", "blue"); $("ol li:odd").css("color", "skyblue"); $("ol li:even").css("color", "pink"); }) </script> </body>Copy the code

In addition, jQuery also has some filtering methods, similar to DOM through a node to find another node, except the parent, child, brother strengthened.

Parent () children() find() siblings() eq()

Emphasis on memory, demo code slightly.

5. Exclusivity in jQuery

For the effect of multiple choices, the idea of exclusivity: the current element sets styles, and the rest of the sibling elements clear styles.

$(this). The CSS (" color ", "red"); $(this). Siblings (). The CSS (" color ", "");Copy the code

6. Chain programming

Chain programming is designed to save code and look more elegant.

$(this).css('color', 'red').sibling().css('color', ''); 
Copy the code