JQuery 实现简单过滤器

最新推荐文章于 2021-11-11 19:54:49 发布

最新推荐文章于 2021-11-11 19:54:49 发布 · 66 阅读

文章标签：

#xhtml #javascript #c# #ViewUI

本文介绍了一个简单的ASP.NET页面如何使用jQuery进行DOM操作的例子。通过点击按钮，利用jQuery选择器来改变列表项的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ 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>