jQuery的:parent選擇器定義和用法
:parent選擇器的定義和用法:
此選擇器匹配含有子元素或者文本的元素。
注意:空格也算是含有的元素。
語法結(jié)構(gòu):
$(":parent")
此選擇器一般也要和其他選擇器配合使用,比如類選擇器和元素選擇器等等。例如:
$("div:parent").animate({width:"300px"})
以上代碼能夠?qū)⒑形谋净蛘咴氐膁iv的寬度設(shè)置為300px。
如果不和其他選擇器配合使用,則默認狀態(tài)是和*選擇器配合使用,例如$(":parent")等同于$("*:parent")。
實例代碼:
實例一:
<!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>
以上代碼能夠?qū)⒑形谋净蛘咴氐膁iv的寬度以自定義動畫的方式設(shè)置為300。
實例二:
<!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>
由于以上代碼并沒有指定與:parent選擇器相配合使用的選擇器,所以就默認和*選擇器配合使用,于是代碼能夠?qū)⒑形谋竞驮氐脑氐膶挾纫宰远x動畫方式設(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的實現(xiàn)方法
- PHP中子類重載父類的方法【parent::方法名】
- php實現(xiàn)parent調(diào)用父類的構(gòu)造方法與被覆寫的方法
- getcwd cannot access parent directories錯誤解決方法
- jQuery中parent()方法用法實例
- Maven最佳實踐之一個好的parent依賴基礎(chǔ)
相關(guān)文章
jQuery+jRange實現(xiàn)滑動選取數(shù)值范圍特效
本文向大家介紹一款范圍選擇器插件jRange,它是基于jQuery的一款簡單插件。本站之前有類似文章:jQuery+CSS使用滑塊選取價格范圍,其中不太好的地方是使用了jqueryui龐大的插件庫,有興趣的朋友可以看看。下面我們來看下插件jRange的使用。2015-03-03在jQuery ajax中按鈕button和submit的區(qū)別分析
昨天在使用jQuery ajax的post方法進行頁面?zhèn)髦?,無刷新獲取數(shù)據(jù)展示,弄了半天就是沒有效果,看了半天也沒有語法錯誤,最后才終于明白問題出在哪里2012-10-10jQuery的cookie插件實現(xiàn)保存用戶登陸信息
保存用戶登陸信息的方法有很多,本文為大家介紹的這個方法是通過cookie插件來實現(xiàn),需要的朋友可以參考下2014-04-04jQuery實現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
遇到大圖片將頁面容器“撐破”的情況在進行頁面布局時會經(jīng)常遇到吧,在本文將為大家講述使用jQuery實現(xiàn)按比例縮放大圖片,讓大圖片自適應(yīng)頁面布局2013-10-10使用jQuery實現(xiàn)input數(shù)值增量和減量的方法
這篇文章主要介紹了使用jQuery實現(xiàn)input數(shù)值增量和減量的方法,實例分析了Bootstrap TouchSpin插件的用法,是非常實用的技巧,需要的朋友可以參考下2015-01-01