jQuery的:parent選擇器定義和用法

更新時(shí)間：2014年07月01日 11:15:51 投稿：whsnow

jQuery的:parent選擇器匹配含有子元素或者文本的元素，空格也算是含有的元素，下面有幾個(gè)示例，大家可以學(xué)習(xí)下

:parent選擇器的定義和用法:

此選擇器匹配含有子元素或者文本的元素。
注意:空格也算是含有的元素。

語法結(jié)構(gòu):

$(":parent")

此選擇器一般也要和其他選擇器配合使用，比如類選擇器和元素選擇器等等。例如:

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

以上代碼能夠?qū)⒑形谋净蛘咴氐膁iv的寬度設(shè)置為300px。
如果不和其他選擇器配合使用，則默認(rèn)狀態(tài)是和*選擇器配合使用，例如$(":parent")等同于$("*:parent")。

實(shí)例代碼:

實(shí)例一:

<!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>點(diǎn)擊查看效果</button> 
</body> 
</html>

以上代碼能夠?qū)⒑形谋净蛘咴氐膁iv的寬度以自定義動(dòng)畫的方式設(shè)置為300。

實(shí)例二:

<!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>點(diǎn)擊查看效果</button> 
</body> 
</html>

由于以上代碼并沒有指定與:parent選擇器相配合使用的選擇器，所以就默認(rèn)和*選擇器配合使用，于是代碼能夠?qū)⒑形谋竞驮氐脑氐膶挾纫宰远x動(dòng)畫方式設(shè)置為300px。

您可能感興趣的文章:

相關(guān)文章

jQuery隊(duì)列操作方法實(shí)例
這篇文章主要介紹了jQuery隊(duì)列操作方法實(shí)例,總結(jié)出了一個(gè)簡潔優(yōu)雅的隊(duì)列控制方法,需要的朋友可以參考下
2014-06-06
jQuery 點(diǎn)擊圖片跳轉(zhuǎn)上一張或下一張功能的實(shí)現(xiàn)代碼
jQuery獲取當(dāng)前鼠標(biāo)相對位置坐標(biāo)和點(diǎn)擊圖片跳轉(zhuǎn)上一張或下一張功能
2010-03-03
jQuery通過ajax快速批量提交表單數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jQuery通過ajax快速批量提交表單數(shù)據(jù)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
jQuery easyui的validatebox校驗(yàn)規(guī)則擴(kuò)展及easyui校驗(yàn)框validatebox用法
這篇文章主要介紹了jQuery easyui的validatebox校驗(yàn)規(guī)則擴(kuò)展及easyui校驗(yàn)框validatebox用法的相關(guān)資料,需要的朋友可以參考下
2016-01-01
jQuery對html元素取值與賦值的方法
這篇文章主要介紹了jQuery對html元素取值與賦值的方法，有需要的朋友可以參考一下
2013-11-11
JQuery 無廢話系列教程(一) jquery入門 [推薦]
貝殼(就是本文作者了)也屬于剛剛會(huì)用點(diǎn)JQuery的那一類型, 在學(xué)習(xí)過程中也遇到挺多問題,特別是在開始入門的時(shí)候.一直準(zhǔn)備寫些有關(guān)JQuery的文章,但又恐自己文筆及表達(dá)能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯(cuò)誤或者不合適的理解望廣大朋友直接指出批評(píng).
2009-06-06
使用veloticy-ui生成文字動(dòng)畫效果
這篇文章主要介紹了使用veloticy-ui生成文字動(dòng)畫效果及基本使用方法,需要的朋友可以參考下
2018-02-02
jquery中的sortable排序之后的保存狀態(tài)的解決方法
其實(shí)在前年的這個(gè)時(shí)候，我就有用過這個(gè)sortable組件，那時(shí)候搞了個(gè)個(gè)人網(wǎng)站（可惜后來關(guān)了），首頁就用到了這種拖拽的效果。
2010-01-01
詳解jQuery中的isPlainObject()使用方法
本篇文章給大家詳細(xì)分析了jQuery中的isPlainObject()使用方法，對此有需求的讀者們可以學(xué)習(xí)下。
2018-02-02
JQuery查找子元素find()和遍歷集合each的方法總結(jié)
下面小編就為大家?guī)硪黄狫Query查找子元素find()和遍歷集合each的方法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-03-03