jQuery

最新推荐文章于 2025-06-03 18:54:56 发布

木木玺

最新推荐文章于 2025-06-03 18:54:56 发布

阅读量169

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44921664/article/details/121788863

版权

jQuery

一、 jQuery

1.jQuery总体概况如下 :

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
j 就是 JavaScript； Query 查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质：就是学习调用这些函数（方法）。
jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

2.jQuery的优点

轻量级。核心文件才几十kb，不会影响页面加载速度。
跨浏览器兼容，基本兼容了现在主流的浏览器。
链式编程、隐式迭代。
对事件、样式、动画支持，大大简化了DOM操作。
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
免费、开源。

3.jQuery 的基本使用

jQuery中常见的两种入口函数：

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

总结：

等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
相当于原生 js 中的 DOMContentLoaded。
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
更推荐使用第一种方式。

4. jQuery中的顶级对象$

$是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

5. jQuery 对象和 DOM 对象

使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :

用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注意：

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

6. jQuery 对象和 DOM 对象转换

DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM 对象有两种方法：
//   2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

总结：实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。

二、jQuery 选择器

1.基础选择器

$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OJp6mtts-1638940480387)(assets\基础选择器.png)]

2. 层级选择器

层级选择器最常用的两个分别为：后代选择器和子代选择器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jodHABlW-1638940480394)(assets\层级选择器.png)]

3.筛选选择器

筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DaXKIc1y-1638940480395)(assets\筛选选择器.png)]

另: jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tcJYsjwH-1638940480397)(assets\relation.png)]

4 知识铺垫

jQuery 设置样式

$('div').css('属性', '值')

jQuery 里面的排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

隐式迭代

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

链式编程

// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');

三、 jQuery 样式操作

1. 方法1: 操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。

常用以下三种形式 :

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

注意：css() 多用于样式少时操作，多了则不太方便。

2. 方法2: 设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点。

常用的三种设置类样式方法：

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

注意：

设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

3.jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

显示隐藏：show() / hide() / toggle() ;
划入画出：slideDown() / slideUp() / slideToggle() ;
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
自定义动画：animate() ;

注意：

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

jQuery为我们提供另一个方法，可以停止动画排队：stop() ;

1. 显示隐藏

显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;

语法规范如下:

4.停止动画排队

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止动画排队的方法为：stop() ;

stop() 方法用于停止动画或效果。
stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。

总结: 每次使用动画之前，先调用 stop() ,在调用动画。

5… 事件切换

jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下

语法

hover([over,]out)     // 其中over和out为两个函数

over:鼠标移到元素上要触发的函数（相当于mouseenter）
out:鼠标移出元素要触发的函数（相当于mouseleave）
如果只写一个函数，则鼠标经过和离开都会触发它

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yd2duc4G-1638940480400)(assets\总结.png)]

四、 jQuery 属性操作

jQuery 常用属性操作有三种：prop() / attr() / data() ;

1 元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如元素里面的 href ，比如元素里面的 type。

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sROU0w9d-1638940480402)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/prop.png)]

注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

2 元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Orlj1tar-1638940480404)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/attr.png)]

注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

3 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iyEwV0TB-1638940480406)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/data.png)]

注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

五、 jQuery 文本属性值

jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。

1.2.1 jQuery内容文本值

常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s1Mq39ha-1638940480408)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/html.png)]

注意：html() 可识别标签，text() 不识别标签。

我是内容

六、jQuery 元素操作

jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。

1. 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cLV7H8KN-1638940480410)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/each1.png)]

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

语法2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vOdV0gic-1638940480412)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/each2.png)]

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

演示代码

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            var arr = ["red", "green", "blue"];
            // 1. each() 方法遍历元素 
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(i);
                // 回调函数第二个参数一定是 dom 元素对象，也是自己命名
                // console.log(domEle);  // 使用jQuery方法需要转换 $(domEle)
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            })
        })
    </script>
</body>

2. 创建、添加、删除

jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：

语法总和

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aT9XCkWB-1638940480414)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/create.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9B7Gv8jD-1638940480415)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/append1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NlnyFkgj-1638940480417)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/append2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9LEt9yRm-1638940480419)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/remove.png)]

注意：以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API。

案例代码

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");
      
            // 2. 添加元素
            // 	2.1 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面
            //  2.2 外部添加
            var div = $("<div>我是后妈生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
      
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
        })
    </script>
</body>

七、 jQuery 尺寸、位置操作

jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。

1. jQuery 尺寸操作

jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UugEGM88-1638940480421)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/size.png)]

代码演示

<body>
    <div></div>
    <script>
        $(function() {
            // 1. width() / height() 获取设置元素 width和height大小 
            console.log($("div").width());
            // $("div").width(300);

            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
            console.log($("div").outerWidth(true));
        })
    </script>
</body>

注意：有了这套 API 我们将可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。

2. jQuery 位置操作

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OHK2sQuO-1638940480423)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/offset.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cujNQSig-1638940480425)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/position.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZUlKiKI5-1638940480427)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day02/4-笔记/images/scroll.png)]

代码演示

<body>
    <div class="father">
        <div class="son"></div>
    </div>
        
    <div class="back">返回顶部</div>
    <div class="container"></div>
   
    <script>
        $(function() {
            // 1. 获取设置距离文档的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
      
            // 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
            // 这个方法只能获取不能设置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
      
      		// 3. 被卷去的头部
      		$(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })
        })
    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MdTbnLpC-1638940480429)(assets\总结1.png)]

八、jQuery 事件

jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：

优点: 操作简单，且不用担心事件覆盖等问题。
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BKtPabuj-1638940480431)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day03/4-笔记/images/register.png)]

演示代码

<body>
    <div></div>
    <script>
        $(function() {
            // 1. 单个事件注册
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

1. jQuery 事件处理

因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下：

on(): 用于事件绑定，目前最好用的事件绑定方法
off(): 事件解绑
trigger() / triggerHandler(): 事件触发

1.1 事件处理 on() 绑定事件

因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkJWkgaP-1638940480433)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day03/4-笔记/images/on1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O5O7vO1p-1638940480434)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day03/4-笔记/images/on2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HhV4bmDF-1638940480436)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day03/4-笔记/images/on3.png)]

演示代码

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol></ol>

    <script>
        $(function() {
            // (1) on可以绑定1个或者多个事件处理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
  
            // (2) on可以实现事件委托（委派）
            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });

            // (3) on可以给未来动态创建的元素绑定事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);
        })
    </script>
</body>

1.2 事件处理 off() 解绑事件

当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lHdPhrbB-1638940480438)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day03/4-笔记/images/off.png)]

演示代码

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是一个P标签</p>
	<script>
        $(function() {
  			// 事件绑定
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log('我鼠标经过了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
  
            // 1. 事件解绑 off 
            // $("div").off();  // 这个是解除了div身上的所有事件
            $("div").off("click"); // 这个是解除了div身上的点击事件
            $("ul").off("click", "li");
  
            // 2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</body>

1.3 事件处理 trigger() 自动触发事件

有些时候，在某些特定的条件下，我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JtcBKGMf-1638940480441)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day03/4-笔记/images/t1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D5v07IQR-1638940480442)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day03/4-笔记/images/t2.png)]

演示代码

<body>
    <div></div>
    <input type="text">
      
    <script>
    $(function() {
      // 绑定事件
      $("div").on("click", function() {
        alert(11);
      });

      // 自动触发事件
      // 1. 元素.事件()
      // $("div").click();会触发元素的默认行为
      
      // 2. 元素.trigger("事件")
      // $("div").trigger("click");会触发元素的默认行为
      $("input").trigger("focus");
      
      // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
      $("input").on("focus", function() {
        $(this).val("你好吗");
      });
      // 一个会获取焦点，一个不会
      $("div").triggerHandler("click");
      // $("input").triggerHandler("focus");
    });
    </script>
</body>

2. jQuery 事件对象

注意：jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ph4G9Hr2-1638940480445)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day03/4-笔记/images/event.png)]

演示代码

<body>
    <div></div>

	<script>
        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })
        })
    </script>
</body>

注意：jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。

2.1. jQuery 拷贝对象

jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lXy2pxLe-1638940480447)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day03/4-笔记/images/extend.png)]

演示代码

 <script>
        $(function() {
   			// 1.合并数据
            var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj);
   
   			// 2. 会覆盖 targetObj 里面原来的数据
            var targetObj = {
                id: 0
            };
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj); 
        })
    </script>

2.2. jQuery 多库共存

实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g55kCCmW-1638940480449)(G:/html笔记/07-10 JavaScript网页编程/03-jQuery快速开发资料/jQuery_day03/4-笔记/images/noconfig.png)]

演示代码

<script>
	$(function() {
  		// 让jquery 释放对$ 控制权 让用自己决定
  		var suibian = jQuery.noConflict();
  		console.log(suibian("span"));
	})
</script>

3. jQuery 插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A5wrg9ur-1638940480450)(assets\总结2.png)]