jquery Learning Note (ii): This related questions and selectors

Previous section of the problem, about this issue, first to solve.

This is a related issue

What is this referring to?

This should be better understood, this is the DOM object that refers to the current operation.

In jquery, this can be used for a single object or for multiple objects.

$ (' btn '). Click (function () {    alert (this.innerhtml);  A single object, this refers to a DOM object with the current ID of btn}), and $ (' div '). each (function (index) {    alert (this.innerhtml);  Multiple objects, this refers to the DOM object indexed as index in the current loop});

What is the difference between this and $ (this) in jquery?

What is the difference between this and $ (this) in jquery?

$ ("div"). each (the function (index) {     alert (this));  [Object Object] jquery Object     alert (this);    [Object Htmldivelement] Dom object});

It can be observed that this refers to a DOM object, and $ (this) refers to the jquery object that wraps the current DOM object.

jquery Selector

The previous section also analyzes that one of the biggest contributors to jquery is the convenience of getting DOM elements and manipulating DOM elements.

Let's look at a few simple examples:

$ (' div ');  Select all DOM elements tagged as div $ (' #info ');  Select the DOM element with ID info $ (' div>p ');  Select the DOM element labeled P in the subset tag under all div tags for $ (' input[placeholder*= "info"]);  Gets all the input tags in the attribute placeholder value that contains the Info field in the DOM element $ (' p:odd ');  Gets all elements labeled p to be pressed into the stack, selecting the DOM element with an odd index value

As you can see, there are a number of options for you to get the object you need, which is a primer and gives us a general impression of the jquery selector. Now think from the developer's point of view: How to choose the DOM element you want.

1. The first thing you can think of is to get the element with the specified ID and manipulate it.

$ (' #info ');  Get an element with ID info

2. Since the element with the specified ID can be obtained, it is also possible to get the element of the specified class.

$ ('. Info ');  Get the element with class info

3. Sometimes a series of elements with the same classname are encountered, and there is no way to differentiate each other from each other.

<! DOCTYPE html>
At this point, if I want to get the first of these series of elements:
$ ('. Info:first '). Val ();  Gets the value of the first element in a series of elements class info, which is 0
I want to get the last of these series of elements:
$ ('. Info:last '). Val ();  Gets the value of the last element in a series of elements class info, which is 4
What about an arbitrary element?
$ ('. INFO:EQ (2) '). Val ();  Gets the value of the element indexed as 2 in a series of elements class info, which is 2 (index starting from 0)
It seems convenient to choose a single element, so what if you choose a complex element that meets certain criteria? For example, select the last three elements of this set of elements:
$ ('. INFO:GT (1) ');  Gets an object in a series of elements of class info that has an index greater than 1, namely 2,3,4$ ('. INFO:LT (2) ');  Gets the object with index less than 2 in a series of elements class info, i.e. 0,1
Select an odd-numbered element in a series element (as if it's rarely done, but jquery also gives us a selector)
$ ('. info:odd ');  Gets an object that is indexed to odd (1,3) in a series of elements of class info, that is, 1,3
$ ('. Info:even ');  Gets an even (0,2,4) object indexed in a series of elements of class info, that is, 0, 2, 4
4. For example, there are a series of link elements, but they do not have a unique ID identifier, and there is no classname distinguish between the elements only the href is inconsistent, how to choose the required elements?
<! DOCTYPE html>
For example, I want to select a tag element with an HREF attribute:
$ (' a[href] ');  Select the a tag with the href attribute, which is
Select the A-label element with an HREF attribute value of info:
$ (' a[href= ' info "]);  Select the a tag with an href attribute of info, which is 1
Select the href zodiac value of the A tag element that begins with info:
$ (' a[href^= ' info "]);  Select the a tag with an HREF attribute value that begins with info.
Select the A-label element that has the tion end of the href attribute value:
$ (' a[href$= ' tion "]);  Select a label with the tion end of the href attribute value, which is 2
Select the A-label element with the FO field in the href attribute value:
$ (' a[href*= ' fo "]);  Select the a tag with the HREF attribute value that contains the FO
Of course, you can also reverse select a-tag element that does not contain info in the href attribute value:
$ (' a[href!= ' info "]);  Select a label with an HREF attribute value that does not contain info, which is 3
5. There are also situations that require us to select the appropriate element based on the contents of the DOM element.
$ (' Div:contains (' info ') '); Select the element in the DIV tag that contains the info field
6. Now that we have identified the element by specifying the ID, class, or the specified index value, attribute value, let's change the angle, is it possible to determine the element from the relationship between the elements?
First Unified Name:
Sibling element: That is, the current element is at the same level.
<div>    <p>0</p>  //Current two elements labeled P are at the same level, belonging to sibling elements    <p>1</p></div>
Parent element: The immediate upper-level element of the current element.
Ancestor element: That is, all the upper elements of the current element.
Child element: The immediate child-level element of the current element.
Descendant elements: That is, all child layer elements of the current element.
<div id= ' ancestor ' >    <div id= ' father ' >  //The parent element of the element labeled P is an element with an ID of father, the ancestor element is an element with an ID of father and ancestor          the  child element of the <p><span>0</span></p>//ID father element is the element labeled P, and the descendant element is the element labeled P and span            <p >1</p>    </div></div>
Once you have a good relationship name, you will not feel confused about the relationship between the elements.
Now you have the following code:
<form>    <label>Name:</label>    <input name= "Name"/>    <fieldset>        <label>Newsletter:</label>        <input name= "Firstletter"/>
<input name= "Secondletter"/>
    </fieldset>    <input name= "None"/> </form>
Select all the child input elements labeled form:
$ (' form>input '); Select all the tags of the element under the from to be a child element of input, that is, name= "name", name= "none" element
Select all descendant input elements that are labeled as a form:
$ (' form input '); Select all the tags in the element labeled from as input descendant elements, i.e. name= "name", name= "None", Name= "Firstletter", name= "Secondletter" element
You can also select a sibling element that meets the criteria (the first of the sibling elements):
$ (' label+input '); Select the first of the elements of the label as a label in the element labeled input, that is, the element name= "name", name= "Firstletter"
You can also select all sibling elements that match the criteria:
$ (' label~input '); Select the element labeled as label, all elements of input, i.e. name= "name", Name= "Firstletter", name= "Secondletter", name= "none" element
Select the element in the descendant element that contains the selected element:
<div>    <p><span>hello</span></p></div><div>hello Again!</div >
$ (' Div:has (span) ')//Select the div element that contains the span element in all descendant elements
The above is a temporary way to get a DOM object, and by reading the jquery Handbook, it's good to think of jquery as well. In the next section, you can summarize the selectors in jquery.
jquery Learning Note (ii): This related questions and selectors