suchen

Heim >Web-Frontend >js-Tutorial >Teilen Sie Beispiele für gängige js-Attribute

Teilen Sie Beispiele für gängige js-Attribute

小云云
小云云Original
2018-02-28 11:33:061374Durchsuche

In diesem Artikel werden hauptsächlich Beispiele für häufig verwendete js-Attribute vorgestellt. Ich hoffe, dass er allen helfen kann.


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() {

        $(this).css("color", "green");

})

//当鼠标指针穿过元素

$("p").mouseenter(function() {

    $(this).text("鼠标指针穿过元素");

})

//鼠标指针离开元素

$("p").mouseleave(function() {

      $(this).text("鼠标指针离开元素");<br>})

//鼠标指针移动到元素上，并按下鼠标按键

$("p").mousedown(function() {

    $(this).text("鼠标指针移动到元素上方，并按下鼠标按键");

})

//在元素上松开鼠标按钮时

$("p").mouseup(function() {

    $(this).text("在元素上松开鼠标按钮时");

})

//元素获得焦点

$(":text").focus(function() {

    $(this).val("元素获得焦点");

})

//元素失去焦点

$(":text").blur(function() {

    $(this).val("元素失去焦点");

})

　Einfügemethode:




1

2

3

4

5

6

7

8

9

10

11

12


var i = $("#ul1 li").length;

//append末尾插入

$("#btn1").click(function() {

  i++;

  $("#ul1").append("<li>add" + i + "</li>")

})

//prepend头部插入

var j = 1;

$("#btn2").click(function() {

  j--;

  $("#ul1").prepend("<li>add" + j + "</li>")

})<br>before()//元素之前<br>after()//元素之后

Entfernungsmethode




1

2

3


$("#btn4").click(function() {

     $("#ul1 li:first").remove()

})

remove() – Entfernt das ausgewählte Element (und seine untergeordneten Elemente)

empty() – Entfernt das untergeordnete Element vom ausgewählten Element und löscht das übergeordnete Attribut



1

2

3

1

2

3


parent() 被选元素的直接父元素

parents() 被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)

parentsUntil()介于两个给定元素之间的所有祖先元素

parent() Die direkte übergeordnetes Element des ausgewählten Elements

parents() Alle Vorfahrenelemente des ausgewählten Elements bis hin zum Stammelement des Dokuments (<html>)

parentsUntil() Alle Vorfahrenelemente zwischen zwei gegebenen Elementen

Nachkommende Eigenschaften




1

2

3


children() 方法返回被选元素的所有直接子元素 只一级　　

find() 方法返回被选元素的指定后代元素，一路向下直到最后一个后代<br> $("p").find("span");//

后代的所有 元素
 $("p").find("*");// 

的所有后代

Geschwisterattribute




1

2

3

4

5

6

7

8

9

10


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()//介于两个给定参数之间的所有跟随的同胞元素

     $("h2").nextUntil("h6");

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

Traversalfilter




1

2

3

4

5

6

7

8

9

10


first() 方法返回被选元素的首个元素

    $("p p").first();

 last() 方法返回被选元素的最后一个元素。

     $("p p").last();

eq() 方法返回被选元素中带有指定索引号的元素。从0开始

    $("p").eq(1);

filter() 方法规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

    $("p").filter(".intro");

not() 方法返回不匹配标准的所有元素。not() 方法与 filter() 相反。

    $("p").not(".intro");

Verwandte Empfehlungen:

Welche Attribute werden häufig zum Unterteilen von Frames in HTML verwendet?

Detaillierte Einführung in allgemeine CSS-Attribute

Einführung in allgemeine Attribute in CSS3

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für gängige js-Attribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css css3 html Filter 指针 Length var append JS function dom this border li
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der asynchronen JS-ProgrammierbeispieleNächster Artikel：Detaillierte Erläuterung der asynchronen JS-Programmierbeispiele

In Verbindung stehende Artikel

Mehr sehen