Home > Article > Web Front-end > jQuery:parent selector definition and usage_jquery

jQuery:parent selector definition and usage_jquery

WBOYOriginal: 2016-05-16 16:42:421111browse

:Definition and usage of parent selector:

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

Grammar structure:

$(":parent")

This selector is generally used in conjunction with other selectors, such as class selectors, element selectors, etc. For example:

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

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:

<!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(){ 
$("div:parent").animate({width:"300px"}) 
}) 
}) 
</script> 
</head> 
<body> 
<div>我是文本</div> 
<div></div> 
<button>点击查看效果</button> 
</body> 
</html>

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

Example 2:

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

Since the above code does not specify a selector to be used with the :parent selector, it is used with the * selector by default. Therefore, the code can set the width of elements containing text and elements in a custom animation. 300px.

Statement：

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

Previous article：Accurate understanding of various heights of jQuery windows, documents, and web pages_jqueryNext article：Accurate understanding of various heights of jQuery windows, documents, and web pages_jquery

See more

jQuery:parent selector definition and usage_jquery

Related articles