jQuery的:parent選擇器定義和用法
: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。
- 解析spring-boot-starter-parent簡介
- vue組件 $children,$refs,$parent的使用詳解
- bootstrap折疊調(diào)用collapse()后data-parent不生效的快速解決辦法
- PHP面向?qū)ο髮W(xué)習(xí)之parent::關(guān)鍵字
- CentOS7 禁用Transparent Huge Pages的實(shí)現(xiàn)方法
- PHP中子類重載父類的方法【parent::方法名】
- php實(shí)現(xiàn)parent調(diào)用父類的構(gòu)造方法與被覆寫的方法
- getcwd cannot access parent directories錯(cuò)誤解決方法
- jQuery中parent()方法用法實(shí)例
- Maven最佳實(shí)踐之一個(gè)好的parent依賴基礎(chǔ)
相關(guān)文章
JQuery之proxy實(shí)現(xiàn)綁定代理方法
下面小編就為大家?guī)硪黄狫Query之proxy實(shí)現(xiàn)綁定代理方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
jQuery+jRange實(shí)現(xiàn)滑動(dòng)選取數(shù)值范圍特效
本文向大家介紹一款范圍選擇器插件jRange,它是基于jQuery的一款簡單插件。本站之前有類似文章:jQuery+CSS使用滑塊選取價(jià)格范圍,其中不太好的地方是使用了jqueryui龐大的插件庫,有興趣的朋友可以看看。下面我們來看下插件jRange的使用。2015-03-03
jquery代碼實(shí)現(xiàn)多選、不同分享功能
這篇文章主要介紹了jquery代碼實(shí)現(xiàn)多選、不同分享功能,需要的朋友可以參考下2015-07-07
jquery實(shí)現(xiàn)圖片燈箱明暗的遮罩效果
這篇文章主要介紹了jquery實(shí)現(xiàn)圖片燈箱明暗的遮罩效果,有需要的朋友可以參考一下2013-11-11
在jQuery ajax中按鈕button和submit的區(qū)別分析
昨天在使用jQuery ajax的post方法進(jìn)行頁面?zhèn)髦?,無刷新獲取數(shù)據(jù)展示,弄了半天就是沒有效果,看了半天也沒有語法錯(cuò)誤,最后才終于明白問題出在哪里2012-10-10
jQuery的cookie插件實(shí)現(xiàn)保存用戶登陸信息
保存用戶登陸信息的方法有很多,本文為大家介紹的這個(gè)方法是通過cookie插件來實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
遇到大圖片將頁面容器“撐破”的情況在進(jìn)行頁面布局時(shí)會(huì)經(jīng)常遇到吧,在本文將為大家講述使用jQuery實(shí)現(xiàn)按比例縮放大圖片,讓大圖片自適應(yīng)頁面布局2013-10-10
jquery實(shí)時(shí)獲取時(shí)間的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query實(shí)時(shí)獲取時(shí)間的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
使用jQuery實(shí)現(xiàn)input數(shù)值增量和減量的方法
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)input數(shù)值增量和減量的方法,實(shí)例分析了Bootstrap TouchSpin插件的用法,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01

