This article mainly shares with you examples of common js attributes. First, there are a few common attributes. I hope it can help everyone.
##12345678910 1112
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
$( "p" ).dblclick( function () {
<p class="line number2 index1 alt1" style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;line-height:1.8em;vertical-align:baseline;min-height:auto;white-space:nowrap;"><code class="javascript spaces" style="margin:0px;padding:0px;background:none;border:0px;float:none;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;"> $( this ).css( "color" , "green" );
})
$( "p" ).mouseenter( function () {
$( this ).text( "The mouse pointer passes through the element" );
})
$( "p" ).mouseleave( function () {
$( this ).text( "The mouse pointer leaves the element" );<br>})
$( "p" ).mousedown( function () {
$( this ).text( "Move the mouse pointer over the element and press the mouse button" );
})
$( "p" ).mouseup( function () {
$( this ).text( "When the mouse button is released on the element" );
})
$( ":text" ).focus( function () { $( this ).val( "Element gets focus" );
})
$( ":text" ).blur( function () { $( this ).val( "Element lost focus" );
})
|
Insertion method:
#1234567 891011
12
|
var i = $( "#ul1 li" ).length;
$( "#btn1 at the end of append " ).click( function () {
i++;
$( "#ul1" ).append( "<li>add" + i + "</li>" )
})
var j = 1;
$( "#btn2" ).click( function () {
j--;
$( "#ul1" ).prepend( "<li>add" + j + "</li>" )
})<br>before()
|
Removal method
# #123
|
##$("# btn4" ).click( function () { <p class="line number2 index1 alt1" style="margin:0px;padding:0px 1em;background-image:none;border:0px;float:none;line-height:1.8em;vertical-align:baseline;min-height:auto;white-space:nowrap;"><code class="javascript spaces" style="margin:0px;padding:0px;background:none;border:0px;float:none;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;"> $( "#ul1 li:first" ).remove()
})
|
remove() - Remove the selected element (and its child elements)
empty() - Remove the child element from the selected element and clear the
Parent attribute
#123
|
parent() The direct parent element of the selected element
parents() All ancestor elements of the selected element, all the way up to the root element of the document ()
parentsUntil() between the two given elements All ancestor elements of
|
Descendant attributes
## 123
|
##children() method returns all direct children of the selected element Child elements are only one level
The find() method returns the specified descendant elements of the selected element, all the way down to the last descendant<br> $( "p" ).find ( "span" );
|
Sibling attributes
## 12345678 910
|
siblings()
$( "h2" ).siblings().css({ "color" : "red" , "border" : "2px solid red" });
$( "h2" ).siblings( "p" ).css({ "color" : "red" , "border" : "2px solid red" });
next()
$( "h2" ).next().css({ "color" : "red" , "border" : "2px solid red" });
nextAll()
## $( "h2" ).nextAll();
nextUntil() //Between two given parameters All following sibling elements
$( "h2" ).nextUntil( "h6" );
The prev(), prevAll() and prevUntil() methods work similarly to the above methods, but in the opposite direction: they return the previous sibling element (along the sibling elements in the DOM tree) traverse backward, not forward).
|
Traversal filtering
## 12345678 910
|
first() method returns the first element of the selected element
$( "p p" ).first();
last() method returns the last element of the selected element.
$( "p p" ).last();
eq() method returns the element with the specified index number among the selected elements. Start from 0
$( "p" ).eq(1);
filter( ) method specifies a standard. Elements that do not match this criterion are removed from the collection, and matching elements are returned.
$( "p" ).filter( ".intro" );
#not() method returns all elements that do not match the criteria. The not() method is the opposite of filter().
$( "p" ).not( ".intro" ) ;
|
Related recommendations:
What are the commonly used attributes for dividing frames and windows in HTML
Detailed introduction to common properties of CSS
Introduction to common properties in css3
The above is the detailed content of Sharing examples of common js attributes. For more information, please follow other related articles on the PHP Chinese website!