Home > Web Front-end > JS Tutorial > body text

Sharing examples of common js attributes

小云云
Release: 2018-02-28 11:33:06
Original
1292 people have browsed it

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!