溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
:first過濾器：$("li:last").css("background-color", "red") 得到li元素的最后一個子節點。
$("li:last")<==>$("li").last(); 注：這兩個的效果相同，但是后者速度更快，推薦用后者
$("li:first")<==>$("li").first();
$("li").first().next(); 方法鏈，first()的下一個元素
$("li").first().next().prev(); prev()上一個元素
$("li").first().parent(); 找到li的父元素
$("div span")<==>$("div").find("span");
$("div span")<==>$("div").children("span")
2.:eq(index)選擇器：如果想從一組標簽元素數組中，靈活選擇任意的一個標簽元素
$("li:eq(2)").css("background-color", "#60F");從一組li元素中，選擇第三個元素，從0開始
3.:contains(text)選擇器：有時候我們可能希望按照文本內容來查找一個或多個元素， 它的功能是選擇指定字符串的全部元素，它通常與其他元素結合使用
$("li:contains('jQuery')").css("background", "green"); 在一組li元素中查找文本是jQuery關鍵字的元素
4.:has(select)選擇器：獲取選擇器中包含指定元素名稱的全部元素，其中selector參數就是包含的元素名稱，是被包含元素。
$("li:has('label')").css("background-color", "blue"); 在一組li元素中查找帶label元素
5.:hidden選擇器：功能是獲取全部不可見的元素，這些不可見的元素中包括type屬性值為hidden的元素。
var $strHTML = $("input:hidden").val(); 查找type="hidden"的input元素
6.:visible選擇器：與:hidden過濾選擇器相反，:visible過濾選擇器獲取的是全部可見的元素，也就是說，只要不將元素的display屬性值設置為“none”，那么，都可以通過該選擇器獲取。
<li >橘子</li>
<li >香蕉</li>
<li >葡萄</li>
$("li:visible").css("background-color","blue");//獲取display:none的元素7.[attribute=value]，[attribute!=value],[attribute*=value]選擇器：功能是獲取與屬性名和屬性值完全相同的全部元素，其中[]是專用于屬性選擇器的括號符，參數attribute表示屬性名稱，value參數表示屬性值。[attribute!=value]意思相反,而[attribute*=value]是獲取屬性值中包含指定內容的全部元素。
<li title="蔬菜">茄子</li>
<li title="水果">香蕉</li>
<li title="蔬菜">芹菜</li>
<li title="水果">蘋果</li>
<li title="水果">西瓜</li>
$("li[title='蔬菜']").css("background-color", "green");
$("input[type='radio']:checked").removeAttr("checked"); //獲取屬性type="radio"的input，并檢查是否選中8.:first-child,:last-child選擇器：使用:first-child子元素過濾選擇器則可以獲取每個父元素中返回的首個子元素，它是一個集合，常用多個集合數據的選擇處理
練習題：
題目：在頁面中,添加一個<ul>元素,里面放置多個(至少7個以上)的<li>元素,此外,再添加一個<a>元素.
任務：
初始時:<ul>元素中僅顯示5個<li>元素,其中包含還包括最后一個<li>元素,<a>元素中的顯示"更多"字符.
當點擊"更多"鏈接時,自身內容變為"簡化",同時,<ul>元素中顯示全部的<li>元素.
當點擊"簡化"鏈接時,自身內容變為"更多",同時,<ul>元素中僅顯示包含最后一個<li>元素在內的5個元素.
代碼答案：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑戰題</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li >111</li>
<li >222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
</ul>
<script>
$(function(){
$("a").click(function(){
if($("a").html() == '更多') {
$("a").html("簡化");
$("li").show();
} else {
$("a").html("更多");
$("li:not(:gt(1))").hide();
}
});
})
</script>
</body>
</html>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
