初识jQuery基础入门到放弃Day3——笔记整理+作业×1+经典例题×1

最新推荐文章于 2022-09-19 19:43:35 发布

VIP文章 UndeFIned丶

最新推荐文章于 2022-09-19 19:43:35 发布

阅读量321

点赞数

分类专栏： JavaScript学习文章标签： js

Atuthor:Chen.orange

本文链接：https://blog.csdn.net/weixin_46313446/article/details/106431085

版权

1.jQuery 尺寸操作

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

<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>

2. jQuery 位置操作

jQuery的位置操作主要有三个：
offset()、position()、scrollTop()/scrollLeft()
在这里插入图片描述

3. jQuery 事件注册

在这里插入图片描述

4. jQuery 事件处理

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

on(events,[selector],[data],fn)：

在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。

off(events,[selector],[fn])：

在选择元素上移除一个或多个事件的事件处理函数。
off() 方法移除用.on()绑定的事件处理程序

5. jQuery 事件对象

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

在这里插入图片描述

6. jQuery 拷贝对象

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

在这里插入图片描述

总结：
在这里插入图片描述

作业部分：

在这里插入图片描述

<script>
        $(window).ready(function () {
   
            //需求：在整个页面按下键盘上的键，判断Unicode编码，设置背景和内容;

            //绑定事件(keydown可以获取组合键；keyCode/charCode)
                //keydown--keyCode;     keypress--c

最低0.47元/天解锁文章

UndeFIned丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识jQuery基础入门到放弃Day3——笔记整理+作业×1+经典例题×1

1.jQuery 尺寸操作jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型<body> <div></div> <script> $(function() { // 1. width() / height() 获取设置元素 width和height大小 console.log($("div").width()); /
复制链接

扫一扫