JQquery的简单筛选代码演示

    技术2023-09-09  108

    <%-- 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>
    Processed: 0.008, SQL: 9