JavaScript (15) jQuery Selector

JQuery Selector
The selector allows operations on element groups or individual elements.
The jQuery element selector and attribute selector allow you to select HTML elements by Tag Name, attribute name, or content.
In html dom terminology, a selector allows operations on a DOM element group or a single DOM node.

JQuery element Selector
JQuery uses the CSS selector to select HTML elements.
$ ("P") Select

Element.
$ ("P. intro") select all class = "intro"

Element.
$ ("P # demo") select all id = "demo"

Element.

JQuery attribute Selector
JQuery uses an XPath expression to select an element with a given attribute.
$ ("[Href]") selects all elements with the href attribute.
$ ("[Href = '#']") Select an element whose values of all href attributes are equal.
$ ("[Href! = '#'] ") Select all elements whose href value is not equal.
$ ("Your href00000000'.jpg ']") select all elements whose href values end with ". jpg.

JQuery CSS Selector
The jQuery CSS selector can be used to change the CSS attributes of HTML elements.
The following example changes the background color of all p elements to Red:

$("p").css("background-color","red");

After reading the above, I don't know what the selector is... Come to your own understanding and summary...
Selector Syntax: $ ("......")

It can also be classified as follows:
① Select all elements: $ ("*") (note that there is an asterisk in it)
② Select class: $ (". class Name") (note that there is a "point" above)
③ Select id: $ ("# id name ")
④ Selected element: $ ("tag name ")
⑤ Select attributes: $ ("[attribute name]")
⑥ Select elements based on features: $ (": feature") (note that there is a "colon" Before)

These six selectors can be combined to generate more selectors.
For example, ④ ② and ④
It can also be: ④ ⑥, ④ ② (the same type should be separated by "spaces", such as: $ ("ul li: first"), $ ("div # intro. head "))

Select the current HTML element: $ (this)

Nested Selector
For example, select other elements in the specified tag: $ (Tag name *)
(Note that other tags must be included in the specified tag; otherwise, the results will not work. The truth is that I name my dog a puppy, but actually my dog doesn't exist at all ...)

If you want to further select the css attribute: $ ("......" ).css ("......")

$ ("[Attribute name = '#']") Select an element whose values are equal.
$ ("[Attribute name! = '#'] ") Select an element whose values are not equal.
$ ("Your name is your '.jpg ']") Select the elements whose values end with ". jpg.

Tip:
According to practice, Some browsers use * at a low processing speed.
Do not use the ID name starting with a number! Some browsers may have problems.
Do not use a class name starting with a number! Some browsers may have problems.

For more information, see the jQuery selector reference manual.

This article is short, but it actually takes a lot of time. I have read many examples. I don't think you should read it all at the moment. If you want to use it later, you can learn it at the same time and then add it here.

Finally, paste the code in a segment, as if the code is vivid and intuitive... (Too lazy, I just want to paste a hodgedge of code (involving overwrite )...)

<script type="text/javascript" src="jquery-1.11.1.js"></script><script type="text/javascript">  $(document).ready(function(){    $(":header").css("background-color","grey");    $("div *").css("background-color","blue");    $("p *").css("background-color","purple");    $("p").css("background-color","yellow");    $("ul li:first").css("background-color","pink");    $("div#choose .introtoo").css("background-color","green");}); </script>Welcome to My Homepage
My name is Donald
I live in Duckburg
My best friend is Mickey
My name is Donald, too
Who is your favourite:
 
 

  
  
Goofy
  
  
Mickey
  
  
Pluto
 
 

Result:
Welcome to My Homepage

My name is Donald

I live in Duckburg

My best friend is Mickey

My name is Donald, too

Who is your favorite:

• GoofyMickeyPluto