JQuery笔记6： JQuery过滤选择器

最新推荐文章于 2023-04-23 17:34:04 发布

zhanzkw

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量1k

点赞数

分类专栏： JQuery 文章标签： jquery input div function html table

本文链接：https://blog.csdn.net/studyalllife/article/details/6760817

版权

JQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

除了前面的选择器外，JQuery还有过滤选择器。

基本过滤选择器：
（1） :first 选取第一个元素。
$("div:first") 选取第一个 <div>

（2）:last 选取最后一个元素。
$("div:last") 选取最后一个 <div>

（3） :not( 选择器 ) 选取不满足 “ 选择器 ” 条件的元素：
$("input:not(.myClass)") 选取样式名不是 myClass 的 <input>

（4） :even 、 :odd ，选取索引是奇数、偶数的元素：
$("input:even") 选取索引是奇数的 <input>
（5） :eq( 索引序号 ) 、 :gt( 索引序号 ) 、 :lt( 索引序号 ) 选取索引等于、大于、小于索引序号的元素：
$("input:lt(5)") 选取索引小于 5 的<input>
（6） $(":header") 选取所有的 h1 …… h6 元素（很少用）
（7） $("div:animated") 选取正在执行动画的 <div> 元素。（很少用）

案例：
成绩表：第一行是表头，所以显示大字体（ fontSize=30 ），最后一行是汇总，所以显示红色字体。正文的前三行是前三名，所以显示大的字体（ 28 ）表格的奇数行是黄色背景。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //id为table1下的直接或间接的所有的tr的第一个元素
            $("#table1 tr:first").css("fontSize", "40");  // 第一行是表头，所以显示大字体（ fontSize=30 ）
            $("#table1 tr:last").css("color", "red"); //最后一行是汇总，所以显示红色字体
             //注意，过滤的逐级性，是对先前过滤结果的进一步过滤。
             //gt(0)过滤的结果是把这一行给除去了。lt(3)是把Tom作为此次过滤的第一行，小于jim（在第三行）所在的那一行，过滤的结果是：Tom,hengheng,miemie
            $("#table1 tr:gt(0):lt(3)").css("fontSize", "28"); //成绩前三名：序列大于第0行，小于第3行（gt(0):lt(3)）显示28号字体。
            $("#table1 tr:gt(0):even").css("color", "Yellow"); //大于0的奇数行，显示红色
        });
      
    </script>
</head>
<body>
   <table id="table1">
   <tr><td>姓名</td><td>成绩</td></tr>
   <tr><td>Tom</td><td>100</td></tr>
   <tr><td>hengheng</td><td>100</td></tr>
   <tr><td>miemie</td><td>100</td></tr>
   <tr><td>jim</td><td>96</td></tr>
   <tr><td>haha</td><td>92</td></tr>
   <tr><td>平均分</td><td>96</td></tr>
   </table>
</body>
</html>

相对定位：不仅可以使用选择器进行进行绝对定位，还可以进行相对定位，

只要在 $() 指定第二个参数，第二个参数为相对的元素 . $("ul", $(this)).css("background", "red");

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#div1").click(function () {
                $("ul", $(this)).css("background", "red")//第二个参数传递一个JQuery对象，以这个对象为基准进行相对的选择
            });
        });
      
    </script>
</head>
<body>
    <div id="div1">
        <ul>
            <li>是大家看法是的浪费</li>
            <li>上的防伪日</li>
            <li>问问</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>上的防伪</li>
            <li>所答非所问而非</li>
            <li>是得分为二</li>
        </ul>
    </div>
</body>
</html>

相对定位案例：修改点击行的所有 td 的背景色

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#t1 tr").click(function () { $("td", $(this)).css("background","red"); });
        });
    </script>
</head>
<body>
<table id="t1">
<tr><td>dd</td><td>dd</td></tr>
<tr><td>dd</td><td>dd</td></tr>
<tr><td>dd</td><td>dd</td></tr>
</table>
</body>
</html>

属性过滤选择器：
（1） $("div[id]") 选取有 id 属性的 <div>
（2）$("div[title=test]") 选取 title 属性为 “ test ” 的 <div> ，相当于getElementsByName 。 JQuery 中没有对getElementsByName 进行封装，用 $("input[name=abc]")
（3） $("div[title!=test]") 选取 title 属性不为 “ test ” 的 <div>

（4）还可以选择开头、结束、包含等，条件还可以复合。（ * ）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("input[value=显示选中项]").click(function () {
                alert($("input:checked").val());
            });
        });
    </script>
</head>
<input id="Checkbox4" type="checkbox" value="南京" />南京<br />
<input id="Checkbox3" type="checkbox" value="北京" />北京<br />
<input id="Checkbox2" type="checkbox" value="上海" />上海<br />
<input id="Checkbox1" type="checkbox" value="杭州" />杭州<br />
<input type="button" value="显示选中项" />
<body>

</body>
</html>

表单对象选择器（过滤器）：
（1） $("#form1:enabled") 选取 id 为 form1 的表单内所有启用的元素
（2） $("#form1:disabled") 选取 id 为 form1 的表单内所有禁用的元素
（3） $("input:checked") 选取所有选中的元素（ Radio 、 CheckBox ）
（4） $("select:selected") 选取所有选中的选项元素（下拉列表）

� 练习：图片版评分控件
� 练习：单选超链接

zhanzkw

关注

0
点赞
踩
0

收藏

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

除了前面的选择器外，JQuery还有过滤选择器。基本过滤选择器：（1） :first 选取第一个元素。 $("div:first") 选取第一个（2）:last 选取最后一个元素。 $("div:last") 选取最后一个（3） :no
复制链接

扫一扫