JQuery_超详细重点详解(三)

淩亂°似流年 2023-02-25 08:58 1阅读 0赞

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

可直接点下方链接跳转:

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

[JQuery\_超详细重点详解(二) <----点击学习][JQuery_ _----]

**话不多说,立刻开始今天的旅程吧~~~**

**目录**

一.JQ常见事件

二. 属性操作：prop和attr

三.JQ数组遍历

四.this关键字总结

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

# 一.JQ常见事件 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70][]

> JS：onxxxx，允许标签绑定事件   <标签名 事件名=”方法()”/>
> 
> JQ：没有on HTML-DOM方式

我们以鼠标移入、移出和点击事件为例讲解：

*  鼠标移入：mouseover
 *  鼠标移出：mouseout
 *  点击事件：click

格式：

**JQ对象****.mouseover(****fn****)****;**

<script src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function () {
                //获取标签对象
                var b1 = $("#b1");
                //绑定事件
                b1.click(function () {
                    alert("轻点");
                });
                //给b2按钮，绑定点击事件，点击按钮，alert展示按钮名称
                //this:当前对象    JS对象
                $("#b2").click(function () {
                    alert(this.value);
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="点我有惊喜" id="b1"/>
        <input type="button" value="轻点点我" id="b2"/>
    </body>

<style>
            div{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function () {
                var div = $("#dd");
                /*
                //绑鼠标移入
                div.mouseover(function () {
                    $("#t1")[0].value="鼠标移入";
                });
                //绑鼠标移出
                div.mouseout(function () {
                    $("#t1")[0].value="鼠标移出";
                });
                */
                //方式二：链式编程
                div.mouseover(function () {
                    $("#t1")[0].value="鼠标移入";
                }).mouseout(function () {
                    $("#t1")[0].value="鼠标移出";
                });
            });
        </script>
    </head>
    <body>
        <input type="text" id="t1" value=""/>
        <div id="dd"></div>
    </body>

# 二. **属性操作：prop和attr** #

>  *  **prop("属性名");**              获取元素的某个属性的值----------等同于attr("属性名")
>  *  **prop("属性名",属性值);**       设置元素的某个属性为指定值----等同于attr("属性名",属性值)
>  *  removeProp("属性名");        删除元素的某个属性的值-----------等同于removeAttr("属性名");

<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、获取d2这个div标签的class值
                var x = $("#d2").prop("class");
                //alert(x);
                //2、设置d1这个div标签样式为blueDiv
                $("#d1").prop("class","blueDiv");
                //3、移除d2这个div标签的redDiv样式
                $("#d2").removeProp("class");
            });
        </script>
    </head>
    <body>
        <div id="d1">11111</div>
        <div id="d2" class="redDiv">22222</div>
    </body>

prop是新方法，attr老方法。

1.  **标签自定义属性，只能用attr方法**
2.  **其他所有情况均用prop**

<script src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function () {
                //1、获取按钮的名称
                //alert( $("#i1").prop("value") );
                //alert( $("#i1").attr("value") );
                //2、获取按钮的自定义属性
                alert( $("#i1").prop("xudongming") );
                alert( $("#i1").attr("xudongming") );
            });
        </script>
    </head>
    <body>
        <input id="i1" type="button" value="今天周五" xudongming="dengwei"/>
    </body>

# 三.JQ数组遍历 #

JS数组(length)和JQ数组(size())。

JQ数组 = $(JS数组);

![20200711230835525.png][]

each中的fn为每循环一次，就会调用一次的函数。（回调函数）

格式：

> **function(index)\{** 
> 
> **//index 为当前遍历的索引****，****从****0开始**
> 
> **//this  为当前遍历出来的元素****，****这个元素是****JS对象**
> 
> **\}**

<script src="../js/jquery-1.11.3.min.js"></script>
    <script>
        //JS数组
        var arr = ["aa","bb","cc"];
        //JQ数组
        var brr = $(arr);
    
        //完整遍历方式：
        //index 索引  从0开始
        //this:当前遍历元素
        brr.each(function (index) {
            alert(this+"----------"+index);
        });
        //简便版：（最多）
        brr.each(function () {
            alert(this);
        });
        //其他方式：（看懂）
        $.each(brr,function (index) {
            alert(this+"----------"+index);
        })
    </script>

# 四.**this关键字总结** #

> 1、当前标签
> 
> <img src=”” οnclick=”run1(this)”/>
> 
> 指的是当前所在的img标签

> 2、当前对象
> 
> JQ元素对象.事件名(function()\{
> 
> this
> 
> \});
> 
> 指的是当前绑定事件的JQ元素对象
> 
>

> 3、当前遍历元素
> 
> JQ数组.each(function()\{
> 
> this
> 
> \});
> 
> 指的是当前遍历出来的元素

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

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

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

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

[JQuery_ -_----]: https://blog.csdn.net/qq_43705131/article/details/107216523
[JQuery_ _----]: https://blog.csdn.net/qq_43705131/article/details/107271188
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70]: /images/20230209/76c2043bc98a44b8a0a6ba240de9d970.png
[20200711230835525.png]: /images/20230209/628f5b55fb7d49eaac1d9384a6495262.png

发表评论取消回复

表情：

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

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

相关阅读

相关【超详细】MyBatis详解

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

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

相关【超详细】Maven详解

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关数据库设计的三范式超详细详解

目录写在前面第一范式（1NF）：原子性（存储的数据应该具有“不可再分性”）第二范式（2NF）：唯一性 (消除非主键部分依赖联合主键中的部分字段)（一定要在第一范式已

我会带着你远行/ 2022年10月31日 00:38/ 0 赞/ 111 阅读

相关 jQuery_选择器超详细

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

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

相关超详细！ActionBar使用详解

转自:[https://www.cnblogs.com/mjsn/p/6150824.html][https_www.cnblogs.com_mjsn_p_6150824.ht

忘是亡心i/ 2022年01月22日 02:33/ 0 赞/ 1069 阅读

相关初始三层架构（超超超详细）

目录何为三层? 在代码中如何实现 DAL层的思维逻辑 BLL层的思维逻辑 UI层的思维逻辑 -------------------- 三层架构你还不太懂吗？赶紧

布满荆棘的人生/ 2021年09月24日 14:18/ 0 赞/ 621 阅读