jQuery的子元素过滤选择器

最新推荐文章于 2024-01-19 10:35:57 发布
最新推荐文章于 2024-01-19 10:35:57 发布
阅读量408 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011240216/article/details/71557041
版权

jQuery的子元素过滤选择器

这里写图片描述

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
                <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }

            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }

            div.hide {
                display: none;
            }           
        </style>
        <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#btn1").click(
                  function(){
                    //选取子元素,需要在选择器前添加一个空格。

                      $("div.one :nth-child(2)").css("background","blue");  
                  }     
                );
                $("#btn2").click(
                          function(){

                              $("div.one :first-child").css("background","blue");  
                          }     
                        );
                $("#btn3").click(
                          function(){

                              $("div.one :last-child").css("background","blue");  
                          }     
                        );
                $("#btn4").click(
                          function(){

                              $("div.one :only-child").css("background","blue");  
                          }     
                        );

            });
        </script>
    </head>
    <body>      
        <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
        <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
        <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
        <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>

        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
        </div>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>

演示结果：

1.

这里写图片描述
2.
这里写图片描述
3.
这里写图片描述
4.
这里写图片描述

hbj_曙光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery子元素过滤选择器用法示例
10-21
主要介绍了jQuery子元素过滤选择器用法,结合实例形式分析了jQuery中nth-child、first-child、last-child、only-child等进行子元素过滤操作的相关技巧,需要的朋友可以参考下
jquery子元素过滤选择器使用示例
10-27
jquery子元素过滤选择器在某些特殊的情况下还是比较实用的，下面为大家介绍下具体的使用方法，感兴趣的各位可以参考下哈
jQuery子元素过滤选择器
Jaune617的博客
11-14 530
:first-child描述: 在每个 ul 中查找第一个 li HTML代码<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul>jQuery代码$("ul li:first-child")结果[ <li>Joh
jquery子元素过滤选择器
qq_28596151的博客
05-17 596
jquery子元素过滤选择器子元素过滤选择器需要我们时刻理元素的父元素和子元素，只要这样我们才能运用的得心应手。1、:nth-child选择器匹配每一个父元素下面的的第index个子元素或者奇偶子元素。比如下面的：(1)、:nth-child(even):能选取每一个父元素下面的索引值为偶数的元素。(2)、:nth-child(old):能选取每一个父元素下面的索引值为奇数的元素。(3)、:nth...
jquery子元素过滤选择器，
boss_way的博客
11-01 1893
1.1． 子元素过滤选择器   根据子元素顺序来获取。 ：nth-child（序号）；根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置 也可以通过倍数（例如3n+1）来设置 :first-child（）； 获取第一个 :last-child（）； 获取最后一个 :only-child（）； 获取只有一个子元素的元素 示例： $(function()
jQuery前端开发学习指南(12)——jQuery子元素过滤选择器
谷哥的小弟
03-30 799
子元素过滤选择器用于根据子元素在父元素中的顺序来获取子元素。
JQuery子元素过滤选择器
零怀念的博客
08-26 754
NO. 选择器 描述 1 p:nth-child(n|even|odd) 属于其父元素的第n个|第偶数个|第奇数个子元素且为p的元素集合，从1开始 2 p:first-child 属于其父元素的第一个子元素且为p的元素集合 3 p:first-of-type 属于其父元素的第一个为p的子元素的元素集合 4 p:last-chil...
jQuery 语法知识（子元素过滤、内容过滤选择器）
m0_59329828的博客
01-19 404
语法:jQuery(":nth-child(index/even/odd/equation)")语法 :jQuery( ":first-of-type")描述:选择的所有元素之间具有相同元素名称的最后一个兄弟元素。语法:jQuery( ":contains(text)")语法:jQuery(":has(selector)")语法:jQuery(":last-of-type")描述:选择所有相同的元素名称的第一个兄弟元素。描述:选择所有没有子元素的元素(包括文本节点)语法:jQuery(":parent")
使用jQuery子元素过滤选择器选择元素
liu_111111的专栏
04-18 1527
子元素过滤选择器：在页面开发过程中， 常常遇到突出指定某行的需求。虽然使用基本过滤选择器：eq(index)可实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、
jQuery子元素选择器
热门推荐
何明洋的编程技术博客
06-28 1万+
jQuery子元素选择器&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;    &lt;title&gt;子元素选择器&lt;/title&gt; &lt;meta charse
[JQ权威指南]第四天：使用jQuery子元素过滤选择器
德仔
06-16 1318
<!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> <meta http-equiv="Content-Ty
JQuery中过滤选择器
you4580的专栏
03-22 362
语法： :header 获得标题（h1~h6）元素，固定写法。语法： :not(selector) 不包括指定内容的元素。语法： :first 获得选择的元素中的第一个元素。语法： :last 获得选择的元素中的最后一个元素。语法： :gt(index) 大于指定索引元素。语法： :lt(index) 小于指定索引元素。语法： :even 偶数，从 0 开始计数。语法： :eq(index) 指定索引元素。语法： :odd 奇数，从 0 开始计数。
简单讲解jQuery中的子元素过滤选择器
10-22
主要介绍了jQuery中的子元素过滤选择器,列举了一些操作DOM时获取父元素的一些方法,需要的朋友可以参考下
jQuery选择器之子元素过滤选择器
10-19
在这个话题中，我们将深入探讨jQuery子元素过滤选择器，并通过实例来理解其工作原理。 首先，让我们了解几个重要的子元素过滤选择器： 1. `:nth-child(n)`：这个选择器用来选取父元素的第n个子元素。例如，在`$(...
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]HTTP代理服务器开发与实现.zip
07-27
[毕设]HTTP代理服务器开发与实现
PyQt5-5.15.11-cp38-abi3-win32.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
jupyterlab_broccoli_turtle-0.4.7-py3-none-any.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pillow-10.4.0-cp311-cp311-win32.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
jQuery教程：子元素过滤选择器与优势解析
"子元素过滤选择器-jQuery_課件" jQuery 是一款广泛应用于网页开发的JavaScript库，它的核心优势在于简化DOM操作、提供强大的选择器和流畅的动画效果。jQuery的理念是“Write Less, Do More”，即用更少的代码实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值