jQuery中:empty選擇器用法實(shí)例
本文實(shí)例講述了jQuery中empty選擇器用法。分享給大家供大家參考。具體分析如下:
此選擇器匹配所有不包含子元素或者文本的空元素。
注意:空格也屬于選擇器包含的元素。
語(yǔ)法結(jié)構(gòu):
此選擇器一般也要和其他選擇器配合使用,比如類選擇器和元素選擇器等等。例如:
以上代碼能夠?qū)i元素集合中的空l(shuí)i元素的寬度以自定義動(dòng)畫的方式設(shè)置為200px。
實(shí)例代碼:
實(shí)例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.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>點(diǎn)擊查看效果</button>
</body>
</html>
實(shí)例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.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>點(diǎn)擊查看效果</button>
</body>
</html>
由于以上代碼并沒(méi)有指定與:empty選擇器相配合使用的選擇器,所以就默認(rèn)和*選擇器配合使用,能夠?qū)⑺性刂械目赵氐拈L(zhǎng)度以自定義動(dòng)畫方式設(shè)置為200px。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jquery之empty()與remove()區(qū)別說(shuō)明
- Jquery下attr和removeAttr的使用方法
- jquery isEmptyObject判斷是否為空對(duì)象的函數(shù)
- 得到j(luò)Query detach()后節(jié)點(diǎn)中的某個(gè)值實(shí)現(xiàn)代碼
- jQuery .attr()和.removeAttr()方法操作元素屬性示例
- jQuery刪除節(jié)點(diǎn)的三個(gè)方法即remove()detach()和empty()
- jQuery中detach()方法用法實(shí)例
- jQuery中empty()方法用法實(shí)例
- jQuery使用empty()方法刪除元素及其所有子元素的方法
- 詳解jQuery中的empty、remove和detach
相關(guān)文章
jQuery實(shí)現(xiàn)中獎(jiǎng)播報(bào)功能(讓文本滾動(dòng)起來(lái)) 簡(jiǎn)單設(shè)置數(shù)值即可
這篇文章主要介紹了jQuery實(shí)現(xiàn)中獎(jiǎng)播報(bào)功能(讓文本滾動(dòng)起來(lái)) 簡(jiǎn)單設(shè)置數(shù)值即可,文中通過(guò)實(shí)例代碼給大家詳細(xì)介紹,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03jQuery實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)下拉列表查詢框
這篇文章主要為大家介紹了jQuery實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)下拉列表查詢框,感興趣的小伙伴們可以參考一下2016-01-01jQuery ui實(shí)現(xiàn)動(dòng)感的圓角漸變網(wǎng)站導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery ui實(shí)現(xiàn)動(dòng)感的圓角漸變網(wǎng)站導(dǎo)航菜單效果代碼,涉及jquery插件構(gòu)造圓角圖形及頁(yè)面過(guò)度效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08一款Jquery 分頁(yè)插件的改造方法(服務(wù)器端分頁(yè))
分頁(yè)幾乎是每個(gè)外部程序必不可少的東西,在webform時(shí)代很多人都用過(guò)AspNetPager這個(gè)用戶控件吧,用的人之多其實(shí)就在于它的優(yōu)點(diǎn)2011-07-07解決jquery .ajax 在IE下卡死問(wèn)題的解決方法
為什么會(huì)出現(xiàn)在IE無(wú)效化呢,從上面的解決方案可以知道是XML文件的編碼問(wèn)題,在轉(zhuǎn)化會(huì)前臺(tái)可讀時(shí)并未符合IE的XML 對(duì)象,故需要翻譯成IE兼容的對(duì)象。2009-10-10jQuery實(shí)現(xiàn)非常實(shí)用漂亮的select下拉菜單選擇效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)非常實(shí)用漂亮的select下拉菜單選擇效果,通過(guò)jQuery模擬select下拉選擇效果,并具有點(diǎn)擊選中下拉項(xiàng)進(jìn)入輸入框的功能,非常美觀實(shí)用,需要的朋友可以參考下2015-11-11