JQuery_超详细重点详解(二)

古城微笑少年丶 2023-02-25 07:17 7阅读 0赞

这一篇让我们继上篇详解~

想看第一篇开头的可直接点下方链接

[JQuery超详细快速入门详解(一) -<----点击学习][JQuery_ -_----]

话不多说,开始今天的干货, 上货~~~

**目录**

一. JQ-层级选择器

二.JQ-属性选择器（通配符）

三. JQ-基本过滤选择器【重点】

四.JQ-表单属性选择器

五.JQ-操作CSS样式

--------------------

# 一. **JQ-层级选择器** #

父子：

1.  **A**** ****B**    获得A元素内部的所有的B元素。（祖孙）--后代
2.  **A>B**   获得A元素下面的所有B子元素。（父子）

*兄弟：*

1.  *A+B* *  **获得A元素同级下一个B元素（兄弟）*
2.  *A~B   获得A元素之后的所有B元素（兄弟）*

<script src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function(){
                //1、获取id为main的span标签 内 所有的div标签
                var arr1 = $("#main div");//4
                //2、获取id为main的span标签 内 子元素div标签
                var arr2 = $("#main>div");//3
                //3、获取id为main的span标签 后 第一个div兄弟标签
                var x3 = $("#main+div");
                //4、获取id为main的span标签 后 所有的div兄弟标签
                var arr4 = $("#main~div");//2
            });
        </script>
    
    </head>
    <body>
        <span id="main">
            <div>111111</div>
            <div>222222</div>
            <div>333333</div>
            <span>
                <div>44444</div>
            </span>
        </span>
        <div>55555</div>
        <span>
            <div>66666</div>
        </span>
        <div>77777</div>
    </body>

# 二.JQ-属性选择器（通配符） #

>  *  \[属性名\] 获得有 **指定属性名** 的标签对象。
>  *  **\[属性名=值\]**  获得 指定属性名**等于**指定值 的标签对象
>  *  **\[属性名\*=值\]**  获得 指定属性名 **含有** 指定值 的标签对象

> 多个属性选择器可以组合使用
> 
>  *  \[选择器1\]\[选择器2\]\[选择器3\] ，多个属性同时过滤。where .. and ... and ...

> 了解：
> 
>  *  *\[属性名!=值\]* *获得 指定属性名****不等于****指定值 的标签对象*
>  *  *\[属性名^=值\]* *获得 指定属性名以指定值* ***开头**** 的标签对象*
>  *  *\[属性名$=值\]* *获得 指定属性名以指定值* ***结尾**** 的标签对象*

<script>
            $(function(){
                //1、获取所有存在type属性的标签
                var arr1 = $("[type]");
                //2、获取所有type属性为radio的标签
                var arr2 = $("[type='radio']");
                //3、获取所有type属性含有o的标签
                var arr3 = $("[type*='o']");
                //4、获取所有input标签中的单选框，且name为sex的标签
                var arr4 = $("input[type='radio'][name='sex']");
            });
        </script>
    </head>
    <body>
        用户名：<input type="text" name="uname" value="小刘"/><br />
        密码：<input type="password" name="pwd" value="123"/><br />
        性别：<input type="radio" name="sex" value="man" />男
        <input type="radio" name="sex" value="woman" />女<br />
        是否VIP：<input type="radio" name="vip" value="no" />不是
        <input type="radio" name="vip" value="yes" />是<br />
    </body>

# 三. **JQ-基本过滤选择器【重点】** #

> 筛选。
> 
>  *  **:first** 第一个
>  *  **:last** 最后一个
>  *  **:even** 偶数，索引从 0 开始计数
>  *  **:odd** 奇数
>  *  **:not(..)** 除了指定内容。例如：1234:not(3)  --> 124   例如：div:not(div:first)
>  *  **:eq(index)** 获取指定索引的元素 =
>  *  :gt(index) 大于n个 >
>  *  :lt(index) 小于n个 <

<script>
            $(function(){
                //1、在所有DIV标签中，获取第一个div
                var x1 = $("div:first");
    //            alert(x1.html());
                //2、在所有DIV标签中，获取最后一个div
                var x2 = $("div:last");
                //3、在所有DIV标签中，获取所有偶数位的div。索引从0开始，0偶数
                var arr3 = $("div:even");
                //4、在所有DIV标签中，获取所有奇数位的div
                var arr4 = $("div:odd");
                //5、在所有DIV标签中，获取除了第一位以外所有的div
                var arr5 = $("div:not(div:first)");
                //6、在所有DIV标签中，获取索引等于1的div
                var x6 = $("div:eq(1)");
                //7、在所有DIV标签中，获取索引大于1的div
                var arr7 = $("div:gt(1)");
                //8、在所有DIV标签中，获取索引小于1的div
                var arr8 = $("div:lt(1)");
            });
        </script>
    </head>
    <body>
        <div>11111111，索引是0</div>
        <div>22222222，索引是1</div>
        <div>33333333，索引是2</div>
        <div>44444444，索引是3</div>
        <div>55555555，索引是4</div>
        <div>66666666，索引是5</div>
        <div>77777777，索引是6</div>
        <div>88888888，索引是7</div>
    </body>

# 四.JQ-表单属性选择器 #

>  *  **:checked** 选中（单选radio ，多选checkbox）  <input type="..."  checked="checked">
>  *  **:selected** 选择（下列列表 <select>）  <option selected="selected">
>  *  :enabled 可用
>  *  :disabled 不可用。<xxx  disabled="disabled"> | <xxx  disabled=" ">  | <xxx  disabled>

<script>
            $(function(){
                //获取可用的表单输入项 <input>
                var arr1 = $("input:enabled");
                //获取不可用的表单输入项 <input>
                var arr2 = $("input:disabled");
                //获取选中的复选框
                var arr3 = $("input[type='checkbox']:checked");
                //获取国家下拉框中，被选中的option
                var arr4 = $("#country>option:selected");
                //获取未选中的复选框
                var arr5 = $("input[type='checkbox']:not(input[type='checkbox']:checked)");
            });
        </script>
    </head>
    <body>
        <h1>不可用的表单输入项</h1>
        <input type="text" disabled="disabled" />
        <input type="button" value="不可用按钮" disabled="disabled" />
        <h1>复选框</h1>
        <input type="checkbox" name="hobby" value="code"/>编程
        <input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳
        <input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读
        <hr />
        <h1>下拉选择框</h1>
        城市：<select id="city">
            <option value="">请选择</option>
            <option value="bj">北京</option>
            <option value="sh">上海</option>
        </select>
        <hr />
        国家：<select id="country" multiple="multiple">
            <option value="China" selected="selected">中国</option>
            <option value="America" selected="selected">美国</option>
            <option value="Russia">俄罗斯</option>
            <option value="England">英国</option>
        </select>
    </body>

# 五.**JQ-操作CSS样式** #

>  *  addClass() 给指定标签的class属性追加样式
>  *  removeClass() 将标签指定的class属性移除

<style>
            .blueDiv{
                background-color: #87CEFA;
                width:300px;
                height:300px;
            }
            .redDiv{
                background-color: red;
                width:300px;
                height:300px;
            }
        </style>
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function(){
                //1、设置d1这个div标签样式为blueDiv ：  document.getElementById("d1").className="blueDiv";
                $("#d1").addClass("blueDiv");
                //2、移除d2这个div标签的redDiv样式 :   document.getElementById("d2").className="";
                $("#d2").removeClass("redDiv");
            });
        </script>
    
    </head>
    <body>
        <div id="d1">11111</div>
        <div id="d2" class="redDiv">22222</div>
    
    </body>

扩展：

> 使用jQuery直接操作CSS：
> 
>  *  JQ.css("CSS属性"); 获取某个CSS属性值。
>  *  JQ.css("CSS属性","CSS属性值"); 设置某个CSS属性值。

<style>
            .blueDiv{
                background-color: #87CEFA;
                width:300px;
                height:300px;
            }
        </style>
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function(){
                //设置宽度
                $("#d1").css("width","600px");
                //获取宽度
                alert(  $("#d1").css("width") );
            });
        </script>
    
    </head>
    <body>
        <div id="d1" class="blueDiv">11111</div>
    
    </body>
    </html>

看完恭喜你,又知道了一点点!!!

**你知道的越多,不知道的越多! **

**~感谢志同道合的你阅读,  你的支持是我学习的最大动力 ! ****加油 ,陌生人一起努力,共勉!!**

> **注: 如果本篇有需要改进的地方或错误,欢迎大神们指定一二~~**

[JQuery_ -_----]: https://blog.csdn.net/qq_43705131/article/details/107216523

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关【超详细】MyBatis详解

目录一、什么是MyBatis？二、MyBatis快速入门三、Mapper代理开发四、MyBatis核心配置文件五、配置文件完成增删改查 5.1 环境准备

- 日理万妓/ 2024年03月29日 15:26/ 0 赞/ 98 阅读

相关【超详细】Maven详解

目录一、Maven概述 1.1 提供了一套标准化的项目结构 1.2 提供了一套标准化的构建流程（编译、测试、打包、发布......） 1.3 提供了一套依赖管理机制

落日映苍穹つ/ 2024年03月29日 15:19/ 0 赞/ 102 阅读

相关口腔解剖生理学超详细重点

　一、牙的演化　　（一）各类牙的特点各类动物牙的演化特点鱼类：单锥体、同形牙、多牙列、端生牙两栖类：单锥体、同形牙、多牙列、端生牙爬行

Bertha 。/ 2024年03月25日 23:35/ 0 赞/ 117 阅读

相关 C语言中的指针（重点）超详细

C语言中的指针 1、指针是什么 2、指针和指针类型 2.1、指针 + - 整数 2.2、指针的解引用 3、野指针 3.1、野指

电玩女神/ 2023年10月08日 14:32/ 0 赞/ 55 阅读

相关 java中的类和对象（重点）超详细

java中的类和对象 1、类与对象的初步认知 2、类和对象的实例化 3、类的成员 3.1、字段，属性，成员变量 3.2、方法 3

超、凢脫俗/ 2023年10月08日 14:31/ 0 赞/ 48 阅读

相关 JQuery_超详细重点详解(三)

这一篇让我们继上篇详解~ 可直接点下方链接跳转: [JQuery超详细快速入门详解(一) -<----点击学习][JQuery_ -_----] [JQuery\_超详细

淩亂°似流年/ 2023年02月25日 08:58/ 0 赞/ 43 阅读

相关 JQuery_超详细重点详解(二)

这一篇让我们继上篇详解~ 想看第一篇开头的可直接点下方链接 [JQuery超详细快速入门详解(一) -<----点击学习][JQuery_ -_----] 话不多说

古城微笑少年丶/ 2023年02月25日 07:17/ 0 赞/ 8 阅读

相关 JQuery超详细快速入门详解(一)

目录一.JQ-简述及引入二 .JQ:JS和JQ元素对象互转三. JQ-页面加载完成时四.JQ-基本选择器五.JQ-动画效果 --------

清疚/ 2023年02月24日 08:34/ 0 赞/ 164 阅读

相关超详细快速入门JavaScript详解(二)

今天让我们来继续一起探讨JavaScript吧, 话不多说,开货,滴滴~~~ 目录一. JS运算符 1. 比较运算符 2.特殊情况二.JS函数/方法

小鱼儿/ 2023年02月21日 09:25/ 0 赞/ 31 阅读

相关 jQuery_选择器超详细

一.基本选择器 1. $(“\demo”) ：选择 id为demo的第一个元素 $("demo").css('background','black");

Love The Way You Lie/ 2022年05月22日 12:20/ 0 赞/ 199 阅读