jQuery的一些基本 *** 作（三）

上次说到jQuery属性 *** 作，这篇文章将讲讲获取元素尺寸、获取元素偏移量以及事件绑定相关的知识。

目录

        一、获取元素尺寸

        二、获取元素偏移量

        三、元素的事件绑定

        四、事件的解绑和触发

---

一、获取元素尺寸

        jQuery提供获取元素尺寸有三对：

                1、width() 和 height():获取到的是元素内容区域的尺寸。

                2、innerWidth() 和 innerHeight():获取到的是元素内容+内边距的尺寸。

                3、outerWidth()和outerHeight():获取到的时元素内容+内边距+边框的尺寸。

        注意：不管该元素是否隐藏，都能获取到该元素的尺寸。

        来个简单的例子：

      console.log($("div").width());
      console.log($("div").height());
      console.log("-----------------");
      console.log($("div").innerWidth());
      console.log($("div").innerHeight());
      console.log("-----------------");
      console.log($("div").outerWidth());
      console.log($("div").outerHeight());
      console.log("-----------------");

      //   outerWidth和outerHeight传入一个参数true，则可以获取
      // 内容+内边距+边框+外边距的尺寸
      console.log($("div").outerWidth(true));
      console.log($("div").outerHeight(true));

        获取元素尺寸还是挺简单的吧？

二、获取元素偏移量

        先直接上代码：

      //    返回值是一个对象数据类型
      console.log($("div").offset());
      console.log($("p").offset());
      console.log($("span").offset());

      //   如果是写的right和bottom的话，则会自动计算成left和top
      console.log($("span").position());

        通过上面的代码发现，jQuery提供了两种获取偏移量的方法：

                1、offset()：获取元素相对于页面左上角的位置。

                2、position()：获取的是元素的定位位置。

三、元素的事件绑定

        1、on()：方法绑定事件

                1.1 基础绑定事件

                        语法：元素集合.on("事件类型","事件处理函数")

                1.2 事件委托绑定事件

                        语法：元素集合.on("事件类型",要委托的元素,事件处理函数)

                        即把“要委托的元素”委托给元素集合。

                1.3 批量绑定事件

                        语法：元素集合.on({

                                事件类型1：处理函数,

                                事件类型2：处理函数,

                                ......

                        })

                        注意：此时不能进行事件委托了！

        2、one()：也是用于绑定事件，方法和on相同。

                one与on的区别：one方法顾名思义，只能执行一次。

        3、hover()：鼠标移入移出时触发的事件。

                语法：元素集合.hover(移入时触发的函数，移出时触发的函数)

                注意：当只传入一个参数时，移入移出都触发。

                同样的，也不能进行事件委托。

        4、常用事件函数：

                jQuery把我们常用的一些事件都单独的做成了事件函数，我们通过调用这些事件函数来达到绑定事件的效果。

                例如：click()、mouseover()、mouseout()、change()......

        先来个后面都需要的HTML结构：

 


      我是div
      
我是div中的p

        在使用下面的每个例子之前（除了第一个），记得注释掉前面一个例子的代码。 

        例1：on的基础绑定事件

$("div").on("click", function () {
    console.log("我是div的点击事件");
});

        例2：on的事件委托

// 这里是把事件绑定给div元素，当你在div内的p元素触发事件的时候，执行事件处理函数
// 也就是事件委托，把p元素的事件委托给了div元素
$("div").on("click", "p", function () {
    console.log("我是事件委托形式的事件");
});

        例3：批量绑定事件

$("div").on({
    click: function () {
        console.log("div被点击了");
    },
    mouseover: function () {
        console.log("div被鼠标移入了");
    },
    mouseout: function () {
        console.log("鼠标移除");
    },
})

        例4：one函数的基础绑定事件、事件委托以及批量绑定事件

//基础绑定事件
$("div").one("click", function () {
    console.log("我是div的点击事件");
});

//事件委托
$("div").one("click", "p", function () {
console.log("我是事件委托形式的事件");
});

//事件的批量绑定
$("div").one({
    click: function () {
        console.log("div被点击了");
    },
    mouseover: function () {
        console.log("div被鼠标移入了");
    },
    mouseout: function () {
        console.log("鼠标移除");
    },
});

        例5：hover的用法

$("div").hover(
    function () {
        console.log("div被移入了");
    },
    function () {
        console.log("div被移出了");
    }
);

四、事件的解绑和触发

        1、事件的解绑函数为：off()，它能够解绑全部事件处理函数，也能够解绑指定的处理函数。

                语法1：元素集合.off("事件类型")

                        会把所有的事件处理函数都解绑。

                语法2：元素集合.off("事件类型",要解绑的事件处理函数名)

                        会解绑指定的事件处理函数。

        2、事件的触发函数为：trigger()，使用代码的方式触发指定的事件，保存代码之后会自动的触发。

                语法：元素集合.trigger("事件类型")

        首先来段HTML结构：

我是一个div

        超级简单对不对，然后先开始给这个div块绑定一个点击事件：

function handlerA(){
    console.log("我是handlerA事件处理函数")
}

function handlerB(){
    console.log("我是handlerB事件处理函数")
}

function handlerC(){
    console.log("我是handlerC事件处理函数")
}

//给一个元素绑定多个事件
$("div").click(handlerA).click(handlerB).click(handlerC)

        然后开始解绑：

//解绑全部事件处理函数
$("div").off("click")

        解绑指定的函数：

// 1 解绑全部事件处理函数
//   $("div").off("click");
$("div").off("click",handlerA)

        接下来是事件触发--trigger()

// 保存代码之后控制台直接出现结果
$("div").trigger("click")

        设定一个定时器，就会按照指定时间触发了：

setInterval(function () {
    $("div").trigger("click");
}, 1000);

        好了，以上就是这篇文章的内容了，有不对的地方欢迎留言区评论或者私信本人~

        觉得有用的话记得点赞+收藏+关注，谢谢啦~

        作者其他相关文章：

                jQuery的一些基本 *** 作（一）

                jQuery的一些基本 *** 作（二）

                jQuery的一些基本 *** 作（四）