jquery for the Front-End Learning series

About jquery

Introduction to jquery

Find a specific element, then add a style to it, create a child element, and so on

jquery Basic Selector

• Id

ID selector: finds the specified element based on the given ID

Grammar

$ ("div");

• . class

Class Selector: finds the specified element according to the class name

Grammar

$ (". class");

• Selector1,selector2,selectorn

After merging the elements of each selector to return together, you can specify as many selectors and merge the matched elements into one result

Grammar

$ ("selector1,selector2,selectorn")

HTML code

<Divclass= "notme">Div class= "notme"</Div><Divclass= "myClass">Div class= "myClass"</Div><spanclass= "myClass">Span class= "myClass"</span>

jquery Code

$ (". myClass");

Results

<class= "myClass">div class= "myClass"</Div > <  class= "myClass">span class= "myClass"</span  >

jquery Hierarchy Selector

• Ancestor descendant

Descendant selector: matches all specified descendant elements under a given parent element (as long as it is included under the parent Element)

Grammar

$ ("ancestor  Descendant")

HTML code

<form>  <label>Name:</label>  <inputname= "name" />  <fieldset>      <label>Newsletter:</label>      <inputname= "newsletter" /> </fieldset></form><inputname= "none" />

jquery Code

$ ("form Input")

Results

<name= "name"/><name= " Newsletter "/>

• Parent > Child

Child selector: matches all specified child elements under the given parent element (it is different from the background element, look at the code carefully)

Grammar

$ ("parent > Child")

HTML code

<form>  <label>Name:</label>  <inputname= "name" />  <fieldset>      <label>Newsletter:</label>      <inputname= "newsletter" /> </fieldset></form><inputname= "none" />

jquery Code

$ ("form > Input")

Results

<name= "name"/>

• Prev + Next

Prev Method: matches all next elements immediately following the Prev element

Grammar

$ ("prev + Next")

HTML code

<form>  <label>Name:</label>  <inputname= "name" />  <fieldset>      <label>Newsletter:</label>      <inputname= "newsletter" /> </fieldset></form><inputname= "none" />

jquery Code

$ ("label + Input")

Results

<name= "name"/><name= " Newsletter "/>

• Prev ~ siblings

Prev method: matches all prev sibling elements

Grammar

$ ("prev ~ Siblings")

HTML code

<form>  <label>Name:</label>  <inputname= "name" />  <fieldset>      <label>Newsletter:</label>      <inputname= "newsletter" /> </fieldset></form><inputname= "none" />

jquery Code

$ ("form ~ Input")

Results

<name= "none"/>

jquery Basic Filter

jquery for the Front-End Learning series