Home Web Front-end JS Tutorial jQuery selector: detailed use case of parent

jQuery selector: detailed use case of parent

Jun 23, 2017 am 11:31 AM
jquery parent use Case Selector

:The definition and usage of the parent selector:

This selector matches elements that contain child elements or text.
Note: Spaces are also considered contained elements.

Grammar structure:

1

$(":parent")

Copy after login

This selector is generally used in conjunction with other selectors, such as Class selector and Element selector, etc. wait. For example:

1

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

Copy after login

The above code can set the width of a div containing text or elements to 300px.
If not used with other selectors, the default state is to be used with the * selector, for example, $(":parent") is equivalent to $("*:parent").

Example code:

Example 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

29

<!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;

}

</style>

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

<script type="text/javascript">

$(document).ready(function(){

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

$(&quot;div:parent&quot;).animate({width:&quot;300px&quot;})

})

})

</script>

</head>

<body>

<div>我是文本</div>

<div></div>

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

</body>

</html>

Copy after login

The above code can set the width of a div containing text or elements to 300 in a custom animation.

Example 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

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;meta charset=&quot; utf-8&quot;&gt;

&lt;meta name=&quot;author&quot; content=&quot;http://www.softwhy.com/&quot; /&gt;

&lt;title&gt;蚂蚁部落&lt;/title&gt;

&lt;style type=&quot;text/css&quot;&gt;

div{

list-style-type:none;

width:150px;

height:30px;

border:1px solid red;

}

span{border:1px solid green;}

&lt;/style&gt;

&lt;script type=&quot;text/javascript&quot; src=&quot;mytest/jQuery/jquery-1.8.3.js&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

$(document).ready(function(){

$(&quot;button&quot;).click(function(){

$(&quot;*:parent&quot;).animate({width:&quot;300px&quot;})

})

})

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div&gt;我是文本&lt;/div&gt;

&lt;div&gt;&lt;/div&gt;

&lt;span&gt;大家好&lt;/span&gt;

&lt;button&gt;点击查看效果&lt;/button&gt;

&lt;/body&gt;

&lt;/html&gt;

Copy after login

Since the above code does not specify a selector to be used with the :parent selector, it is used with the * selector by default, so the code can contain text and element's width is set to 300px in a custom animated way.

The above is the detailed content of jQuery selector: detailed use case of parent. For more information, please follow other related articles on the PHP Chinese website!

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

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What software is crystaldiskmark? -How to use crystaldiskmark? What software is crystaldiskmark? -How to use crystaldiskmark? Mar 18, 2024 pm 02:58 PM

What software is crystaldiskmark? -How to use crystaldiskmark?

How to download foobar2000? -How to use foobar2000 How to download foobar2000? -How to use foobar2000 Mar 18, 2024 am 10:58 AM

How to download foobar2000? -How to use foobar2000

How to use NetEase Mailbox Master How to use NetEase Mailbox Master Mar 27, 2024 pm 05:32 PM

How to use NetEase Mailbox Master

How to use Baidu Netdisk app How to use Baidu Netdisk app Mar 27, 2024 pm 06:46 PM

How to use Baidu Netdisk app

BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange? BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange? Apr 26, 2024 am 09:40 AM

BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange?

Teach you how to use the new advanced features of iOS 17.4 'Stolen Device Protection' Teach you how to use the new advanced features of iOS 17.4 'Stolen Device Protection' Mar 10, 2024 pm 04:34 PM

Teach you how to use the new advanced features of iOS 17.4 'Stolen Device Protection'

How to use Xiaomi Auto app How to use Xiaomi Auto app Apr 01, 2024 pm 09:19 PM

How to use Xiaomi Auto app

How to use the little black box cdkey How to use the little black box cdkey Mar 12, 2024 pm 07:34 PM

How to use the little black box cdkey

See all articles