jQuery中:empty選擇器用法實例
本文實例講述了jQuery中empty選擇器用法。分享給大家供大家參考。具體分析如下:
此選擇器匹配所有不包含子元素或者文本的空元素。
注意:空格也屬于選擇器包含的元素。
語法結(jié)構(gòu):
此選擇器一般也要和其他選擇器配合使用,比如類選擇器和元素選擇器等等。例如:
以上代碼能夠?qū)i元素集合中的空li元素的寬度以自定義動畫的方式設(shè)置為200px。
實例代碼:
實例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
li {
list-style-type:none;
width:150px;
height:30px;
border:1px solid red;
}
.run{background-color:green;}
.static{background-color:#603;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li:empty").animate({width:"200px"});
})
})
</script>
</head>
<body>
<ul>
<li>html專區(qū)</li>
<li>div+css專區(qū)</li>
<li>Jquery專區(qū)</li>
<li>Javascript專區(qū)</li>
<li></li>
</ul>
<button>點擊查看效果</button>
</body>
</html>
實例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
li {
list-style-type:none;
width:150px;
height:30px;
border:1px solid red;
}
.run{background-color:green;}
.static{background-color:#603;}
div{
width:100px;
height:30px;
background-color:blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("*:empty").animate({width:"200px"});
})
})
</script>
</head>
<body>
<ul>
<li>html專區(qū)</li>
<li>div+css專區(qū)</li>
<li>Jquery專區(qū)</li>
<li>Javascript專區(qū)</li>
<li></li>
</ul>
<div></div>
<button>點擊查看效果</button>
</body>
</html>
由于以上代碼并沒有指定與:empty選擇器相配合使用的選擇器,所以就默認(rèn)和*選擇器配合使用,能夠?qū)⑺性刂械目赵氐拈L度以自定義動畫方式設(shè)置為200px。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
- jquery之empty()與remove()區(qū)別說明
- Jquery下attr和removeAttr的使用方法
- jquery isEmptyObject判斷是否為空對象的函數(shù)
- 得到j(luò)Query detach()后節(jié)點中的某個值實現(xiàn)代碼
- jQuery .attr()和.removeAttr()方法操作元素屬性示例
- jQuery刪除節(jié)點的三個方法即remove()detach()和empty()
- jQuery中detach()方法用法實例
- jQuery中empty()方法用法實例
- jQuery使用empty()方法刪除元素及其所有子元素的方法
- 詳解jQuery中的empty、remove和detach
相關(guān)文章
jQuery實現(xiàn)中獎播報功能(讓文本滾動起來) 簡單設(shè)置數(shù)值即可
這篇文章主要介紹了jQuery實現(xiàn)中獎播報功能(讓文本滾動起來) 簡單設(shè)置數(shù)值即可,文中通過實例代碼給大家詳細(xì)介紹,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03jQuery實現(xiàn)多級聯(lián)動下拉列表查詢框
這篇文章主要為大家介紹了jQuery實現(xiàn)多級聯(lián)動下拉列表查詢框,感興趣的小伙伴們可以參考一下2016-01-01jQuery ui實現(xiàn)動感的圓角漸變網(wǎng)站導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery ui實現(xiàn)動感的圓角漸變網(wǎng)站導(dǎo)航菜單效果代碼,涉及jquery插件構(gòu)造圓角圖形及頁面過度效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08一款Jquery 分頁插件的改造方法(服務(wù)器端分頁)
分頁幾乎是每個外部程序必不可少的東西,在webform時代很多人都用過AspNetPager這個用戶控件吧,用的人之多其實就在于它的優(yōu)點2011-07-07jQuery實現(xiàn)非常實用漂亮的select下拉菜單選擇效果
這篇文章主要介紹了jQuery實現(xiàn)非常實用漂亮的select下拉菜單選擇效果,通過jQuery模擬select下拉選擇效果,并具有點擊選中下拉項進(jìn)入輸入框的功能,非常美觀實用,需要的朋友可以參考下2015-11-11