JQuery 实现简单过滤器

最新推荐文章于 2021-10-31 13:14:57 发布

LeoHaiTao

最新推荐文章于 2021-10-31 13:14:57 发布

阅读量734

点赞数

文章标签： jquery class function xhtml float server

本文链接：https://blog.csdn.net/haitaoDoit/article/details/7346717

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="简单过滤器.aspx.cs" Inherits="简单过滤器" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
     body
     {
         width:240px;height:60px;border:1px solid red;
         }
     ul
     {
         list-style-type:none;padding:0px;
         }
     .class1{ width:60px; height:23px; float:left; border-bottom:1px solid red; border-top:1px solid blue;}
     .class2{ width:58px; height:23px; float:left; border-bottom;1px solid red; border-top:1px solid blue;}
     .classadd{ background-color:Aqua;}
    </style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //$('li:first').addClass('classadd'); //获取第一个元素
                //$('li:last').addClass('classadd');   //获取最后一个元素
                //$('li:first').next().addClass('classadd'); //获取第二个元素
                // $('li:eq(0)').addClass('classadd');   //获取指定索引值的元素，索引值从0开始单个元素
                // $('li:gt(1)').addClass('classadd');   //获取大于指定索引值的元素，索引值从0开始元素集合
                // $('li:lt(3)').addClass('classadd');   //获取小于指定索引值的元素，索引值从0开始元素集合
                // $('li:even').addClass('classadd'); //获取索引值为偶数的元素，索引值从0开始
                //$('li:odd').addClass('classadd'); //获取索引值为奇数的元素，索引值从0开始
                // $('li:not(#myid)').addClass('classadd'); //出给定选择器外的所有元素
                //$('li:not(.class2)').addClass('classadd');
                $('h1:header').addClass('classadd');
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>林氏名人</h1>
        <ul>
            <li class="class1">林心如</li>
            <li class="class1" id="myid">林志玲</li>
            <li class="class2">林志颖</li>
            <li class="class1">林黛玉</li>
        </ul>
    </div>
    <input type="button" id="btn" value="点我" />
    </form>
</body>
</html>