jQuery自我学习笔记（面向面试版）

最新推荐文章于 2024-06-16 18:09:06 发布
最新推荐文章于 2024-06-16 18:09:06 发布
阅读量150 收藏 2
点赞数 2
分类专栏： jQuery 文章标签： jquery javascript 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45757356/article/details/126378694
版权

jQuery

1、jQuery的概念

总体概述如下

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

2、jQuery的优点

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

3、jQuery的入口函数

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

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

4、jQuery中的顶级对象$

  1. 是 j Q u e r y 的别称， 是jQuery的别称， 是jQuery的别称，()函数是jQuery()函数的别称。在代码中可以使用jQuery代替，但一般为了方便，通常都直接使用$
  2. 是 j Q u e r y 的顶级对象，相当于原生 J a v a S c r i p t 中的 w i n d o w 。把元素利用 是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用 是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用包装成jQuery对象，就可以调用jQuery的方法。

5、如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？(多库共存)

可以使用jQuery noConflict() 方法

noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。

实现方式1：
//可以通过全名替代简写的方式来使用 jQuery：
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行！");
  });
});
实现方式2：
//可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行！");
  });
});
实现方式3:
//不愿意改变这个快捷方式,可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在运行！");
  });
});

6、jQuery对象和DOM对象

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

  1. 用原生JS获取来的对象就是DOM对象。
  2. jQuery方法获取来的元素就是jQuery对象。
  3. jQuery对象本质是：利用$对DOM对象包装后产生的对象(为数组形势存储)。

7、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中的方法。

8、说一说你知道的jQuery选择器有哪些？

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号
  • 基本选择器：直接根据id、CSS类名、元素名返回匹配的DOM元素。
  • 层级选择器：也叫做路径选择器，可以根据路径层次来选择相应的DOM元素。parent > child,prev + next, prev ~siblings
  • 表单选择器： :input ,:text ,:password ,:raido ,:checkbox ,:submit等
  • 过滤选择器： 在前面的基础上过滤相关条件，得到匹配的DOM元u尿素。基本过滤选择器： :first , :last ,:not ,:even ,:odd ,:eq ,:gt ,:lt 内容过滤器选择器： :hidden , :visible。属性过滤器选择器 :[attribute] ,[attribute=value],子元素过滤器选择器: :nth-child, :first-child ,:last-child , :only-child 。**表单过滤选择器: ** :enabled, :disabled , :checked ,:selected。

9、jQuery中的选择器和css中的选择器有区别吗？

  • jQuery选择器支持CSS里的选择器。
  • jQuery选择器可用来添加样式和添加相应的行为。
  • CSS中的选择器是只能添加相应的样式。

10、jQuery 样式操作

jQuery中常用的样式操作有两种：css() 和 设置类样式方法

方法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: 设置类样式方法

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

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

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

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

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


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

11、jQuery中如何来获取或和设置属性？

  • jQuery 中可以用 attr()方法来获取和设置元素属性
  • 用 removeAttr() 方法来删除元素属性
  • data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。 设置 ( " s p a n " ) . d a t a ( " u n a m e " , " a n d y " ) ; 获取 ("span").data("uname", "andy");获取 ("span").data("uname","andy");获取(“span”).data(“uname”)
  • 元素固有属性值 prop(),所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。

12、jQuery中遍历节点的常用方法

  • children() 获取子元素,只考虑子元素不考虑后代元素
  • next() 获取下一个紧邻的兄弟元素
  • prev() 获取上一个紧邻的兄弟元素
  • siblings() 获取当前元素的所有兄弟元素（除了自己）
  • parents() 获取当前元素的所有祖先元素。
  • find() 取得匹配元素中的元素集合 包括子代和后代

13、${document}.readey()是个什么函数？为什么要用它?

ready()函数用于在文档进入ready状态时执行代码。当DOM完全加载(例如HTML被完全解析DOM树构建完成时)，jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决乐跨浏览器的难题。

14、JS 的window.onload事件和jQuery ready函数有何不同？

JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。

另 一方面，使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

15、哪种方式更高效：document.getElementbyId(“myId”) 还是 $(“#myId”)？

第一种，因为它直接调用了 JavaScript 引擎。

16、 jQuery 中$(this) 和 this 关键词有何不同？

  • $(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。
  • this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

17、说一说你了解的动画效果方法

jQuery 给我们封装了很多动画效果，最为常见的如下：
  • 显示隐藏：show() / hide() / toggle() ;
  • 划入画出：slideDown() / slideUp() / slideToggle() ;
  • 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
  • 自定义动画：animate() ;

注意：

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

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

显示隐藏，show() / hide() / toggle()3个参数都一样

show([spedd, [easing], [fn] ])

  1. 参数都可以省略，无动画直接显示。
  2. speed: 三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒值(如: 1000)。
  3. easing： (Optional)用来指定切换效果，默认是"swing",可用参数(linear)
  4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
              $("div").toggle(1000);
            })
            // 一般情况下，我们都不加参数直接显示隐藏就可以了
        });
    </script>
</body>

滑入滑出，slideDown() / slideUp() / slideToggle()3个参数都一样

淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

fadeTo([[spedd], opacoty,[easing], [fn] ])

  1. opacity 透明度必须写，取值0~1之间。
  2. speed: 三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒值(如: 1000)，必须写
  3. easing： (Optional)用来指定切换效果，默认是"swing",可用参数(linear)
  4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

自定义动画animate()

animate(params,[speed],[easing],[fn])

  1. params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是符合属性则需要取驼峰命名法。其余参数都可以省略。

    • width/height

    • top/bottom/left/right

    • margin/padding/border-width

    • font-size

    • opacity

    • scrollTopborderLeft。

  2. speed: 三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒值(如: 1000)，必须写

  3. easing： (Optional)用来指定切换效果，默认是"swing",可用参数(linear)

  4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

停止动画排队

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

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

  • stop() 方法用于停止动画或效果。

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

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

18、jQuery中的hover()和toggle()有什么区别？

  • hover(fn1,fn2)： 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

    //当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr").hover(function(){    
    $(this).addClass("over");
},              
function(){    
    $(this).addClass("out"); 
});

  • toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

    //每次点击时轮换添加和删除名为selected的class。
$("p").toggle(function(){   
    $(this).addClass("selected");   
},function(){   
    $(this).removeClass("selected"); 
});

19、事件委托怎么写

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

$(".result").on("click", ".del", function() {

  $(this).addClass("deleted");

});

20、如何将form里面所有表单的value获取出来？表单序列化 serialize();

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。

您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。

序列化的值可在生成 AJAX 请求时使用。

22、jQuery内容文本值

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

23、jQuery 元素操作

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

遍历元素

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

语法1

$(“div”).each(function (index, domEle) {xxx;}

  1. $.each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
  2. 里面的回调函数有2个参数: index是每个元素的索引号，demEle是每个DOM元素对象，不是jQuery对象
  3. 所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)

$(“div”).each(object, function (index, element) {xxx;}

  1. $.each()方法遍历任何对象，主要用于数据处理，比如数组，对象
  2. 里面的函数有2个参数：index是每个元素的索引号；element遍历内容
<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>

创建、添加、删除

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

1、创建 $(“

  • ”);

    2、内部添加 element.append(“内容”)

    把内容放入匹配元素内部最后面，类似原生appendChild。

    element.prepend(“内容”) 把内容放入匹配元素内部最前面

    3、外部添加

    element.after(“内容”) 把内容放入目标元素后面，

    element.before(“内容”) 把内容放入目标元素前面

    tip：内部添加元素，生成之后，他们是父子关系。

    	 外部添加元素，生成之后，他们是兄弟关系。

    4、删除元素

    element.remove() 删除匹配的元素(本身)

    element.empty() 删除匹配的元素集合中所有的子节点

    element.empty(“”) 清空匹配的元素内容

    tip：remove 删除元素本身

    empty() 和 html(“”) 作用等价，都可以删除元素里面的内容，只不过html还可以设置内容。

    24、jQuery 尺寸、位置操作

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

    jQuery 尺寸操作

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

    语法用法
    width()/height()取得匹配元素宽度和高度值 只算width/height
    innerWidth()/innerHeight()取得匹配元素宽度和高度值 包含padding
    outerWidth()/outerHeight()取得匹配元素宽度和高度值 包含padding、border
    outerWidth(true)/outerHeight(true)取得匹配元素宽度和高度值 包含padding、border、margin
    • 以上参数为空，则是获取响应值，返回的是数字型
    • 如果参数是数字，则是修改相应值
    • 参数可以不必写单位
    <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>

    jQuery 位置操作

    jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft()
    1. offset()设置或获取元素偏移
      1. offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
      2. 该方法有2个属性，left、top。offset().top 用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
      3. 可以设置元素的偏移：offset({top: 10,left:30});
    2. position()获取元素偏移
      1. position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
      2. 该方法有2个属性，left、top。position().top 用于获取距离定位父级顶部的距离，offset().left用于获取定位父级左侧的距离。
      3. 该方法只能获取
    3. scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
      1. scrollTop()方法设置或返回备选元素被卷去的头部
      2. 不跟参数是获取，参数为不带单位的数字则是设置被卷去头部。
    <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>

    25、jQuery拷贝对象

    jQuery中分别为我们提供了深浅拷贝对象的API，方便使用

    语法：

    $.etend([deep],target,object1,[objectN])

    1. deep:如果设为true为深拷贝，默认为false 浅拷贝
    2. target:要拷贝的目标对象
    3. object1： 待拷贝到第一个对象的对象
    4. objectN：待拷贝到第N个对象的对象
    5. 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响背靠背对象
    6. 深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象。
    <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>

    26、jQuery事件对象

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

    element.on(eventsm,[selector],function(event) {} )

    阻止默认行为： event.preventDefault() 或者 return false

    阻止冒泡： event.stopPropagation()

    27、jQuery事件注册

    jQuery为我们提供了方便的事件注册机制，是开发人员易于操作优缺点

    优点：操作简单，且不用担心事件覆盖等问题

    缺点：普通的事件注册不能做事件委托，且无法实现解绑，需要借助其他方法。

    语法：

    element.事件(function(){})

    $("div").click(function(){事件处理程序})

    其他事件和原生基本一致

    比如mouseover、mouseout、blur、focus、change、keydown、keyup、scroll等

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

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

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

    on()绑定事件

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

    方法优势1：

    可以绑定多个事件，多个处理事件处理程序

    $("div").on({
	mouseover: function(){},
	mouseout: function(){},
	click: function(){}
});

    如果事件处理程序相同

    $("div").on("mouseover mouseout", function(){
	$(this).toggleClass("current");
});
    方法优势2：

    可以事件委派操作。事件委派定义时，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

    $('ul').on('click','li',function(){
	alert('hello he1sen');
});

    在此之前bind(),live(),delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

    方法优势3：

    动态创建的元素，click()没有办法绑定事件，on() 可以给动态生成的元素绑定事件

    $("div").on("click","p",function(){
	alert("可以给动态生成的元素绑定事件")
});

    $("div").append($("<p>我是动态创建的p</p>"));

    代码演示

    <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>
he1sen
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery 入门级学习笔记及
10-29
本周公司技术讲座轮到我了，准备说说现在流行的jQuery，下面是概要提纲，关键是看custom.js，已上传源码，程序中“//##”是分段用的，大家可以根据每一段取消注释，然后找到相应的id或class名查看效果。
Jquery学习笔记分享
11-24
第1章. JQuery概述 2 1. Jquery基本作用 2 2. 优点 2 3. 引入JQuery 2 4. 代码风格 2 5. 其他 JavaScript 库 3 6. 多个库之间的冲突 3 7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择...
锋利的JQuery学习笔记.pdf
08-14
锋利的JQuery学习笔记
Jquery 基础学习笔记之文档处理
12-11
主要包括以下几部分：（1）内部插入（2）外部... HTML 代码: <p>I would like to say: </p> jQuery 代码: $(“p”).append(“<b>Hello”); 结果: [ <p>I would like to say: <b>Hello</b></p> ] （2）appendTo(content)
jQuery学习笔记 更改jQuery对象
12-04
jQuery代码的任务就是生成jQuery对象A，操作jQuery对象A；生成jQuery对象B，操作jQuery对象B……但是若此过程中，对象A、B……之间有某种关系，那么完全没必要一个个去$(selector)，这很繁琐的。因此jQuery提供了...
工具链--nuxt框架 简介（一）
最新发布
qq_35876316的博客
06-16 337
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1461
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
JS-12-es6常用知识-async
m0_68467925的博客
06-13 621
关键字async作用：声明一个函数为异步函数，允许函数内部使用await关键字等待 Promise 对象的完成。返回值：异步函数总是返回一个 Promise 对象，无论函数内部是否有显式的return语句。如果没有返回语句，函数会隐式地返回一个已解析（resolved）的 Promise，其值为undefined。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 576
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 886
Vue在表单校验中trigger属性指定何时触发校验规则
vue格网图
南北粉面馆
06-16 300
【代码】vue格网图。
vue3 防止按钮的连续点击（连点）
MtangEr的博客
06-13 359
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
【JavaScript】简单数据类型 与 复杂数据类型 ① ( 堆内存和栈内存 | 简单数据类型内存存储 | 复杂数据类型内存存储 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
06-12 1288
一、简单数据类型 1、简单数据类型简介 2、简单数据类型 null 空类型的特殊性 二、复杂数据类型 三、堆内存和栈内存
？和？？的用法 ---Javascript
weixin_45705239的博客
06-13 224
当你在JavaScript中看到问号（?）和双问号（??）时，它们通常是用于条件处理和空值合并的操作符。
使用nodejs/exceljs读取、操作、写入excel文件
qiuzen的博客
06-12 392
【代码】使用nodejs/exceljs读取、操作、写入excel文件。
07_第七章 前端工程化
weixin_65644655的博客
06-13 813
第七章 前端工程化 一、前端工程化开篇 1.1 什么是前端工程化 前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本。 1.2 前端工程化实现技术栈 前端工程化实现的技术栈有很多,我们采用ES6+nodejs+npm+Vite+VUE3+router+pinia+axios+Element-plus组合来实现 ECMAScript6 VUE3中大量使用ES6语法 Nodejs 前端
TS:元组
fury的博客
06-15 477
元组（Tuple）是一种数据结构，类似于数组，但与数组不同的是，元组中的元素类型可以各不相同，且元组的长度是固定的。- **固定类型**：元组中每个位置的元素类型在定义时确定，之后不能改变。3. **多维坐标**：例如表示三维空间的坐标 `[x, y, z]`。3. **顺序相关**：元组中的元素是有序的，可以通过索引访问。1. **类型安全**：元素类型固定，能提供更好的类型检查。- **固定长度**：元组的长度在定义时确定，之后不能改变。2. **多种类型**：元组中的每个元素可以是不同的类型。
使用 Vue 和 Ant Design 实现抽屉效果的模块折叠功能
ping
06-13 334
有两个模块，点击上面模块的收起按钮时，上面的模块可以折叠，下面的模块随之扩展。接下来，在模板中使用。
如何在CSS中添加自定义属性
ggq53219的博客
06-14 228
你还可以在JavaScript中读取和修改自定义属性。这些属性将作为CSSStyleDeclaration对象上的属性被暴露出来，但它们的名称不包含。注意，当你使用JavaScript修改自定义属性时，这些变化将立即反映到任何使用了这些属性的CSS规则上，因为CSS变量是动态的。在CSS中，你可以使用自定义属性（也称为CSS变量）来定义可以在整个文档中重用的值。如果引用的属性不存在或无效，你可以提供一个回退值（fallback value）。）或任何其他的CSS选择器内部定义自定义属性。
jQuery学习笔记——事件
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要绑定事件的元素，`event` 表示要绑定的事件类型，比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。 2. 多个事件绑定 我们可以通过 `on()` 方法来同时绑定多个事件： ``` $(selector).on({ event1: function(){ // 事件处理程序1 }, event2: function(){ // 事件处理程序2 } }) ``` 这样，当 `event1` 或 `event2` 中任意一个事件触发时，对应的处理程序都会被执行。 3. 解除事件 如果需要解除某个元素的事件处理程序，可以使用 `off()` 方法： ``` $(selector).off(event); ``` 其中，`event` 表示要解除的事件类型。如果不指定事件类型，则会解除该元素上所有的事件处理程序。 4. 事件委托 在 jQuery 中，我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上，而不是绑定到子元素上，然后通过事件冒泡来判断是哪个子元素触发了该事件。这样，当子元素数量较多时，只需要绑定一次事件，就可以监听到所有子元素的事件。 ``` $(selector).on(event, childSelector, function(){ // 事件处理程序 }) ``` 其中，`selector` 表示父元素，`event` 表示要绑定的事件类型，`childSelector` 表示要委托的子元素的选择器，事件处理程序则是在子元素触发事件时要执行的代码块。 以上是 jQuery 中事件的一些基本操作，希望对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值