普通筛选
: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>
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
