jQuery中:has選擇器用法實例
更新時間:2014年12月30日 14:40:00 投稿:shichen2014
這篇文章主要介紹了jQuery中:has選擇器用法,實例分析了:has選擇器的功能、定義及匹配技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery中has選擇器用法。分享給大家供大家參考。具體分析如下:
此選擇器匹配含有選擇器所匹配的元素的元素。
語法結(jié)構(gòu):
復(fù)制代碼 代碼如下:
$(":has(selector)")
關(guān)于此選擇器的定義可能有點拗口,通俗的講就是如果一個元素含有selector(選擇器)所匹配的元素,那么此元素將被匹配。例如:
復(fù)制代碼 代碼如下:
$("div:has(p)")
以上選擇器將匹配含有p元素的div元素。
此選擇器一般也要和其他選擇器配合使用,比如類選擇器和元素選擇器等等。例如:
復(fù)制代碼 代碼如下:
$("div:has(p)").css("color","blue")
以上代碼將含有p元素的div元素中的字體顏色設(shè)置為藍色。
如果不和其他選擇器配合使用,則默認(rèn)狀態(tài)是和*選擇器配合使用,例如$(":has")等同于$("*:has")。
參數(shù)列表:
實例代碼:
實例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.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>點擊查看效果</button>
</body>
</html>
以上代碼能夠?qū)瑂pan元素的div的邊框顏色設(shè)置為紅色。
實例二:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.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>點擊查看效果</button>
</body>
</html>
由于以上代碼并沒有指定與:has選擇器相配合使用的選擇器,所以就默認(rèn)和*選擇器配合使用,所以能夠以上代碼能夠?qū)⑺泻衧pan元素的元素的邊框顏色設(shè)置為紅色。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
JQuery.validationEngine表單驗證插件(推薦)
這篇文章主要介紹了JQuery.validationEngine表單驗證插件(推薦)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-12-12PageSwitch插件實現(xiàn)100種不同圖片切換效果
這篇文章主要介紹了PageSwitch插件實現(xiàn)100種不同圖片切換效果,需要的朋友可以參考下2015-07-07Jquery使用each函數(shù)實現(xiàn)遍歷及數(shù)組處理
這篇文章主要介紹了Jquery使用each函數(shù)實現(xiàn)遍歷及數(shù)組處理,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07jquery.cookie.js實現(xiàn)用戶登錄保存密碼功能的方法
這篇文章主要介紹了jquery.cookie.js實現(xiàn)用戶登錄保存密碼功能的方法,結(jié)合實例形式詳細分析了jquery.cookie.js插件操作cookie實現(xiàn)保存用戶登錄信息的相關(guān)技巧,需要的朋友可以參考下2016-04-04