JQuery篇：详细学习JQuery知识点

最新推荐文章于 2024-04-07 10:36:38 发布

飞驰人生@1

最新推荐文章于 2024-04-07 10:36:38 发布

阅读量144

点赞数

文章标签： jquery 学习前端

本文链接：https://blog.csdn.net/weixin_61482485/article/details/132483891

版权

官网：jQuery API 中文文档 | jQuery中文网

1、对比原生JS，JQuery如何获取元素

使用JQuery需要的依赖文件放在gitHub上：GitHub - xhnssgusni/CSDNContext

使用JQuery库之前，需要引入JQuery依赖文件
jquery.min.js 或者是 jquery.js

原生js的键盘触发事件如下：
      window.addEventListener("load", function () {
        document.addEventListener("keyup", function (e) {
          console.log(e.keyCode);
        });
      });

使用jquery写的键盘触发事件：
      $(function () {
        $(document).on("keyup", function (e) {
          console.log(e.keyCode);
        });
      });

      $(function () {
        $(document).keyup(function () {});
      });

所以，使用jquery获取元素对象是使用 $('node') 的格式

2、元素的显示和隐藏

JQuery中元素的显示和隐藏：

show()显示
hide()隐藏

$('node').show()显示某个元素
$('node').hide()隐藏某个元素

结合排他思想：(JQuery可以进行链式编程，非常好用)

$('node').stop().show().sibling().hide()

3、JQuery各种选择器

id选择器	$(id")	获取指定id的元素
全选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	$("div,p,li")	获取多个元素
交集选择器	$("div .test")	交集元素

获取其他元素的方法：

$('li').parent()查找父级
$('ul').children('li')相当于$('ul>li')，最近一级的亲儿子
$('ul').find('li')相当于$('ul li')后代选择器
$('.first').siblings('li')查找兄弟节点，不包括自己本身
$('.first').nextAll()查找当前元素之后所有的同辈元素
$('.last').prevAll()查找当前元素之前的所有的同辈元素
$('div').hasClass('protected')检查当前的元素是否含有某个特定的类名，如果有，则返回true
$('li').eq(2)相当于$('li:eq(2)'),index从0开始


console.log($("li").parent()); //指定最近的父元素，parent()括号可以指定最亲的父元素，但是没避免
console.log($("li").parents()); //指定该元素的所有父级元素
console.log($("li").parents("ul")); //指定该元素的所有父级元素，parents()返回的是所有父级元素，所以可以指定哪一个
console.log($("body").children()); //指定该元素的所有最近的子元素
console.log($("body").children("ul")); //指定该元素的哪个子元素
console.log($("body").find("li")); //指定该元素的哪个子元素,不一样需要最近
console.log($("ul").siblings()); //获取和指定元素平级的兄弟节点
console.log($("ul").siblings("div.div")); //获取指定兄弟节点,获取类名是div的div元素
console.log($("ul").nextAll()); //获取在指定标签之后的全部同级标签
console.log($("ul").prevAll()); //获取指定标签之前的全部的同级标签
console.log($("div:eq(1)").hasClass("div")); //判断某个元素是否包含指定类名
console.log($("ul").children().eq(0) === $("ul li:eq(0)")); //返回结果是false
// 解析：
// 在 jQuery 中，每次使用选择器 $("ul li:eq(0)") 获取元素对象都会返回一个新的 jQuery 对象。
// 尽管两次获取的对象可能包含相同的元素，但它们是不同的对象实例。
console.log($("ul").children().eq(0).text()); //返回结果是：知否知否，应是绿肥红瘦1，
// text()是jquery中的一个获取元素内容的函数,相当于原生js中的innerText
// 除了text()可以获取内容之后，下面是获取内容和属性的方法：
// val()：获取或设置表单元素的值 $("input").val("new value");
// attr()：获取或设置元素的属性值 $("selector").attr("attributeName", "newValue");
// prop()：获取或设置元素的属性值，特别适用于处理布尔属性 $("selector").prop("propertyName", newValue);
console.log($("ul li:eq(0)").text()); //返回结果是：知否知否，应是绿肥红瘦1
console.log($("ul").children()[0].textContent); //$("ul").children()[0]这里返回的是原生js获取到的元素的格式，所以使用textContent属性获取内容

4、JQuery中使用 first-child last-child nth-child() nth-of-type()

1、first-child是指定标签的父元素的第一个子元素
p:first-child就是获取p标签父元素的第一个p标签

2、last-child获取指定标签的父元素的最后一个子元素
p:last-child就是获取p标签父元素的最后一个p标签

3、nth-child()获取指定标签的父元素的第几个孩子，获取的孩子是指定标签的类型
p:nth-child(2)获取p标签父元素的第二个属于p标签的孩子，如果不属于p标签则不显示
            
4、nth-of-type()获取指定标签父元素中指定标签的孩子
p:nth-of-type(2)获取p标签父元素中的第二个p标签

      $(function () {
        console.log($("ul li:first-child").text());
        console.log($("ul li:last-child").text());
        console.log($("ul li:nth-child(1)").text());
        console.log($("ul li:nth-of-type(1)").text());
      });

5、JQuery中排他思想

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/jQuery.min.js"></script>
  </head>
  <body>
    <!-- jquery的排他思想 -->
    <div class="box">
      <button>按钮</button>
      <button>按钮</button>
      <button>按钮</button>
      <button>按钮</button>
    </div>

    <script>
      $(function () {
        $(".box button").click(function () {
          $(this).css("backgroundColor", "red");
          $(this).siblings("button").css("backgroundColor", "");
        });
      });
    </script>
  </body>
</html>

6、隐式迭代

在 jQuery 中，隐式迭代是指在一次操作中同时对多个元素进行相同的操作，而无需显式编写循环。jQuery 使用隐式迭代来处理多个元素的操作，使得代码更简洁、易读和高效。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/jQuery.min.js"></script>
  </head>
  <style>
    div {
      width: 100px;
      height: 100px;
      margin-top: 10px;
      border: 1px solid red;
    }
  </style>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
      $(function () {
        // 隐式迭代就是不需要像原生的js一样需要写for循环你来遍历每个元素然后再来添加事件
        $("div").mouseenter(function () {
          $(this).siblings().css("backgroundColor", "");
          $(this).css("backgroundColor", "red");
        });
        $("div").mouseleave(function () {
          $(this).css("backgroundColor", "");
        });
      });
    </script>
  </body>
</html>

7、链式编程

在 jQuery 中，链式编程是一种编码风格，它允许您在单个语句中连续调用多个方法，并且每个方法调用都会返回一个 jQuery 对象，以便您可以继续在该对象上调用其他方法。这种连续调用方法的方式被称为链式编程。
$("node").css('color','red').siblings().css('color','');

    <div>
      <p>我是p标签</p>
      <p>我是p标签</p>
      <p>我是p标签</p>
    </div>
    <script>
      $(function () {
        // 链式编程编写更优雅
        $("div p:first").css("color", "red").siblings().css("color", "pink");
      });
    </script>

扩展：
除了:first的伪选择器，还有：

1、:last：选择匹配选择器的最后一个元素。
var lastElement = $("selector:last");

2、:even：选择匹配选择器的偶数位置的元素（从 0 开始计数）。
var evenElements = $("selector:even");

3、:odd：选择匹配选择器的奇数位置的元素（从 0 开始计数）。
var oddElements = $("selector:odd");

4、:eq(index)：选择匹配选择器在集合中索引为指定值的元素。
var specificElement = $("selector:eq(index)");

5、:not(selector)：选择不匹配指定选择器的元素。
var notElements = $("selector:not(otherSelector)");
var nonRedElements = $("div:not(.red)"); // 选择所有不具有 "red" 类的 <div> 元素

8、JQuery中设置样式

1、参数只写属性名，则是返回属性值
console.log($(this).css('color'))返回绑定事件元素的color值

2、参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数学可以不用跟单位和引号、$(this).css('color','red')因为设置的属性值不是数字，所以加引号
$(this).css('width',200)表示设置元素的宽度为200px，属性值是数字可以不加引号

3、参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({
    width:200,对象形式设置属性值中，部分属性名和属性值可以不加引号
    'height':200,
    color:"red"如果属性值不是数字型，需要加引号
})

9、JQuery中动画效果的函数

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

事件切换效果hover()

事件切换效果
        hover([over],out)
        over鼠标移到元素上方要触发的函数（相当于mouseenter和mouseover）
        out鼠标从元素上方移开要触发的函数（相当于mouseout）

        注意：因为hover是事件切换，所以括号里面最多写两个函数，如果只写一个函数，事件就只执行括号里面的唯一一个函数，
        所以如果只写一个函数的话，一般写的函数属于具有切换效果功能的函数，如slideToggle()  或者toggle()

10、动画队列及其停止排队解决方法stop()

动画队列及其停止排队方法
        动画或者效果队列
        动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
        这时需要停止排队来执行最新触发的事件，所以使用stop()函数，注意，stop()函数必须写在任何事件函数的前面

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

    <button>请经过我</button>
    <div></div>

    <script>
      $(function () {
        $("button").hover(
          function () {
            $("div").stop().slideDown(200);
          },
          function () {
            $("div").stop().slideUp(200);
          }
        );
      });
    </script>

11、JQuery淡入淡出动画函数

淡入淡出的动画函数
fadeIn()淡入
        1、参数可以省略，无动画直接显示
        2、speed三种预先速度之一的字符串('slow','normal','fast')或者表示动画市场的毫秒数值(如：1000ms)
        3、easing:(Optional)用来指定切换效果，默认时'swing',可用参数是'linear'
        4、fn:参数是回调函数，在动画完成执行的函数，每个元素执行一次

fadeOut()淡出
        1、参数可以省略，无动画直接显示
        2、speed三种预先速度之一的字符串('slow','normal','fast')或者表示动画市场的毫秒数值(如：1000ms)
        3、easing:(Optional)用来指定切换效果，默认时'swing',可用参数是'linear'
        4、fn:参数是回调函数，在动画完成执行的函数，每个元素执行一次

fadeToggle()淡入淡出切换
        1、参数可以省略，无动画直接显示
        2、speed三种预先速度之一的字符串('slow','normal','fast')或者表示动画市场的毫秒数值(如：1000ms)
        3、easing:(Optional)用来指定切换效果，默认时'swing',可用参数是'linear'
        4、fn:参数是回调函数，在动画完成执行的函数，每个元素执行一次

fadeTo()：渐进方式调整到指定的不透明度
        opacity透明度必须写，取值是0到1之间
        1、参数可以省略，无动画直接显示
        2、speed三种预先速度之一的字符串('slow','normal','fast')或者表示动画市场的毫秒数值(如：1000ms)
        3、easing:(Optional)用来指定切换效果，默认时'swing',可用参数是'linear'
        4、fn:参数是回调函数，在动画完成执行的函数，每个元素执行一次

代码示例：

    <button>淡入</button>
    <button>淡出</button>
    <button>淡入淡出切换</button>
    <button>渐变到指定透明度</button>
    <div></div>

    <script>
      $(function () {
        $("button")
          .eq(0)
          .click(function () {
            $("div").fadeIn(1000);
          });
        $("button")
          .eq(1)
          .click(function () {
            $("div").fadeOut(1000);
          });
        $("button")
          .eq(2)
          .click(function () {
            $("div").fadeToggle(1000);
          });
        $("button")
          .eq(3)
          .click(function () {
            $("div").fadeTo(1000, 0.5);
          });
      });
    </script>

12、JQuery属性操作

jquery属性操作

        设置或者获取元素固有属性值prop()
        所谓元素固有属性就是元素本身自带的属性，比如a标签中的href属性，比如input标签中的type属性
        1、获取属性语法：
        prop('属性名')
        2、设置属性值语法：
        prop('属性名','属性值')

        设置或者获取元素自定义属性值attr()
        用户自己给元素添加的属性，称为是自定义属性，比如给div添加index="1"
        1、获取属性语法：
        attr('属性名')//类似原生js中的getAttribute()
        2、设置属性语法
        attr('属性名','属性值')//类似原生js中设置元素的属性setAttribute()

        数据缓存date()这个里面的数据是存放在元素的内存里面
        可以变量值来获取
        console.log($(元素).date('属性名','属性值'))//设置完成直接获取值
        这个方法获取date-index h5自定义属性  第一个特点不用写date-   第二个特点返回值是数值型数据

    // data设置属性，在自定义属性中出现的data-开头的，在查找的时候可以不加上
    <input type="text" />
    <script>
      $(function () {
        var index = $("input").data("index", "1").data("index");
        console.log(index);
      });
    </script>

13、JQuery中获取元素内容

jquery文本属性值

        主要针对元素的内容还有表单的值操作
        1、普通元素内容html()(相当于原生innerHTML)
        html()获取元素的内同
        html('内容')设置元素的内容

        2、普通元素文本内容text()(相当于原生innerText)
        Text()获取元素的文本内容
        Text('内容')设置元素的文本内容

        3、表单的值val()(相当于原生value)
        val()获取
        val("设置input框的内容")

    <div></div>
    <p></p>
    <input type="search" value="11" />
    <script>
      $(function () {
        $("div").html("<span>我是span标签</span>");
        console.log($("div").html());

        $("p").text("我是p");
        console.log($("p").text());

        $("input").val("22");
        console.log($("input").val());
        $("input").val("设置input内容");
        console.log($("input").val());
      });
    </script>

14、toFixed()

toFixed()

是 JavaScript 原生的 Number 对象的方法。它用于将数字保留指定的小数位数，并返回一个字符串表示的结果。

    <div class="box">
      <div class="child">
        <div class="grandChild">123.4444444</div>
      </div>
    </div>
    <input type="text" value="12.2222222" />
    <script>
      $(function () {
        console.log($(".grandChild").parents(".box"));
        console.log(($(".grandChild").text() * 1).toFixed(2));
        console.log(Number($("input").val()).toFixed(2));
      });
    </script>

15、JQuery遍历数据和元素

主要是遍历、创建、添加、删除元素操作

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

        语法：$('元素').each(function(index,domele){xxx;})
        例如：$('div').each(function(index,domele){
            console.log(index);
            console.log($(domele).text());
            //注意这里要输出div元素的内容的话，不可以使用$('div')，应该使用$(domele),否则会报错
        })
        each()方法遍历匹配到的每一个元素，主要用dom处理each每一个
        里面的回调函数有2个参数：index是每一个元素的索引号，domele是每一个dom元素对象，不是jquery对象
        所以要像使用jquery方法：需要给这个dom元素转换成jquery对象$(domele)

        除了$('元素').each(function(index,domele){xxx;})遍历元素之外，
        还可以使用$.each(对象object,function(index,domele){xxx;})
        jquery隐式迭代是对同一个元素做同一个操作，如果想要给同一个元素做不同的操作，就需要使用遍历
        语法：$.each(object,function(index,domele){xxx;})
        $.each()方法可用于遍历任何类型的对象，主要用于数据处理、比如数组，对象
        里面的函数有2个参数：index表示每个元素的索引或者属性名称，domele是对应的内容

each()函数中的第二个参数domele是属于dom类型的数据，所以在使用jquery方法前需要对dom对象进行转换

      $(function () {
        $("div").each(function (index, domele) {
          console.log($(domele).text());
          console.log($(domele));
          console.log(domele);
        });
      });

      $(function () {
        $.each($("div"), function (index, domele) {
          console.log(index);
        });
      });

      var arr = { name: "zhou", age: 18 };

      $.each(arr, function (index, domele) {
        console.log(index + ":" + domele);
      });

16、JQuery中元素操作

        创建元素
        语法：$("<li></li>");
        动态的创建一个li元素

        添加元素
        内部添加   
        Element.append('内容');
        把内容放入匹配元素内容的后面，类似原生的appendChild()方法
        Element.prepend('内容');
        把内容放到匹配的元素最前面，类似原生的insertBefore()方法

        添加元素
        外部添加
        Element.after('内容')把内容添加到目标的元素后面
        Element.before('内容')把内容添加到目标的元素的前面

        内部添加元素，生成之后它们是父子关系
        外部添加元素，生成之后它们是兄弟关系

        删除元素
        Element.remove()删除匹配的元素（删除自己还有包含的子节点）
        element.emtpy()删除匹配的元素集合中的所有的子节点
        element.html("")清空匹配的元素的内容

        增append()   prepend()   after()   before()
        删remove()  empty()   html("")
        改html()  text()
        查html()  text()

17、JQuery尺寸

语法                        用法
width() / height()            取得匹配元素宽度和高度值，只算width / height
innerWidth() / innerHeight()  取得匹配元素宽度和高度值，包含padding
outerWidth() / outerHeight()  取得匹配元素宽度和高度值，包含padding、border
outerWidth(true) / outerHeight(true)  取得匹配宽度和高度值，包含padding、border、margin

以上参数为空，则是获取相应值，返回的是数字型
如果参数为数字，则是修改相应值
参数可以不必写单位

18、JQuery位置

 jquery位置
        位置主要有三个：offset()    position()    scrollTop()    scrollLeft()

        offset()设置或获取元素偏移
        offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
        该方法2个属性left  top
        offset().top用于获取距离文档顶部的距离
        offset().left  用于获取距离文档左边的距离
        可以设置元素的偏移：offset({ top: 20, left: 20 })

        获取距离带有定位父级位置（偏移）position
        如果没有带有定位的父级，则以文档为准
        这个方法只能获取，不能设置偏移

    <div class="box">
      <div class="div"></div>
    </div>
    <script>
      $(function () {
        // 计算元素定义的尺寸
        console.log($(".box").width());
        console.log($(".box").innerWidth());
        console.log($(".box").outerWidth());
        console.log($(".box").outerWidth(true));

        // 计算元素的位置
        console.log($(".div").offset().top);
        //元素的offset()方法是相对于页面的边框来说的，和元素的父级标签没有关系

        // 可以设置元素的位置offset({top:xx,left:xx})
        // console.log($('.div').offset())//返回的是一个伪数组的形式
        $(".div").offset({ top: 200 });
        //必须先定义再调用，不能写成console.log($('.div').offset({top:200}).top)
        console.log($(".div").offset().top);

        /* 
            获取距离带有定位父级位置（偏移）position
            如果没有带有定位的父级，则以文档为准
            这个方法只能获取，不能设置偏移 */

        // position是获取元素的位置使用，不能用来设置元素的位置
        // position()返回的是一个存放元素top和left值的伪数组，使用时候和offset()方法一样，
        // 但是position返回的值是子元素相对于最近的带有定位的父级盒子
        console.log($(".div").position().top);

        var div = document.querySelector(".div");
        console.log(div.offsetTop);
        console.log(div.offsetLeft);
      });
    </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      position: relative;
    }

    .div {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>

18、JQuery事件处理on

        事件处理on()绑定事件
        on()方法匹配元素上绑定一个或多个事件的事件处理函数
        语法：
        element.on(events,[selector],fn)
        1、events一个或多个用空分隔的事件类型，如：'click'和'keydown'
        2、selector元素的子元素选择器，如"li"形式，不能写$('li')
        3、fn回调函数，即绑定在元素上的侦听函数

        事件处理on()函数
        $('div').on({
            mouseenter:function(){
                $(this).css('color','red');
            },
            click:function(){
                $(this).css('color',"pink");
            },
            mouseout:function(){
                $(this).css("color",'#ccc');
            }
        })

        如果注册的事件的内容一致的，可以简化成
        $('div').on("mouseenter click mouseout",function(){
            $(this).css('color','red');//意思就是当元素在鼠标经过点击离开的时候触发事件
        })

        或者可以使用切换样式的类型toggle
        $("div").on('mouseenter mouseout',function(){
            $(this).toggleClass('类名');
        })

        事件处理on()绑定事件

        on()方法优势1：
        可以绑定多个事件，多个处理事件处理程序
        $('div').on({
            mouseout:function(){},
            click:function(){}
        })
        //以上的使用方法和使用原生js种的定义对象中定义属性一致

        如果事件处理程序相同
        $('div').on('click mouseout',function(){
            $(this).toggleClass(类名)
            $(this).slideToggle()
            $(this).fadeToggle()
            $(this).toggle()
        })

        on()方法优势2：
        可以事件委派操作。
        事件委派的定义就是原来加给子元素身上的事件绑定在父元素的身上，就是把事件委派给父元素
        $('ul').on('click mouseout',"li",function(){
            alert("这时使用了事件委派")
        })

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

应用：

    <div>我是div标签</div>
    <script>
      // 定义on()方法的两种方法

      $(function () {
        // 定义on事件处理函数的第一种方法
        // $("div").on({
        //   click: function () {
        //     $(this).css("color", "red");
        //   },
        //   mouseout: function () {
        //     $(this).css("color", "#000");
        //   },
        // });
        // 定义on事件处理函数的第二种方法
        // 注意，如果两种先后顺序触发的事件写在同一级时，
        // 如果使用切换样式的方法toggle的话，事件会出现前后样式抵消的情况
        $("div").on("click mouseout", function () {
          $(this).toggleClass("bg");
        });
      });
    </script>

<!-- 使用事件处理函数on()进行实践委派操作 -->
    <ul>
      <li>我是li这里进行事件委派</li>
      <li>我是li这里进行事件委派</li>
      <li>我是li这里进行事件委派</li>
    </ul>
    <script>
      $("ul").on("click", "li", function (e) {
        $(this).toggleClass("bg");
        // 注意：在括号中，多加了'li'对象，使触发事件的对象具体到li标签，所以触发时样式变化是li的样式变化
        // 如果括号中不加li标签，触发事件的对象就是ul标签
      });
    </script>

19、事件处理off()解绑事件和one()定义的事件

        事件处理off()解绑事件
        off()方法可以移除通过on()方法添加的事件处理程序
        1、$('p').off()//解绑的是所有的使事件
        2、$('p').off('click')//解绑p元素上面的点击事件，后面的off()是侦听函数名
        3、$('p').off('click','li')//解绑事件委派

        如果有的事件只想触发一次就不再触发，可以使用one()来绑定事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/jQuery.min.js"></script>
  </head>

  <body>
    <!-- 
        事件处理off()解绑事件
        off()方法可以移除通过on()方法添加的事件处理程序
        1、$('p').off()//解绑的是所有的使事件
        2、$('p').off('click')//解绑p元素上面的点击事件，后面的off()是侦听函数名
        3、$('p').off('click','li')//解绑事件委派
        如果有的事件只想触发一次就不再触发，可以使用one()来绑定事件-->

    <div></div>
    <ul>
      <li>我是li标签</li>
    </ul>
    <!-- 使用off来解绑事件 -->
    <script>
      $(function () {
        $("div").on({
          click: function () {
            alert("点击事件");
          },
          mouseout: function () {
            alert("鼠标离开事件");
          },
        });
        $("div").click(function () {
          alert("我是没有定义on的点击事件");
        });
        $("div").off(); //这样就是一次把所有的事件都解绑，不管是否为on事件处理程序

        // 解绑指定类型的事件
        $("div").on({
          click: function () {
            alert("我是点击事件");
          },
          mouseout: function () {
            alert("我是鼠标离开事件");
          },
        });
        $("div").off("click"); //指定解绑点击事件

        // 移除on方法定义的事件委派
        $("ul").on("click", "li", function () {
          alert("我是on方法定义的事件委派程序");
        });

        $("ul").off("click", "li");
      });
    </script>
  </body>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</html>

20、自动触发事件trigger()

<!-- 
        自动触发事件trigger()
        有些事件希望自动触发，比如轮播图自动播放效果功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发
        element.click()//第一种简写形式
        element.trigger("type")//第二种自动触发模式
        $('p').on('click',function(){
            alert('hi');
        })
        $('p').trigger('click');//此时自动触发点击事件，不需要鼠标点击
     -->

    <div></div>
    <input type="text" name="text" />
    <script>
      $("div").click(function () {
        alert("点击1");
      });

      //定义元素在页面加载完自动进行点击事件click()
      // $('div').click();

      // 第二种方法
      // $('div').trigger('click');

      // 第三种自动触发事件的方法triggerHandle('click'),最后这种和上面两种的区别是这种方法不会引起元素的默认行为

      $("div").triggerHandler("click");

      // 比如input标签在聚焦的时候，会出现光标
      $("input").triggerHandler("focus"); //不会引起光标出现
      // $('input').focus();//这个会引起光标出现
    </script>

21、JQuery的事件对象

jquery事件对象event（使用和原生js的事件对象一样）

        事件被触发，就会有事件对象的产生
        element.on(events, [selector], function (event) { })
        阻止默认行为： event.preventDefault 或者是 return false;
        阻止冒泡： event.stopPropagation()

    <div></div>
    <script>
      $(function () {
        $(document).click(function () {
          console.log("document被点击了");
        });
        $("div").on("click", function (event) {
          // console.log(event);
          console.log("div被点击了");
          event.stopPropagation();
          //阻止元素往上冒泡，所以点击了div后，document就不会因为事件冒泡产生点击事件
          console.log(event.target);
          console.log(event.clientX);
          console.log(event.clientY);
        });
      });
    </script>

22、JQuery拷贝对象

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法
        语法：
        $.extend([deep],target,object1,[objectN])
        1、deep: 如果设置为true表示深拷贝，默认是false是浅拷贝
        2、target: 要拷贝的目标对象
        3、object: 待拷贝到第一个对象的对象（理解是被拷贝的对象）
        4、objectN: 待拷贝到第N个对象的对象
        5、浅拷贝就是把被拷贝对象的复杂数据类型种的地址拷贝目标对象，修改目标对象的内容会影响被拷贝对象的内容
        6、深拷贝，括号前面加true表示深拷贝，完全克隆（拷贝对象，而不是地址），修改目标对象的内容不会影响被拷贝对象的内容

        注意：深拷贝把里面的数据完全复制一份给目标对象，
        如果里面有不冲突的属性，结果是会合并在一起，如果有相同的属性，则目标对象相同的属性值会被覆盖

      <script>
      $(function () {
        var object1 = {
          id: 0,
          message: {
            class: 1,
          },
        };
        var target1 = {
          id: 1,
          message: {
            name: "zhou",
            age: 22,
          },
        };
        // 浅拷贝，把被拷贝对象种复杂数据类型的地址拷贝给目标对象
        // 拷贝后目标对象中存在和被拷贝对象相同属性的值被覆盖
        $.extend(object1, target1);
        console.log(object1);

        // 浅拷贝，目标对象只有修改复杂数据类型中的属性值才会使被拷贝对象的内容发生相应改变
        object1.message.age = 24;
        object1.message.name = "李";
        console.log(target1);

        // 深拷贝，把被拷贝对象的内完全复制一份后给目标对象，给的不是地址而是数据
        $.extend(true, object1, target1);
        console.log(object1);
      });
    </script>

23、多库共存

问题概述：
        jquery使用$作为标识符，随着jquery的流行，其他的js库也会用这$作为标识符，这样一起使用会引起冲突
        客观需求：
        需要一个解决方案，让jquery和其他的js库不存在冲突，可以同时存在，这就是多库共存
        jquery解决方案
        1、把里面的$符号统一改为jquery。比如jquery('div')
        2、jquery变量规定新的名称：$.noConflict()  var xx = $.noConflict();

    <div></div>
    <script>
      $(function () {
        jQuery("div").click(function () {
          console.log("div被点击了");
          //  使用jQuery来获取元素
        });
        jQuery.each(jQuery("div"), function (index, domele) {
          console.log($(domele)); //使用jQuery和$符号结合
        });
        function $(domele) {
          console.log("我是重新定义的");
          return document.querySelector(domele);
        }
        console.log($("div")); //这里的$符号是上面函数定义的$为标识符的函数
        $("div").click(function () {
          alert("我被点击了");
        });
        //如果没有重新定义$标识符的意义，默认使用系统的意思
        //用户自定义jQuery标识符的名称，注意，真正的是系统标识符是jQuery而不是jquery标识符
        var jquery = $.noConflict();
        jquery("div").click(function () {
          console.log("我是用户自定义jQuery标识符的名称点击事件");
        });
        // 总结：如果$或者jQuery有重新定义的话，可以使用另外一个自定义标识符，
        // 但是不能出现两个系统默认的标识符都重新自定义，不然系统自带的方法和函数不起作用
      });
    </script>

飞驰人生@1

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JQuery篇：详细学习JQuery知识点

事件处理off()解绑事件off()方法可以移除通过on()方法添加的事件处理程序1、$('p').off()//解绑的是所有的使事件2、$('p').off('click')//解绑p元素上面的点击事件，后面的off()是侦听函数名3、$('p').off('click','li')//解绑事件委派如果有的事件只想触发一次就不再触发，可以使用one()来绑定事件<head></head><body>--事件处理off()解绑事件。
复制链接

扫一扫