Sharing examples of common js attributes

This article mainly shares with you examples of common js attributes. First, there are a few common attributes. I hope it can help everyone.

##1 2 3 4 5 6 7 8 9 10 11 12 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"); }) //When the mouse pointer passes through the element $("p").mouseenter( function() { $(this).text( "The mouse pointer passes through the element"); }) //The mouse pointer leaves the element $("p").mouseleave(function() { $(this).text("The mouse pointer leaves the element");<br>}) //Move the mouse pointer to the element and press the mouse button $("p").mousedown(function() { $(this).text("Move the mouse pointer over the element and press the mouse button" ); }) //When you release the mouse button on the element $("p").mouseup(function() { $(this).text("When the mouse button is released on the element"); }) //Element gets focus $(":text").focus(function() { $(this).val("Element gets focus"); }) //Element loses focus $(":text").blur(function() { $(this).val("Element lost focus"); })

Insertion method:

#1 2 3 4 5 6 7 8 9 10 11 12

var i = $("#ul1 li" ).length; //Insert $("#btn1 at the end of append ").click(function() { i++; $("#ul1" ).append("<li>add" + i + "</li>") }) //prepend header insertion var j = 1; $("#btn2").click(function() { j--; $("#ul1").prepend("<li>add" + j + "</li>") })<br>before() //Before the element<br>after()//After the element

Removal method

# #1 2 3

##$( "# 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

Descendant attributes

#1 2 3

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

## 1 2 3

##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");// All elements that are descendants $("p").find ("*");// All descendants of

Sibling attributes

## 1 2 3 4 5 6 7 8 9 10

siblings() //All sibling elements of the selected element $( "h2").siblings().css({"color":"red", "border":"2px solid red"}); $("h2").siblings("p").css({"color":"red","border":"2px solid red"}); next()//The next sibling element of the selected element $("h2").next().css({"color":"red" ,"border":"2px solid red"}); nextAll()//All following sibling elements of the selected element ##​ $("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

## 1 2 3 4 5 6 7 8 9 10

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!