【JavaScript】JavaScript开篇基础(7)

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋,这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章,请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣,记得关注我👀👀以便不错过每一篇精彩。

当然,如果在阅读中发现任何问题或疑问,我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力,一起进步!

加油,一起CHIN UP!💪💪

🔗个人主页:E绵绵的博客
📚所属专栏:

1. JAVA知识点专栏

        深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

        实战演练,巩固JAVA编程技能

3.c语言知识点专栏

        揭示c语言的底层逻辑与高级特性

4.c语言题目练习

        挑战自我,提升c语言编程能力

5.Mysql数据库专栏

        了解Mysql知识点,提升数据库管理能力

6.html5知识点专栏

        学习前端知识,更好的运用它

7. css3知识点专栏

        在学习html5的基础上更加熟练运用前端

8.JavaScript专栏

        在学习html5和css3的基础上使我们的前端使用更高级

📘 持续更新中,敬请期待❤️❤️

2.元素偏移量(offset) 

offset系列相关属性可以动态获取元素的位置、大小等属性

注:获取元素是距离带有定位的父级元素的位置;获取元素大小返回值不带单位!

element.offsetParent    //返回该元素带有定位的父级;若无定位父级返回body
element.offsetTop/Left  //返回该元素距离带定位父级的上/左距离;不带单位
element.offsetWidth/Height  //返回包括padding、boder以及内容区的宽度;不带单位

注意我们只能用offsetTop/Left得到距离,不能用它改变距离。

改变距离我们用style样式表

3.元素可视区域(client) 

client系列来获取元素可视区的相关信息,可以动态得到改元素边框与元素大小;

注:返回值不带单位!

element.clientTop/Left                //返回元素上边框或左边框
element.clientWidth/Height            //返回包括自身宽/高度以及padding的值,不含边框

注意其也是只能得到距离,不能改变。 

 4.元素滚动(scroll)

scroll系列来动态获取元素大小,滚动距离

注:返回值不带单位!

element.scrollTop/Left        //返回被卷去的上/左侧距离
element.scrollWidth/Height    //返回自身实际宽/高度(不含边框),如果里面的内容超出本身元素的宽度或高度,得出的是里面内容的宽度或高度。
window.pageYOffset            //获取页面被卷去的头部高度
window.pageXOffset            //获取页面被卷去的左侧高度

5.立即执行函数

 //第一种
(function(实参) {函数体})   (形参);
//第二种
(function(实参){函数体}(形参))

作用:创建一个独立的作用域,避免了命名冲突问题

立即执行函数:不需要调用,立马能够自己执行函数

里面所有变量为局部变量

6.click直接调用

对于一般的click我们是要鼠标点击才能触发,除此之外我们还能直接代码调用函数

window.click()就能直接触发鼠标事件

其他事件如mouseover等也类似差不多的逻辑

7.滚动窗口至文档的特定位置 

window.scroll(x,y)可以实现该功能,一般我们把x都设置为0,y依照我们想要的去设置不同数值。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/478706.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript的基础数据类型

一、JavaScript中的数组 定义 数组是一种特殊的对象,用于存储多个值。在JavaScript中,数组可以包含不同的数据类型,如数字、字符串、对象、甚至其他数组。数组的创建有两种常见方式: 字面量表示法:let fruits [apple…

WebSocket详解、WebSocket入门案例

目录 1.1 WebSocket介绍 http协议: webSocket协议: 1.2WebSocket协议: 1.3客户端(浏览器)实现 1.3.2 WebSocket对象的相关事宜: 1.3.3 WebSOcket方法 1.4 服务端实现 服务端如何接收客户端发送的请…

周志华深度森林deep forest(deep-forest)最新可安装教程,仅需在pycharm中完成,超简单安装教程

1、打开pycharm 没有pycharm的,在站内搜索安装教程即可。 2、点击“文件”“新建项目” 3、创建项目,Python版本中选择Python39。如果没有该版本,选择下面的Python 3.9下载并安装。 4、打开软件包,搜索“deep-forest”软件包&am…

ES 和Kibana-v2 带用户登录验证

1. 前言 ElasticSearch、可视化操作工具Kibana。如果你是Linux centos系统的话,下面的指令可以一路CV完成服务的部署。 2. 服务搭建 2.1. 部署ElasticSearch 拉取docker镜像 docker pull elasticsearch:7.17.21 创建挂载卷目录 mkdir /**/es-data -p mkdir /**/…

分布式kettle调度平台v6.4.0新功能介绍

介绍 Kettle(也称为Pentaho Data Integration)是一款开源的ETL(Extract, Transform, Load)工具,由Pentaho(现为Hitachi Vantara)开发和维护。它提供了一套强大的数据集成和转换功能&#xff0c…

力扣hot100-->排序

排序 1. 56. 合并区间 中等 以数组 intervals 表示若干个区间的集合,其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间,并返回 一个不重叠的区间数组,该数组需恰好覆盖输入中的所有区间 。 示例 1: 输…

.net 8使用hangfire实现库存同步任务

C# 使用HangFire 第一章:.net Framework 4.6 WebAPI 使用Hangfire 第二章:net 8使用hangfire实现库存同步任务 文章目录 C# 使用HangFire前言项目源码一、项目架构二、项目服务介绍HangFire服务结构解析HangfireCollectionExtensions 类ModelHangfireSettingsHttpAuthInfoUs…

滑动窗口最大值(java)

题目描述 给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1: 输入:nums [1,3,-1,-3,5,3,6,7]…

springboot项目使用maven打包,第三方jar问题

springboot项目使用maven package打包为可执行jar后,第三方jar会被打包进去吗? 答案是肯定的。做了实验如下: 第三方jar的项目结构及jar包结构如下:(该第三方jar采用的是maven工程,打包为普通jar&#xf…

常用Rust日志处理工具教程

在本文中,我想讨论Rust中的日志。通过一些背景信息,我将带您了解两个日志库:env_logger和log4rs。最后,我将分享我的建议和github的片段。 Rust log介绍 log包是Rust中日志API的事实标准,共有五个日志级别&#xff1…

嵌入式的C/C++:深入理解 static、const 与 volatile 的用法与特点

目录 一、static 1、static 修饰局部变量 2、 static 修饰全局变量 3、static 修饰函数 4、static 修饰类成员 5、小结 二、const 1、const 修饰普通变量 2、const 修饰指针 3、const 修饰函数参数 4. const 修饰函数返回值 5. const 修饰类成员 6. const 与 #defi…

时间请求参数、响应

(7)时间请求参数 1.默认格式转换 控制器 RequestMapping("/commonDate") ResponseBody public String commonDate(Date date){System.out.println("默认格式时间参数 date > "date);return "{module : commonDate}"; }…

SpringBoot(9)-Dubbo+Zookeeper

目录 一、了解分布式系统 二、RPC 三、Dubbo 四、SpringBootDubboZookeeper 4.1 框架搭建 4.2 实现RPC 一、了解分布式系统 分布式系统:由一组通过网络进行通信,为了完成共同的任务而协调工作的计算机节点组成的系统 二、RPC RPC:远程…

单片机学习笔记 8. 矩阵键盘按键检测

更多单片机学习笔记:单片机学习笔记 1. 点亮一个LED灯单片机学习笔记 2. LED灯闪烁单片机学习笔记 3. LED灯流水灯单片机学习笔记 4. 蜂鸣器滴~滴~滴~单片机学习笔记 5. 数码管静态显示单片机学习笔记 6. 数码管动态显示单片机学习笔记 7. 独立键盘 目录 0、实现的…

道品智能科技移动式水肥一体机:农业灌溉施肥的革新之选

在现代农业的发展进程中,科技的力量正日益凸显。其中,移动式水肥一体机以其独特的可移动性、智能化以及实现水肥一体化的卓越性能,成为了农业领域的一颗璀璨新星。它不仅改变了传统的农业灌溉施肥方式,更为农业生产带来了高效、精…

android 音效可视化--Visualizer

Visualizer 是使应用程序能够检索当前播放音频的一部分以进行可视化。它不是录音接口,仅返回部分低质量的音频内容。但是,为了保护某些音频数据的隐私,使用 Visualizer 需要 android.permission.RECORD_AUDIO权限。传递给构造函数的音频会话 …

计算机网络八股整理(一)

计算机网络八股文整理 一:网络模型 1:网络osi模型和tcp/ip模型分别介绍一下 osi模型是国际标准的网络模型,它由七层组成,从上到下分别是:应用层,表示层,会话层,传输层,…

利用Python爬虫获得1688按关键字搜索商品:技术解析

在电商领域,1688作为中国领先的B2B电商平台,其商品搜索功能对于商家来说具有极高的价值。通过获取搜索结果,商家可以更好地了解市场趋势,优化产品标题,提高搜索排名。本文将介绍如何使用Python编写爬虫,以获…

Spring Boot集成MyBatis-Plus:自定义拦截器实现动态表名切换

Spring Boot集成MyBatis-Plus:自定义拦截器实现动态表名切换 一、引言 介绍动态表名的场景需求,比如多租户系统、分表分库,或者不同业务模块共用一套代码但操作不同表。说明 MyBatis-Plus 默认绑定固定表名的问题。 二、项目配置 1. 集成 M…

(原创)Android Studio新老界面UI切换及老版本下载地址

前言 这两天下载了一个新版的Android Studio,发现整个界面都发生了很大改动: 新的界面的一些设置可参考一些博客: Android Studio新版UI常用设置 但是对于一些急着开发的小伙伴来说,没有时间去适应,那么怎么办呢&am…