使用jQuery內(nèi)容過濾選擇器選擇元素實(shí)例講解
更新時(shí)間：2013年04月18日 14:35:00 作者：
內(nèi)容過濾選擇器：根據(jù)元素中的文字內(nèi)容或所包含的子元素特征獲取元素，其文字內(nèi)容可以模糊或絕對匹配進(jìn)行元素定位，接下來為大家詳細(xì)介紹下jQuery選擇器，感興趣的朋友可以參考下哈
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
內(nèi)容過濾選擇器：根據(jù)元素中的文字內(nèi)容或所包含的子元素特征獲取元素，其文字內(nèi)容可以模糊或絕對匹配進(jìn)行元素定位
jQuery選擇器詳解
根據(jù)所獲取頁面中元素的不同，可以將jQuery選擇器分為：基本選擇器、層次選擇器、過濾選擇器、表單選擇器四大類。其中，在過濾選擇器中有可以分為：簡單過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器6種
-->
<title></title>
<!-- 使用jQuery內(nèi)容過濾選擇器選擇元素：在頁面中，根據(jù)需要?jiǎng)?chuàng)建四個(gè)<div>標(biāo)記，并在其中的<div>中新建一個(gè)<span>標(biāo)記，其余<div>標(biāo)記中輸入內(nèi)容（或?yàn)榭眨?通過內(nèi)容過濾器獲取指定的元素，并顯示在頁面中。-->
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}
span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee}
</style>
<script type="text/javascript">
$(function () { //顯示包含給定文本的元素
$("div:contains('A')").css('display','block');
})
$(function(){ //顯示所有不包含子元素或者文本的空元素
$('div:empty').css('display','block');
})
$(function () { //顯示含有選擇器所匹配的元素
$('div:has(span)').css('display', 'block');
})
$(function () { //顯示含有子元素或者文本的元素
$('div:parent').css('display', 'block');
})
</script>
<!-- 注：在:contains(text)內(nèi)容過濾選擇器中，如果是查找字母，則有大小寫的區(qū)別-->
</head>
<body>
<div>ABCD</div>
<div><span></span></div>
<div>EFAH</div>
<div></div>
</body>
</html>
您可能感興趣的文章:
- JQuery獲取與設(shè)置HTML元素的內(nèi)容或文本的實(shí)現(xiàn)代碼
- jQuery 獲取對象 根據(jù)屬性、內(nèi)容匹配, 還有表單元素匹配
- JQuery中判斷一個(gè)元素下面是否有內(nèi)容或者有某個(gè)標(biāo)簽的判斷代碼
- jQuery使用append在html元素后同時(shí)添加多項(xiàng)內(nèi)容的方法
- jquery動(dòng)態(tài)增加text元素以及刪除文本內(nèi)容實(shí)例代碼
- jQuery獲取選中內(nèi)容及設(shè)置元素屬性的方法
- jQuery給元素添加樣式的方法詳解
- jquery如何判斷某元素是否具備指定的樣式
- Jquery顯示、隱藏元素以及添加刪除樣式
- jquery動(dòng)態(tài)添加帶有樣式的HTML標(biāo)簽元素方法
- JQuery為元素添加樣式的實(shí)現(xiàn)方法
- jQuery操作元素的內(nèi)容和樣式完整實(shí)例分析
相關(guān)文章
這篇文章主要介紹了jQuery防止重復(fù)綁定事件的解決方法,結(jié)合實(shí)例形式分析了jQuery的重復(fù)綁定問題與相應(yīng)的解決方法,需要的朋友可以參考下2016-05-05
jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能,結(jié)合完整實(shí)例形式詳細(xì)分析了jQuery倒計(jì)時(shí)功能相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-06-06
深入理解jquery自定義動(dòng)畫animate()
下面小編就為大家?guī)硪黄钊肜斫鈐query自定義動(dòng)畫animate()。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
百度搜索自動(dòng)聯(lián)想提示效果，想必大家都有見到過吧，下面本文也為大家也是一個(gè)高仿的類似效果2014-05-05
artDialog 4.1.5 Dreamweaver代碼提示/補(bǔ)全插件 附下載
artDialog是一個(gè)輕巧且高度兼容的javascript對話框組件，可讓你的網(wǎng)頁交互擁有桌面軟件般的用戶體驗(yàn)2012-07-07
jQuery ''行 4954 錯(cuò)誤: 不支持該屬性或方法'' 的問題解決方法
這個(gè)問題只在IE下出現(xiàn)。詭異的是，對于出現(xiàn)這個(gè)問題的頁面，重新刷新一下就又好了，Ajax 工作一切正常。順便說一下，我的 jQuery 版本是 1.4.2。2011-01-01
為jQuery.Treeview添加右鍵菜單的實(shí)現(xiàn)代碼
jquery.treeview 數(shù)據(jù)通過JSON數(shù)據(jù)加載，有需要的朋友，可以通jquery的AJAX方法獲取相關(guān)的JSON數(shù)據(jù)。2010-10-10
jQuery.fn.extend(object); 對jQuery.prototype進(jìn)得擴(kuò)展，就是為jQuery類添加“成員函數(shù)”。jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”。2011-01-01
jQuery中parentsUntil()方法用法實(shí)例
這篇文章主要介紹了jQuery中parentsUntil()方法用法,實(shí)例分析了parentsUntil()方法的功能、定義及根據(jù)條件查找匹配元素的所有的祖先元素使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery中index()方法用法,實(shí)例分析了index()方法返回索引值的幾種常見使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12