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-08jQuery+jRange實(shí)現(xiàn)滑動(dòng)選取數(shù)值范圍特效
本文向大家介紹一款范圍選擇器插件jRange,它是基于jQuery的一款簡單插件。本站之前有類似文章:jQuery+CSS使用滑塊選取價(jià)格范圍,其中不太好的地方是使用了jqueryui龐大的插件庫,有興趣的朋友可以看看。下面我們來看下插件jRange的使用。2015-03-03jquery代碼實(shí)現(xiàn)多選、不同分享功能
這篇文章主要介紹了jquery代碼實(shí)現(xiàn)多選、不同分享功能,需要的朋友可以參考下2015-07-07jquery實(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-10jQuery的cookie插件實(shí)現(xiàn)保存用戶登陸信息
保存用戶登陸信息的方法有很多,本文為大家介紹的這個(gè)方法是通過cookie插件來實(shí)現(xiàn),需要的朋友可以參考下2014-04-04jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
遇到大圖片將頁面容器“撐破”的情況在進(jìn)行頁面布局時(shí)會(huì)經(jīng)常遇到吧,在本文將為大家講述使用jQuery實(shí)現(xiàn)按比例縮放大圖片,讓大圖片自適應(yīng)頁面布局2013-10-10jquery實(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