jQuery——查找篩選

普通篩選

:first 第一個
:last 最後一個
:eq(index) 指定索引
:even 偶數
:odd 奇數
:lt(index) 小於
:gt(index) 大於
:not(selector) 排除

案例

<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//給按鈕添加點擊事件
$('#btn').click(function(){
//給第一個li添加背景
$('li:first').css('background-color','yellow');
//給最後一個li添加背景
$('li:last').css('background-color','yellow');
//給第三個(從0開始)li添加背景
$('li:eq(2)').css('background-color','yellow');
//給偶數的li添加背景(0也是偶數)
$('li:eveb').css('background-color','yellow');
//給奇數的li添加背景
$('li:odd').css('background-color','yellow');
//給小於2的li添加背景
$('li:lt(2)').css('background-color','yellow');
//給大於2的li添加背景
$('li:gt(2)').css('background-color','yellow');
//給除了class爲show以外的li添加背景
$('li:not(".show")').css('background-color','yellow');
});
});
</script>
</head>
<body>
<ul>
<li>java基礎入門到精通</li>
<li>javaWeb基礎入門到精通</li>
<li class='show'>javaEE框架基礎入門到精通</li>
<li>mysql數據庫入門到精通</li>
</ul>
<button id='btn'>點擊</button>
</body>

查找篩選

parent([expr]):取得一個包含着所有匹配元素的唯一父元素的元素集合(父標籤)
children([expr]):取得一個包含匹配的元素集合中每一個元素的所有子元素的集合(子標籤)
siblings([expr]):取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的集合,可以用可選的表達式進行篩選(排除同一級當前標籤)

案例

<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//給按鈕添加點擊事件
$('#btn').click(function(){
//給父元素(ul)添加背景
$('.show').parent().css('background-color','yellow');
//除了第三個li之外的都添加背景
$('li:eq(2)').siblings().css('background-color','yellow');
});
});
</script>
</head>
<body>
<ul>
<li>java基礎入門到精通</li>
<li>javaWeb基礎入門到精通</li>
<li class='show'>javaEE框架基礎入門到精通</li>
<li>mysql數據庫入門到精通</li>
</ul>
<button id='btn'>點擊</button>
</body>
發佈了92 篇原創文章 · 獲贊 0 · 訪問量 1602
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章