jQuery中:has選擇器用法實(shí)例
本文實(shí)例講述了jQuery中has選擇器用法。分享給大家供大家參考。具體分析如下:
此選擇器匹配含有選擇器所匹配的元素的元素。
語法結(jié)構(gòu):
關(guān)于此選擇器的定義可能有點(diǎn)拗口,通俗的講就是如果一個(gè)元素含有selector(選擇器)所匹配的元素,那么此元素將被匹配。例如:
以上選擇器將匹配含有p元素的div元素。
此選擇器一般也要和其他選擇器配合使用,比如類選擇器和元素選擇器等等。例如:
以上代碼將含有p元素的div元素中的字體顏色設(shè)置為藍(lán)色。
如果不和其他選擇器配合使用,則默認(rèn)狀態(tài)是和*選擇器配合使用,例如$(":has")等同于$("*:has")。
參數(shù)列表:
實(shí)例代碼:
實(shí)例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
div
{
border:1px solid green;
height:50px;
}
span{border:1px solid 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(){
$("div:has(span)").css("border","1px solid red")
})
})
</script>
</head>
<body>
<div>我不含span</div>
<div> <span>我是span</span></div>
<button>點(diǎn)擊查看效果</button>
</body>
</html>
以上代碼能夠?qū)瑂pan元素的div的邊框顏色設(shè)置為紅色。
實(shí)例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
div
{
border:1px solid green;
height:50px;
}
span{border:1px solid 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(){
$("*:has(span)").css("border","1px solid red")
})
})
</script>
</head>
<body>
<div>我不含span</div>
<div><span>我是span</span></div>
<p><span>我是span</span></p>
<button>點(diǎn)擊查看效果</button>
</body>
</html>
由于以上代碼并沒有指定與:has選擇器相配合使用的選擇器,所以就默認(rèn)和*選擇器配合使用,所以能夠以上代碼能夠?qū)⑺泻衧pan元素的元素的邊框顏色設(shè)置為紅色。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
JQuery.validationEngine表單驗(yàn)證插件(推薦)
這篇文章主要介紹了JQuery.validationEngine表單驗(yàn)證插件(推薦)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12PageSwitch插件實(shí)現(xiàn)100種不同圖片切換效果
這篇文章主要介紹了PageSwitch插件實(shí)現(xiàn)100種不同圖片切換效果,需要的朋友可以參考下2015-07-07Jquery使用each函數(shù)實(shí)現(xiàn)遍歷及數(shù)組處理
這篇文章主要介紹了Jquery使用each函數(shù)實(shí)現(xiàn)遍歷及數(shù)組處理,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07JQuery 國(guó)際象棋棋盤 實(shí)現(xiàn)代碼
前些時(shí)候?yàn)榱耸煜?guó)際象棋的各種開局,隨手寫了一個(gè)很簡(jiǎn)單的國(guó)際象棋棋盤(實(shí)在找不到現(xiàn)成的)。2009-06-06jquery的ajax簡(jiǎn)單結(jié)構(gòu)示例代碼
這篇文章主要介紹了jquery的ajax簡(jiǎn)單結(jié)構(gòu),需要的朋友可以參考下2014-02-02JQuery實(shí)現(xiàn)簡(jiǎn)單時(shí)尚快捷的氣泡提示插件
在程序提交后,為了提高用戶體驗(yàn)我們需要驗(yàn)證并提示出錯(cuò)的位置,利用JQuery我們可以輕松實(shí)現(xiàn)氣泡提示,需要的朋友可以了解下2012-12-12jquery.cookie.js實(shí)現(xiàn)用戶登錄保存密碼功能的方法
這篇文章主要介紹了jquery.cookie.js實(shí)現(xiàn)用戶登錄保存密碼功能的方法,結(jié)合實(shí)例形式詳細(xì)分析了jquery.cookie.js插件操作cookie實(shí)現(xiàn)保存用戶登錄信息的相關(guān)技巧,需要的朋友可以參考下2016-04-04