<%--
Created by IntelliJ IDEA.
User: lenovo
Date: 2020/7/3
Time: 9:27
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>jquery的筛选</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//普通筛选
// :first 第1个
// $('li:first').css('background-color','yellow');
// :last 最后1个
// $('li:last').css('background-color','yellow');
// :eq(index) 指定索引
// $('li:eq(1)').css('background-color','yellow');
// :even 偶数
// $('li:even').css('background-color','yellow');
// :odd 奇数
// $('li:odd').css('background-color','yellow');
// :lt(index)小于
// $('li:lt(2)').css('background-color','yellow');
// :gt(index)大于
// $('li:gt(1)').css('background-color','yellow');
// :not(selector) 排除
// $('li:not(#ww)').css('background-color','yellow');
//查找筛选
//选取父标签
// $('#ww').parent().css('background-color','yellow');
//排除同一级中的当前标签
$('li:eq(3)').siblings().css('background-color','yellow');
})
});
</script>
</head>
<body>
<ul>
<li>Java入门到精通1</li>
<li>Java入门到精通2</li>
<li id="ww">Java入门到精通3</li>
<li>Java入门到精通4</li>
</ul>
<button id="btn">点击</button>
</body>
</html>
JQquery的简单筛选代码演示
最新推荐文章于 2022-08-11 00:00:09 发布
1179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
