Learning notes for jquery 2

JQuery Learning Notes

Day of

Chapter the selector

Class Selector

Syntax structure:
$ (". ClassName")

there's no class selector in JavaScript, so it 's easier to use jQuery at this point.

A wildcard selector

Syntax structure:
JQuery("*")

The following code, for example, matches all the elements inside the body .

<script type= "Text/javascript" >

$ (function () {

$ ("*"). CSS ("Color", "red");

Alert ("Hello");

}

)

</script>

Note: In the book said can be added before the body to indicate the range, but the actual operation will be problematic, I added the body There is no way to show the effect I want to, But if I don't have a body , it will show the effect I want, and he can do it in another way, as follows:
<script type= "Text/javascript" >

$ (function () {

var all=document.getelementsbytagname ("*");

$ ("All"). CSS ("Color", "red");

Alert ("Hello");

}

)

</script>

Group Selector

Syntax structure:

JQuery("selector1,selector2,selectorn);

In fact, the group selector is the combination of the above four selectors

2.2 Hierarchy Selector

Include selector

Syntax structure:
JQuery("contains selectors are included selectors")

Role: He is able to act on all included selectors under the selector, regardless of whether the selector is a child or child node, and the only thing that doesn't work is the outside node.

Note: When there are multiple CSS , use a colon between the attribute and the attribute value, the attribute and the attribute should be separated by commas, all the attributes are enclosed in curly braces;

<script type= "Text/javascript" >

$ (function () {

$ ("form input"). CSS ({"Border": "Groove 2px Red",

"Background": "Blue"});

}

)

</script>

Child Selector

Syntax structure:
jquery ("parent selector > sub selector")

Role: He can only act on the child nodes of the first layer under the Father node, do not function child nodes, and do not use the nodes outside

Adjacent selector

Syntax structure:

JQuery("adjacent previous selector + adjacent next selector")

Function: He can only be used as a selector for the same sibling as his neighbor, but to ensure that the previous selector is unique, it is not possible to determine which selector you are looking for is behind a selector.

Brother Selector

Syntax structure:
JQuery("adjacent previous selector ~ Sibling selector")

Function: It can be used for all selectors in the back of his or her peers, so that his role will be stronger than the adjacent selector

2.3 Simple Pseudo-class selector

Special position Selector

:Firs represents the first element of a matching collection

: Last represents the final element of a matching collection

:eq (Index) represents the index element in the matching collection , and note that the eq is calculated starting from 0

Specifying a range Selector

:even indicates that the match index value is even, that is, the number of rows is the cardinality

:Odd indicates that the match index value is odd, that is, the number of rows is even

:gt (index) indicates an element that matches a value that is greater than index

:LT (index) indicates an element that matches less than the index value is index

Exclude selectors:
Syntax structure:
JQuery("selector1:not(selector2)");

function to match elements other than Selector2.

Special selectors:

JQuery ("selector:animated") is used to match animated elements

JQuery("selector:header") is used to match the caption element

2.4 pseudo-class selectors related to content

Matches the element containing the given text

Syntax structure:

JQuery("selector:contains(text)");

Function: It is able to set the contents of the tag containing the text into the pattern you define according to the specified text.

Note: Thecontains filter function must use single quotation marks to contain the keyword, otherwise JQuery will not recognize

Match contains element selector

Syntax structure:
JQuery("Selector:has (Selector2)");

Function: Is able to filter out the selector selector inside the selector2 selector, so Selector2 must be included in the Selector selector inside, otherwise it will not work.

Include Judgment selector

Syntax structure :
Jquery ("Selector:empty"): action: Filter out elements containing empty content in matching elements

Jquery ("Selector:parent"); function: Filters out elements that contain non-empty content in matching elements

2.5 pseudo-class selectors related to element display states

Syntax structure:

Jquery ("Selector:hidden"): Action: Filters out all invisible elements in a matching element

Jquery ("selector:visible"); function: Filters out all visible elements in the matching element

Note: He is hidden rather than hide,hide is a function name easily confused

2.6 for class selectors that match child elements

Syntax structure:
:nth-child function: matches the nth or even odd number under its parent element

His specific usage is as follows:

:Nth-child (even);

Note: The biggest difference betweenhim and the eq () is that theeq is calculated starting from 0 , but the nth-child is from 1 start counting.

: First-child function: Matches the first child element for each parent element

: Last-child function: Matches the last child element for each parent element

: Only-child Action: The parent element contains other elements that will not be matched

Note: He is the element that matches the parent element, so it must be an element in the parent element, otherwise it cannot be matched.

2.7 for class selectors related to form objects

Syntax structure:

: Form element name;

Example:input,text,submit , etc.

2,8 for class selectors related to form properties

Syntax structure:

:enabled matches all available elements

:disabled matches all elements that are not available

:checked matches all selected selected elements

:selected matches all selected option elements

2.9 Property Selector

The property selector is a matching DOM element based on the attribute and attribute values as the selection filter criteria

Learning notes for jquery 2