JQuery全部过滤选择器详细介绍下

news2024/12/25 22:38:07

文章目录

  • JQuery全部过滤选择器详细介绍-下
    • 属性过滤选择器
      • ● 属性过滤选择器-应用实例
      • 代码演示
    • 子元素过滤选择器
      • ● 子元素过滤选择器基本介绍
      • 5. nth-child() 选择器详解如下：
      • ● 子元素过滤选择器示例-应用实例
      • 代码演示
    • 表单属性过滤选择器
      • ● 此选择器主要对所选择的表单元素进行过滤
      • ● 表单对象属性过滤选择器-应用实例
      • 代码演示

JQuery全部过滤选择器详细介绍-下

属性过滤选择器

● 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

1、[attribute] 用法: $(“div[id]”) ; 返回值 集合元素

说明: 匹配包含给定属性的元素. 例子中是选取了所有带"id"属性的 div 标签.

2、[attribute=value] 用法: $(“input[name=‘newsletter’]”).attr(“checked”, true); 返回值 集合元素

说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是newsletter 的 input 元素.

3、[attribute!=value] 用法: $(“input[name!=‘newsletter’]”).attr(“checked”, true); 返回值集合元素

说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.

此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的:not派上了用场.

4、[attribute^=value] 用法: $(“input[name^=‘news’]”) 返回值 集合元素

说明: 匹配给定的属性是以某些值开始的元素

5、[attribute$=value]用法: ( " i n p u t [ n a m e ("input[name ("input[name=‘letter’]") 返回值 集合元素

说明: 匹配给定的属性是以某些值结尾的元素.

6、[attribute*=value]用法: $(“input[name*=‘man’]”) 返回值 集合元素

说明: 匹配给定的属性是以包含某些值的元素.

7、[attributeFilter1][attributeFilter2][attributeFilterN]用法: ( " i n p u t [ i d ] [ n a m e ("input[id][name ("input[id][name=‘man’]") 返回值 集合元素

说明: 复合属性选择器,需要同时满足多个条件时使用.是一个组合,这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.

● 属性过滤选择器-应用实例

1.选取下列元素,改变其背景色为 #0000FF

2.含有属性title 的div元素.

3.属性title值等于"test"的div元素.

4.属性title值不等于"test"的div元素(没有属性title的也将被选中).

5.属性title值 以"te"开始 的div元素.

6.属性title值 以"est"结束 的div元素.

7.属性title值 含有"es"的div元素.

8.选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素

代码演示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性过滤选择器-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }


        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //*****含有属性title 的div元素.
            $("#b1").click(
                function () {
                    $("div[title]").css("background", "green");
                }
            )

            //****属性title值等于test的div元素
            $("#b2").click(
                function () {
                    $("div[title='test']").css("background", "green");
                }
            )

            //属性title值不等于test的div元素(没有属性title的也将被选中)

            $("#b3").click(
                function () {
                    $("div[title!='test']").css("background", "green");
                }
            )

            //属性title值 以te开始 的div元素
            $("#b4").click(
                function () {
                    $("div[title^='te']").css("background", "green");
                }
            )

            //属性title值 以est结束 的div元素
            $("#b5").click(
                function () {
                    $("div[title$='est']").css("background", "green");
                }
            )

            //属性title值 含有es的div元素
            $("#b6").click(
                function () {
                    $("div[title *= 'es']").css("background", "green");
                }
            )

            //选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素
            $("#b7").click(
                function () {
                    $("div[id][title *= 'es']").css("background", "green");
                }
            )

        });
    </script>
</head>
<body>

<input type="button" value="含有属性title 的div元素." id="b1"/><br/><br/>
<input type="button" value="属性title值等于test的div元素" id="b2"/><br/><br/>
<input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/><br/><br/>
<input type="button" value="属性title值 以te开始 的div元素" id="b4"/><br/><br/>
<input type="button" value="属性title值 以est结束 的div元素" id="b5"/><br/><br/>
<input type="button" value="属性title值 含有es的div元素" id="b6"/><br/><br/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/><br/><br/>

<div id="one" title="test">
    div id为one test
</div>

<div id="one-1" title="texxx">
    div id为one-1 texxx
</div>

<div id="one-2" title="xxxest">
    div id为one-2 xxxest
</div>

<div id="one-3" title="xxxesxxxxxt">
    div id为one-3 xxxesxxxxxt
</div>

<div id="two" title="ate">
    div id为two
</div>

<div id="three" class="one">
    div id为three
</div>
</body>
</html>

子元素过滤选择器

● 子元素过滤选择器基本介绍

1、:nth-child(index/even/odd/equation) 用法: $(“ul li:nth-child(2)”) 返回值 集合元素

说明: 匹配其父元素下的第 N 个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从 0 开始,后者是从 1 开始.

2、:first-child 用法: $(“ul li:first-child”) 返回值 集合元素

说明: 匹配第一个子元素.‘:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.

3、:last-child 用法: $(“ul li:last-child”) 返回值 集合元素

说明: 匹配最后一个子元素.':last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.

4、: only-child 用法: $(“ul li:only-child”) 返回值 集合元素

说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

5. nth-child() 选择器详解如下：

(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素

(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素

(4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1 的元素

● 子元素过滤选择器示例-应用实例

  1. 选取下列元素,改变其背景色为 #0000FF

  2. 每个class为one的div父元素下的第2个子元素. 3. 每个class为one的div父元素下的第一个子元素

  3. 每个class为one的div父元素下的最后一个子元素

  4. 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素

代码演示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素过滤选择器示例-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 70px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //****每个class为one的div父元素下的第2个子元素
            $("#b1").click(
                function () {
                    $("div .one:nth-child(2)").css("background", "yellow");
                }
            )

            //*****每个class为one的div父元素下的第一个子元素
            $("#b2").click(
                function () {
                    $("div .one:first-child").css("background", "green");
                    //$("div .one:nth-child(1)").css("background", "green");
                }
            )


            //*****每个class为one的div父元素下的最后一个子元素
            $("#b3").click(
                function () {
                    $("div .one:last-child").css("background", "red");
                }
            )


            //**如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
            $("#b4").click(
                function () {
                    $("div .one:only-child").css("background", "pink");
                }
            )

        });
    </script>
</head>
<body>

<input type="button" value="每个class为one的div父元素下的第2个子元素" id="b1"/><br/><br/>
<input type="button" value="每个class为one的div父元素下的第一个子元素" id="b2"/><br/><br/>
<input type="button" value="每个class为one的div父元素下的最后一个子元素" id="b3"/><br/><br/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/><br/><br/>


<div class="one">
    <div id="one" class="one">
        XXXXXXXXX id=one
    </div>
    <div id="two" class="one">
        XXXXXXXXX id=two
    </div>
    <div id="three" class="one">
        XXXXXXXXX id=three
    </div>
    <div id="four" class="one">
        XXXXXXXXX id=four
    </div>
</div>

<div class="one">
    <div id="five" class="one">
        XXXXXXXXX id=five
    </div>
</div>
</body>
</html>

表单属性过滤选择器

● 此选择器主要对所选择的表单元素进行过滤

1、:enabled 用法: $(“input:enabled”) 返回值 集合元素

说明: 匹配所有可用元素.意思是查找所有 input 中不带有 disabled="disabled"的 input. 不为 disabled,当然就为 enabled 啦.

2、:disabled 用法: $(“input:disabled”) 返回值 集合元素

说明: 匹配所有不可用元素.与上面的那个是相对应的.

3、:checked 用法: $(“input:checked”) 返回值 集合元素

说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括 select 中的 option).

4、:selected 用法: $(“select option:selected”) 返回值 集合元素

说明: 匹配所有选中的 option 元素.

● 表单对象属性过滤选择器-应用实例

  1. 利用 jQuery 对象的 val() 方法改变表单内可用 元素的值

  2. 利用 jQuery 对象的 val() 方法改变表单内不可用 元素的值

  3. 利用 jQuery 对象的 length 属性获取多选框选中的个数

4.利用 jQuery 对象的 text() 方法获取下拉框选中的内容

代码演示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单对象属性过滤选择器-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

    </style>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function (){
            //*利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值

            $("#b1").click(
                function () {
                    //$jquery对象.val() , 如果() 是空的，就表示返回value
                    //$jquery对象.val('值') , 就表示给该对象value设置值
                    $("input[type='text']:enabled").val("台球");
                }
            )

            //利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值

            $("#b2").click(
                function () {
                    //解读
                    //$jquery对象.val() , 如果() 是空的，就表示返回value
                    //$jquery对象.val('值') , 就表示给该对象value设置值
                    $("input[type='text']:disabled").val("足球");
                }
            )
            //利用 jQuery 对象的 length 属性获取多选框/复选框选中的个数
            $("#b3").click(
                function () {
                    alert($("input[type='checkbox']:checked").length);
                }
            )
            //****利用 jQuery 对象的 text() 方法获取下拉框选中的内容
            $("#b4").click(
                function () {
                    //如果我们希望选择指定的select , 可以加入属性过滤选择器
                    //var $selects = $("select[属性='值'] option:selected");
                    var $selects = $("select option:selected");
                    $selects.each(function (){
                        alert("你选择了= " + $(this).text())
                    })
                }
            )

        });
    </script>
</head>
<body>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值" id="b1"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值" id="b2"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/><br/><br/>
<br>
<input type="text" value="篮球1"/>
<input type="text" value="篮球2"/>
<input type="text" value="篮球3" disabled="true"/>
<input type="text" value="篮球4" disabled="true"/>
<br>
<h1>选择你的爱好</h1>
<input type="checkbox" value="爱好1"/>爱好1
<input type="checkbox" value="爱好2"/>爱好2
<input type="checkbox" value="爱好3"/>爱好3
<input type="checkbox" value="爱好4"/>爱好4
<br>
<h1>选项如下:</h1>
<select name="job" size=9 multiple="multiple">
    <option value="选项1">选项1^^</option>
    <option value="选项2">选项2^^</option>
    <option value="选项3">选项3^^</option>
    <option value="选项4">选项4^^</option>
    <option value="选项5">选项5^^</option>
    <option value="选项6">选项6^^</option>
</select>

<select id="xxx" name="edu">
    <option value="博士">博士^^</option>
    <option value="硕士">硕士^^</option>
    <option value="本科">本科^^</option>
    <option value="小学">小学^^</option>
</select>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/783195.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

壹牛NFT数字艺术藏品数藏系统源码 全开源

壹牛NFT数字艺术藏品数藏系统源码 全开源

这套源码小白大致测试了一下发现几点问题&#xff0c;uniapp少了几个文件不能编译只能用public/h5里面web端,后台账号密码似乎不正确&#xff0c;这类源码挺少的感兴趣的自己下来研究修复一下吧。 壹牛NFT数字艺术藏品数藏系统源码 全开源 这个版本新增了不少功能&#xff0c…
阅读更多...
动态规划入门第2课,经典DP问题1 --- 线性

动态规划入门第2课,经典DP问题1 --- 线性

动态规划要点 阶段的2个方向&#xff1a;从上到下&#xff1b;从下到上。 动态规划要点 从递归到DP 动态规划要点 两个2个方向 优化的可能性 第1题 合唱队形 N位同学站成一排&#xff0c;音乐老师要请其中的(N-K)位同学出列&#xff0c;使得剩下的K位同学排成合唱队形…
阅读更多...
Apple M1 Pro macOS 切换中文输入法卡住

Apple M1 Pro macOS 切换中文输入法卡住

(macOS 在切换中文输入法时出现卡住的情况 1&#xff0c;切换为中文输入法后再次卡住2&#xff0c;杀死 简体中文输入方式的进程参考 将光标移到菜单栏的输入法切换为英文输入法 多次切换为英文输入法&#xff0c;可以切换为英文输入法 切换为英文输入法后电脑不卡顿了&#xf…
阅读更多...
基于springboot+jpa+mysql+html网上商城系统

基于springboot+jpa+mysql+html网上商城系统

基于springbootjpamysqlhtml网上商城系统 一、系统介绍二、功能展示1.主页(客户)2.登陆&#xff08;客户&#xff09;3.注册&#xff08;客户&#xff09;4.购物车(客户)5.我的订单&#xff08;客户&#xff09;6.用户管理&#xff08;管理员&#xff09;7.分类管理&#xff08…
阅读更多...
iOS--编译链接的过_1

iOS--编译链接的过_1

iOS 开发中使用的是编译语言&#xff0c;所谓编译语言是在执行的时候&#xff0c;必须先通过编译器生成机器码&#xff0c;机器码可以直接在CPU上执行&#xff0c;所以执行效率较高&#xff0c;是使用 Clang / LLVM 来编译的。LLVM是一个模块化和可重用的编译器和工具链技术的集…
阅读更多...
Java基本数据类型默认初始化值测试

Java基本数据类型默认初始化值测试

1.基本数据类型为成员变量 public class Test {boolean b;char c;byte bt;short s;int i;long l;float f;double d;public static void main(String[] args) {Test t new Test();System.out.println("boolean类型默认值&#xff1a;" t.b);System.out.println(t.c…
阅读更多...
Android 中 cgroup抽象层详解

Android 中 cgroup抽象层详解

源码基于&#xff1a;Android R 0. 前言 在之前的博文《Android中app freezer原理》一文中&#xff0c;我们看到冻结器的enable、freeze、unfreeze 都是通过 cgroup 的机制进行处理。 本文将介绍下 Android 中 cgroup 的抽象层基本信息和使用方式。 1. cgroups 简介 cgroups…
阅读更多...
Linux常用命令——dump命令

Linux常用命令——dump命令

在线Linux命令查询工具 dump 用于备份ext2或者ext3文件系统 补充说明 dump命令用于备份ext2或者ext3文件系统。可将目录或整个文件系统备份至指定的设备&#xff0c;或备份成一个大文件。 语法 dump(选项)(参数)选项 -0123456789&#xff1a;备份的层级&#xff1b; -b&…
阅读更多...
layui框架学习（32：表单）

layui框架学习（32：表单）

Layui中的分页模块laypage支持在指定的容器中显示分页信息&#xff0c;主要是指总页数、当前页面、上一页/下一页等信息&#xff0c;可以配合其它组件实现分页显示数据或者分页显示内容&#xff0c;事实上&#xff0c;Layui中的动态数据表格等模块都附带有显示分页功能。laypag…
阅读更多...
hive之文件格式与压缩

hive之文件格式与压缩

hive文件格式&#xff1a; 概述&#xff1a; 为Hive表中的数据选择一个合适的文件格式&#xff0c;对提高查询性能的提高是十分有益的。Hive表数据的存储格式&#xff0c;可以选择text file、orc、parquet、sequence file等。 文本文件&#xff1a; 文本文件就是txt文件&…
阅读更多...
【算法 -- LeetCode】（025） K 个一组翻转链表

【算法 -- LeetCode】（025） K 个一组翻转链表

1、题目 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节点…
阅读更多...
企业服务器数据库中了360后缀勒索病毒怎么解决加密的方式有哪些

企业服务器数据库中了360后缀勒索病毒怎么解决加密的方式有哪些

随着网络安全问题日益突出&#xff0c;企业服务器数据库成为黑客攻击的重要目标之一。近日&#xff0c;我们收到很多企业的求助&#xff0c;企业的服务器数据库遭到了360后缀的勒索病毒攻击&#xff0c;导致企业内部的许多重要数据被加密无法读取使用&#xff0c;严重影响了企业…
阅读更多...
05网络模型练习题

05网络模型练习题

新版MATLAB中&#xff0c;图论工具箱的函数进行了更换 MATLAB中文参考文档&#xff1a;https://ww2.mathworks.cn/help/matlab/index.html 遍历、最短路径和循环 bfsearch 广度优先图搜索 dfsearch 深度优先图搜索 shortestpath 两个单一节点之间的最短路径 shortestpathtree …
阅读更多...
Flask 笔记

Flask 笔记

Flask 笔记 一、Flask介绍 1、学习Flask框架的原因 2020 Python 开发者调查结果显示Flask和Django是Python Web开发使用的最主要的两个框架。 2、Flask介绍 ​ Flask诞生于2010年&#xff0c;是Armin ronacher用Python 语言基于Werkzeug工具箱编写的轻量级Web开发框架。 ​…
阅读更多...
企业数字化转型要转什么？怎么转？_光点科技

企业数字化转型要转什么？怎么转？_光点科技

随着科技的飞速发展和互联网的普及&#xff0c;数字化转型已成为现代企业持续发展和提高竞争力的必经之路。数字化转型是指企业在信息技术的驱动下&#xff0c;将传统的业务模式、流程和文化进行全面优化和改造&#xff0c;以适应数字化时代的新要求。 一、企业数字化转型的重要…
阅读更多...
二极管常见参数

二极管常见参数

写在前面&#xff1a; 本文章旨在总结备份、方便以后查询&#xff0c;由于是个人总结&#xff0c;如有不对&#xff0c;欢迎指正&#xff1b;另外&#xff0c;内容大部分来自网络、书籍、和各类手册&#xff0c;如若侵权请告知&#xff0c;马上删帖致歉。 目录 肖特基二极管PN…
阅读更多...
CCLINK IE转MODBUS-TCP网关cclink与以太网的区别

CCLINK IE转MODBUS-TCP网关cclink与以太网的区别

你是否曾经遇到过需要同时处理CCLINK IE FIELD BASIC和MODBUS两种数据协议的情况&#xff1f;远创智控的YC-CCLKIE-TCP网关可以帮助你解决这个问题。 远创智控YC-CCLKIE-TCP网关可以分别从CCLINK IE FIELD BASIC一侧和MODBUS一侧读写数据&#xff0c;然后将数据存入各自的缓冲区…
阅读更多...
SpringBoot整合可视化监控工具——SpringBoot Admin

SpringBoot整合可视化监控工具——SpringBoot Admin

目录 父项目 子模块——server 子模块——client 开放监控指标 性能 环境 日志配置 映射 问题一: 明明项目启动却还是Instance 是 office 问题二: 记springboot中yml文件最后一位是星号*的写法 在说软件监控之前&#xff0c;我们先来了解一下软件的发展史&#xff0c…
阅读更多...
【字符流】案例：文件到集合

【字符流】案例：文件到集合

案例&#xff1a;文件到集合 1.需求&#xff1a; 把文本文件中的数据读取到集合&#xff0c;并遍历集合。要求&#xff1a;文件中的每一行数据是一个集合元素 2.思路 创建字符缓冲输入流对象创建ArrayList集合对象调用字符缓冲输入流对象的方法读数据把读取到的字符串数据存…
阅读更多...
SCP 2021 第一轮（初赛）第四题 【时间复杂度】

SCP 2021 第一轮（初赛）第四题 【时间复杂度】

本题正确答案&#xff1a;C 本题解析&#xff1a;
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023