JQuery过滤选择器

最新推荐文章于 2024-01-13 22:21:09 发布

濮阳梦雪

最新推荐文章于 2024-01-13 22:21:09 发布

阅读量719

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/zlj_blog/article/details/22679447

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用JQuery选择器可以定位所需要的元素，同时JQuery还提供了过滤选择器，用以进一步对选择器中的结果进行过滤，常用的过滤选择器可以归为以下几类：

1.基本过滤选择器，常用的有：

（1）:first 选取第一个元素，例如$("div:first")，选取第一个div元素；

（2）:last 选取最后一个元素，例如$("div:last")，选取最后一个div元素；

（3）:not 选取不满足选择器条件的元素，例如$("div:not(.class1)")，选取样式名不是class1的div元素；

（4）:even，:odd，选取索引为偶数、奇数的元素，索引与一般编程语言一致，从0开始，例如$("span:even")；

（5）:eq(index)，:lt(index)，:gt(index)，选取索引号=、<、>制定索引的元素，例如$("div:eq(1)")，选择索引号等于1的div元素；

（6）:header，选取所有h1....h6的元素，例如$(":header")；

（7）:animated，选取正在执行动画的元素，如$("div:animated")，获取正在执行动画的div动画。

2.属性过滤选择器，格式为$("tagName[属性名或者表达式]")，两种格式的含义如下：

（1）若为$("tagName[属性名]")，表示拥有该属性的元素，如$("input[id]")，选取有id属性的input元素；

（2）若为$("tagName[表达式]")，表示属性满足该表达式的元素，如$("input[id=username]")，选取id=username的input元素；

3.表单对象过滤器，格式为$(":属性值"),如$("#form1:enabled")，选取id为form1的表单下的所有启用元素，$("input:checked")，选取所有选中（radiobutton、checkbox中）的项，$("select:selected")选取所欲选中的下拉列表项。

4.表单选择器，常用的有以下三种：

（1）$(":input")，选取所有可提交给服务器的元素，如<input>、<textarea>、<select>和<button>;

（2）$(":text/password/checkbox...")，获取type=text、password、checkbox...的元素。

示例一：实现全选、全不选和反选

<!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>
    <title>JQuery test</title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(function () {
           $("#selectAll").click(function () {
               $("input[type=checkbox]").attr("checked", true);
           });
           $("#notSelectAll").click(function () {
               $("input[type=checkbox]").attr("checked", false);
           });
           $("#reverse").click(function () {
               $("input[type=checkbox]").each(function () {
                   $(this).attr("checked",!$(this).attr("checked"));
               });
           })
       });
   </script>
</head>
<body>
<input type="checkbox" value="football" />music1<br />
<input type="checkbox" value="basketball" />music2<br />
<input type="checkbox" value="badminton" />music3<br />
<input type="button" value="全选" id="selectAll" />
<input type="button" value="全不选" id="notSelectAll" />
<input type="button" value="反选" id="reverse" />

</body>
</html>

示例二：QQ显示面板

<!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>
    <title>QQ显示面板示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        ul{list-style-type:none;width:15%;}
        .header{cursor:pointer;}
        .body{border-style:solid;border-width:1px;}
        .hMouseOver{background-color:yellow;}
        .hMouseOut{background-color:white;}
        .bMouseOver{background-color:green;}
        .bMouseOut{background-color:white;}
    </style>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("ul li:odd").addClass("body");
            $("ul li:even").click(function () {
                $(this).next("li.body").toggle(); //单击时切换显示状态
            }).mouseover(function () { $(this).attr("class", "header hMouseOver"); })
            .mouseout(function () { $(this).attr("class", "header hMouseOut"); });
            $("ul li.body div").mouseover(function () { $(this).attr("class","bMouseOver") })
            .mouseout(function () { $(this).attr("class", "bMouseOut") });
            $("ul li.body").hide();

        });
    </script>
</head>
<body>
<ul>
<li>好友列表1</li>
<li><div>person1</div>
   <div>person2</div>
   <div>person3<div />
</li>
<li>好友列表2</li>
<li><div>person4</div >
   <div>person5</div >
   <div>person6</div >
</li>
<li>好友列表3</li>
<li><div>person7</div >
   <div>person8</div >
   <div>person9</div >
</li>
</ul>
</body>
</html>

这只是一个简单的示例，在实际项目中，可以利用后台返回的数据，并结合一定的图片及样式对显示界面作进一步美化。

濮阳梦雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery过滤选择器

使用JQuery选择器可以定位所需要的元素，同时JQuery还提供了过滤选择器，用以进一步对选择器中的结果进行过滤，常用的过滤选择器可以归为以下几类：1.基本过滤选择器，常用的有：（1）：first 选取第一个元素，例如$("div:first")，选取第一个div元素；（2）：last 选取最后一个元素，例如$("div:last")，选取最后一个div元素；（3）：not 选取
复制链接

扫一扫