jQuery 選擇器demo練習
阿新 • • 發佈：2018-10-16
大於 width ide query rip one 不包含 隱藏 more
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>品牌列表案例</title>
<script src="js/jquery-2.1.1.min.js" rel="script"></script>
<style>
ul li{
list-style: none;
}
*{
text-decoration: none;
}
span{
background: #1a272f;
color: #fff;
border:1px solid #647787;
width: 150px;
padding: 5px;
text-align: center;
vertical-align: middle;
border-radius: 5px;
margin: 0 50px;
}
.heighLight{
color: #f00;
text-decoration: underline;
}
</style>
<script>
$(document).ready(function () {
//從列表的索引值大於5開始，但是不包含最後一條記錄的所有列表元素隱藏
var $eategory=$(‘ul li:gt(5):not(:last)‘);
$eategory.hide();//隱藏上面獲取到的jQuery對象
//當用戶點擊“顯示全部品牌”按鈕時，所有列表都顯示，且文本變為“精簡顯示品牌”，同時推薦品牌高亮顯示
// 首先獲取按鈕，
var $toggleBtn =$(‘div.showMore > a‘);
//給按鈕添加點擊事件，且列表全部顯示，但是超鏈接不跳轉
$toggleBtn.click(function(){
$eategory.show();//顯示全部列表
//按鈕文本改為精簡品牌展示
$(‘.showMore a span‘).text("精簡顯示品牌");
//品牌推薦高亮顯示 filter:篩選復合條件的元素
$(‘ul li‘).filter(":contains(‘demo2‘),:contains(‘demo5‘),:contains(‘demo9‘)").addClass("heighLight");
return false;//鏈接不跳轉
});
})
</script>
</head>
<body>
<div class=”SubCategoryBox”>
<ul>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">demo1</a><i>(30440)</i></li>
<li><a href="#">demo2</a><i>(30440)</i></li>
<li><a href="#">demo3</a><i>(30440)</i></li>
<li><a href="#">demo4</a><i>(30440)</i></li>
<li><a href="#">demo5</a><i>(30440)</i></li>
<li><a href="#">demo6</a><i>(30440)</i></li>
<li><a href="#">demo7</a><i>(30440)</i></li>
<li><a href="#">demo8</a><i>(30440)</i></li>
<li><a href="#">demo9</a><i>(30440)</i></li>
<li><a href="#">demo10</a><i>(30440)</i></li>
<li><a href="#">其他品牌</a><i>(7275)</i></li>
</ul>
<div class="showMore">
<a href="more.html"><span>顯示全部品牌</span></a>
</div>
</div>
</body>
</html>
jQuery 選擇器demo練習