jQuery之過濾元素操作小結(jié)
1：eq(index)方法
用于獲取第N個(gè)元素，這個(gè)元素的位置從0開始算起，語法格式如下：eq(index)
獲取第3個(gè)表格，并將它的背景色設(shè)置為"#FCF"， 代碼如下：$("td").eq(2).css("background", "#FCF");
2：filter(expr)方法
用于篩選出與指定表達(dá)式匹配的元素集合，用于縮小匹配的范圍，用逗號(hào)分隔多個(gè)表達(dá)式，那么多個(gè)表達(dá)式之間是“或”的關(guān)系，
語法如下：filter(expr)
$("input").filter(".sel").css("backgroud", "#FCF"); //選取帶有class屬性值為sel的input元素，并設(shè)置它的背景色
$("input").filter(".sel, :first").css("background", "#FCF"); //選取帶有class屬性值的input元素或者選取當(dāng)前領(lǐng)域中的第一個(gè)元素，并設(shè)置它們的背景色，
表達(dá)式之間用逗號(hào)分隔
3：filter(fn)方法
用于篩選出與指定函數(shù)返回值匹配的元素集合，該函數(shù)內(nèi)部將對(duì)每個(gè)對(duì)象計(jì)算一次(如$:each)。如果調(diào)用的函數(shù)返回false，則這個(gè)元素將被刪除，
否則就會(huì)保留。語法格式如下：filter(fn)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>filter(fn)用法</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("p").filter(function(index){
return $("ol", this).length == 0;
}).css("color", "blue");
})
</script>
</head>
<body>
<p>
<ol>
<li>Hello</li>
</ol>
</p>
<p>How are you?</p>
</body>
</html>
假設(shè)子元素中不含有ol元素，并設(shè)置該元素的字體顏色為藍(lán)色。
4：has(expr)方法
用于保留包含特定后代的元素，去掉那些不含有指定后代的元素，該方法將會(huì)從給定的jQuery對(duì)象中重新創(chuàng)建一組匹配的對(duì)象，提供的選擇器會(huì)一一測(cè)試原先
那些對(duì)象的后代，含有匹配后代的對(duì)象將得以保留，語法格式如下：
has(expr)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>has(expr)用法</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("li").has("ul").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li id="menu_li">
<ul id="menu_ul">
<li>新聞</li>
<li>網(wǎng)頁</li>
<li>知道</li>
</ul>
</li>
<li>正文</li>
<li>結(jié)尾</li>
</ul>
</body>
</html>
5： hasClass(class)
用于檢查當(dāng)前的元素是否含有某個(gè)特定的類，如果有，則返回true
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hasClass用法</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("div").click(function() {
if($(this).hasClass("protected")) {
$(this).css("border", "1px solid blue");
}
});
})
</script>
</head>
<body>
<div class="protected">div元素</div>
<div>div元素二</div>
</body>
</html>
6：map(callback)方法
map(callback)方法用于將一組元素轉(zhuǎn)換成其他數(shù)組(無論是否是元素?cái)?shù)組)， 可以用這個(gè)函數(shù)來建立一個(gè)列表，無論是值、屬性還是CSS樣式，或者其他特別形式，
都可以用$.map()來方便的建立，語法格式如下：
map(callback)
相關(guān)文章
jquery插件pagination實(shí)現(xiàn)無刷新ajax分頁
這篇文章主要介紹了jquery插件pagination實(shí)現(xiàn)無刷新ajax分頁的相關(guān)資料,需要的朋友可以參考下2015-09-09
jquery 設(shè)置元素相對(duì)于另一個(gè)元素的top值(實(shí)例代碼)
在jquery中offset().top是相對(duì)于body來說的，另外在設(shè)置top值的時(shí)候要找到與該元素最近的有相對(duì)值的元素2013-11-11
基于jQuery實(shí)現(xiàn)的雙11天貓拆紅包抽獎(jiǎng)效果
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的雙11天貓拆紅包抽獎(jiǎng)效果，在即將到來的雙十二活動(dòng)中大家也可以使用拆紅包抽獎(jiǎng)吸引消費(fèi)者，需要的朋友可以參考下2015-12-12
這篇文章介紹了jQuery操作屬性值的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
jQuery實(shí)現(xiàn)的經(jīng)典滑動(dòng)門效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的經(jīng)典滑動(dòng)門效果,涉及jQuery基于鼠標(biāo)事件實(shí)現(xiàn)頁面元素的遍歷與樣式動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
實(shí)例解析jQuery中如何取消后續(xù)執(zhí)行內(nèi)容
本文主要介紹了jQuery中取消后續(xù)執(zhí)行內(nèi)容的實(shí)例，代碼通俗易懂。需要的朋友來看下吧2016-12-12
jQuery 重復(fù)加載錯(cuò)誤以及修復(fù)方法
本文主要記錄了在項(xiàng)目中遇到j(luò)Query重復(fù)加載導(dǎo)致依賴jQuery的js全部失效然后一步步分析，得出最終解決方案的全部過程，主要是記錄下來，提醒自己以后不要再犯相同錯(cuò)誤。2014-12-12
jQuery treeview樹形結(jié)構(gòu)應(yīng)用
這篇文章主要為大家詳細(xì)介紹了jQuery treeview樹形結(jié)構(gòu)應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了jQuery實(shí)現(xiàn)友好的輪播圖片特效的方法及代碼分享,需要的朋友可以參考下2015-01-01
jQuery提示插件qTip2用法分析(支持ajax及多種樣式)
這篇文章主要介紹了jQuery提示插件qTip2用法,結(jié)合實(shí)例形式分析了qTip2的使用技巧,可支持ajax及多種樣式的設(shè)置,需要的朋友可以參考下2016-06-06