Javascript中常用方法

news2024/11/22 16:18:47

1.操作元素的类：

元素.classList.add('类名')
元素.classList.remove('类名')
元素.classList.toggle('类名')    //切换类名

2.操作表单元素属性：

表单.value='用户名'
表单.type='password'

disabled
checked
selected

3.自定义属性：

定义：
    data-(自定义属性名)
  


操作自定义属性名：box.dataset.属性名

 

4.间歇函数

开启定时器
let id=setInterval(函数,间隔事件)

关闭定时器
clearInterval(id)

5.元素添加监听事件（addEventListener）（特点：可绑定多个事件）

添加事件：addEventListener(事件类型,事件处理函数,是否使用捕获机制)
解绑事件：removeEventListener('click',fn)
//注意：匿名函数无法被解绑


监听事件类型：click,
             mouseover,mouseout     (有冒泡效果)
             mouseenter,mouseleave  (没有冒泡效果，推荐)
             focus,blur             (获得焦点，获得焦点)
             keydown,keyup          (键盘按下，键盘抬起)
             input                  (用户输入触发)
             load                   (外部资源加载完毕触发，给window加)
             DOMContentLoaded       (初始HTML文档加载完触发，给document加)
             scroll(scrollLeft、scrollTop)  (获取元素被卷去的距离(document.documentElement.scrollTop：检测页面滚动的距离))
             resize(clientWidth、clientHeight)           (窗口尺寸改变时触发)  
             检测屏幕宽度：let w = document.documentElement.clientWidth

 

 

1.offsetLeft、offsetTop（只读属性，获取元素距离自己定位父级的左、上距离）

2.offsetWidth&offsetHeight获得的是 内容+padding+border

元素尺寸于位置-尺寸

element.getBoundingClientRect()
方法返回元素的大小以及相对于视口的位置

 

总结：

 

事件对象：

 

事件对象常用属性：

type(获取当前的事件类型)
clientX/clientY(获取光标相对于浏览器可见窗口左上角的位置)
offsetX/offsetY(获取光标相对于当前DOM元素左上角的位置)
key(用户按下的键盘键的值)  (不提倡使用keyCode)

e.stopPropagation()(阻止事件冒泡)    
e.preventDefault()(阻止默认行为)

事件委托（把注册事件放在父元素身上，利用了事件冒泡的特点）：

 

on事件解绑，直接将它指向null即可

btn.onclick = function(){
   alert('点击了')
}

//解绑事件
btn.onclick = null

6.页面滚动事件

//让页面滚动到y轴1000像素的位置
window.scrollTo(0,1000)

7.日期对象

const date = new Date()

const date = new Date('2008-8-8')
console.log(date)

//日期对象方法
getFullYear()
getMonth()     （取值为0-11，此处需加1）
getDate()      （获取月份中的每一天）
getDay()       （获取星期，取值为0-6）
getHours()     （取值为0-23）
getMinutes()   （取值为0-59）
getSeconds()   （取值为0-59）

//获取时间戳的三种方式
//1.使用getTime()方法
const date = new Date()
console.log(date.getTime())

//2.简写+new Date()
console.log(+new Date())

//3.使用Date.now()  (无需实例化，但只能得到当前时间的时间戳，而前面两种可以获得指定时间的时间戳)
console.log(Date.now())

8.节点操作

//1.父节点查找
子元素.parentNode

//2.子节点查找
父元素.children    （获得所有子元素节点，返回的是一个伪数组，没有数组的方法）

//3.兄弟节点查找

  //3.1下一个兄弟节点
  nextElementSibling

  //3.2上一个兄弟节点
  previousElementSibling


//4.创建节点
document.createElement('标签名')

//5.追加节点
父元素.appendChild(要插入的元素)
父元素.insertBefore(要插入的元素，在哪个元素前面)

//6.克隆节点
元素.cloneNode(布尔值)     （此处若为true，则代表克隆时会包含后代节点；为false，不包含）

//7.删除节点
父元素.removeChild(要删除的元素)

9.BOM对象

//创建延时函数
let timer = setTimeout(回调函数，等待的毫秒数)

//清除延时函数
clearTimeout(timer)



//window.location对象
location.href        （获取完整的URL地址，对其赋值用于地址的跳转）
location.search      （获取地址中携带的参数，符号？后面部分）
location.hash        （获取地址中的哈希值，符号#后面部分）
location.reload      （用来刷新当前页面，传入参数true时表示强制刷新）


//window.navigator对象
navigator.userAgent   (检测浏览器的版本及平台)



//window.history对象
history.back()       （可以退后功能）  
history.forward()    （前进功能）  
history.go(参数)     （前进后退功能，参数如果是1，前进一个页面；如果是-1，后退一个页面）

10.本地存储

//1.存储数据
localStorage.setItem(key,value)

//2.获取数据
localStorage.getItem(key)

//3.删除数据
localStorage.removeItem(key)



//本地存储只能存储字符串，不能存储复杂数据类型
JSON.stringify(复杂数据类型)

//当我们把本地存储中的数据取出来时，取出的是字符串，不是对象，无法直接使用
JSON.parse(JSON字符串)

11.内置构造函数

Object
Array
String
Number

12.数组方法

const arr = ['pink','red','blue']

//1.map（迭代数组）
let result = arr.map((item, index) => item * 2)

//2.join（拼接数组）
arr.join('')        （join()方法用于把数组中的所有元素转换为一个字符串）

//3.forEach（遍历数组的每个元素）
arr.forEach(function (item,index){               //此处索引号可以省略
      console.log(`当前数组元素是：${item}`)
      console.log(`当前数组元素的索引是：${index}`)
})

//4.filter （过滤数组）            //返回新数组，不会影响原数组
const result = arr.filter(function(item, index){  //此处索引号可以省略
     return item > 30
})

//5.reduce（返回函数累计处理的结果，常用于求和等）
       5.1求和运算
       const count = arr.reduce((prev, item) => prev + item) 
       console.log(count)
       5.2

//6.from（伪数组转换为真数组）
Array.from()

 

13.字符串方法

 

14.数值类型方法

const price = 12.345
console.log(price.toFixed(2)) //12.35

15.构造函数、原型对象、对象原型三者的关系以及如何构成继承关系（此处需要理解，详解请进入如下链接）

JavaScript中构造函数、原型对象、对象原型的关系以及原型链（超详细）_Jackmat的博客-CSDN博客下面是JavaScript中实现继承的方法（需要注意的是当我们把一个包含函数的对象赋值给一个构造函数的原型对象时，此时构造函数的原型对象中的constructor已经不是指向了构造函数，这是因为对象属于复杂数据类型，它是有指针的，所以此时为了恢复指针的指向，我们此时需要把原型对象中的constructor重新指向构造函数，例如下图中的woman.prototype.constructor=woman）JavaScript中构造函数、原型对象、对象原型共同构成了JavaScript中的。https://blog.csdn.net/Jackmat/article/details/130873592?spm=1001.2014.3001.5501

16.浅拷贝与深拷贝

浅拷贝：

深拷贝：

深拷贝第一种（递归实现）：

 

 深拷贝第二种（lodash库中的cloneDeep方法）：

 

3.深拷贝第三种（通过JSON.stringify()实现）：

 

17.正则表达式

const reg = /前端/

//1.test()方法  （返回true或false）
reg.test(被检测的字符串)

//2.exec()方法  （返回的是数组）（在一个指定字符串中执行一个搜索匹配）
reg.exec(被检测字符串)

//3.元字符（Java中已学过，此处不再赘述）

//4.修饰符
/前端/修饰符
   4.1   i(ignore忽略大小写)
   console.log(/a/i.test('a'))  true
   console.log(/a/i.test('A'))  true

   4.2   g(global匹配所有满足正则表达式的结果)

//5.replace()方法
字符串.replace(/正则表达式/,'替换的文本')

18.闭包函数

//闭包 = 内层函数 + 外层函数的变量
function fn(){
    let count = 1              //实现数据私有，无法直接修改count
    function fun(){
        count++
        console.log(`函数被调用${count}次`)
    }
    return fun
}
const result = fn()
result()   //2
result()   //3

19.arguments（动态参数）

//实际上就相当于Java中的可变参数
function sum(){
    let s =0 
    for(let i=0; i<arguments.length; i++){
            s += arguments[i]
    }
    console.log(s)
}
//调用函数
sum(5.10)
sum(1,2,4)

//注意：arguments是一个伪数组，它只存在于函数中

20.剩余参数

const arr = [1,5,3,8,2]
console.log(...arr)      //不会修改原数组   



//剩余参数用于获取多余的实参
//注意：动态参数是伪数组，剩余参数是真数组

21.解构赋值

                                  //数组结构
const [a, b, c]=[1, 2, 3]

//交换两个变量
let a = 1
let b = 3;    //此处必须要有分号，也可以写成  ;[b, a]=[a, b]
[b, a]=[a, b]


//支持多维数组的结构
const [a, b] = ['苹果', ['小米', '华为']]
console.log(a)  //苹果
console.log(b)  //['小米', '华为']

const [a, [a,b]] = ['苹果', ['小米', '华为']]
console.log(a)  //苹果
console.log(b)  //小米
console.log(c)  //华为



                                 //对象解构
const user = {
     name: '小明',
     age: 18
}
const [name, age] = user

console.log(name)    //小明
console.log(age)     //18

const { name: uname, age } = user         //把原来的name变量重新命名为uname
console.log(uname)   //小明
console.log(age)     //18





                                 //数组对象解构
const pig = [
   {
       name: '佩奇',
       age: 6
   }
]
const [{ name, age}] = pig
console.log(name, age)

22.立即执行函数

//立即执行函数写法
(function t(){ })();

或者

;(function t(){ })()

//注意：立即执行函数前必须加分号

23.对象的常用方法

const o = { name: '佩奇', age: 6}
//1.获取键
const arr = Object.keys(0)
console.log(arr)    //['name', 'age']

//2.获取值
const arr =Object.values(o)
console.log(arr)    //['佩奇',6]

//3.对象拷贝
const obj = {}
Object.assign(obj, o)
console.log(obj)   //{name: '佩奇',age: 6}

//4.assign方法也可给对象添加新属性
Object.assign(o, {gender: '女'})
console.log(o)       //{name: '佩奇',age: 6, gender: '女'}

24.异常处理

 

 

25.改变this指向

1.call()

2.apply()

 

 3.bind()

总结：

26.节流与防抖

节流：

 

防抖：

 

 

总结：

 

使用lodash库实现节流与防抖：

 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

小程序极速注册认证免300认证费 突破管理员身份只能绑定5个小程序绿色通道

小程序极速注册认证免300认证费 突破管理员身份只能绑定5个小程序绿色通道

小程序注册账号管理相信大家有时候头都很大&#xff0c;一个身份证号只能绑定5个小程序主管理员。超个5个小程序就得请朋友、请亲戚身份证绑定管理员。有时还得看对方不方便&#xff0c;改个类目改个LOGO都还得管理员扫码。为了满足会员需求同是也满足自己需要&#xff0c;特别…
阅读更多...
C语言初阶 牛客网刷题笔记(将持续更新..)

C语言初阶 牛客网刷题笔记(将持续更新..)

BC7 缩短二进制 printf 格式控制符 “%o” —— 八进制整数 、“%x” —— 十六进制整数 &#xff1b; 修饰符 “#” —— 控制前导显示 BC64 K形图案 错因&#xff1a;把图形分成两部分&#xff0c;下半部分打印错误 先把下半部分作为一个完整三角形&#xff1a; int n0;scan…
阅读更多...
2023新版Spring6全新讲解-核心内容之AOP

2023新版Spring6全新讲解-核心内容之AOP

Spring核心之AOP 一、前置基础-代理模式 在学习Spring的AOP之前我们需要补充下设计模式中的代理模式。这块是理解AOP的必备基础内容。 1. 静态代理 若代理类在程序运行前就已经存在&#xff0c;那么这种代理方式被成为 静态代理 &#xff0c;这种情况下的代理类通常都是我们在J…
阅读更多...
ESG成全球风潮，联想造了一个可持续的“进托邦”

ESG成全球风潮，联想造了一个可持续的“进托邦”

不得不承认&#xff0c;全球经济前景仍然存在较大的不确定和挑战。全球经济疲软、地缘政治逆风、行业竞争加剧等多重压力让很多人都感受到了寒意。 在可预见的未来&#xff0c;我们将继续在一个复杂多变的全球环境中运营。 因此&#xff0c;著名的科技思想家凯文凯利提出&#…
阅读更多...
PCB的层间结构、铜箔厚度选择、PCB纵横比和板厚的要求

PCB的层间结构、铜箔厚度选择、PCB纵横比和板厚的要求

PCB的层间结构 a) 原则上应该采用对称结构设计。对称的含义包括&#xff1a;介质层厚度及种类、铜箔厚度、图形分布类型&#xff08;大铜箔层、线路层&#xff09;的对称。 b) 考虑电压击穿问题&#xff0c;正常情况下推荐介质层厚度设计值为≥0.1mm。 铜箔厚度选择 选择铜箔…
阅读更多...
javascript基础六：说说你对闭包的理解？闭包使用场景?

javascript基础六：说说你对闭包的理解？闭包使用场景?

一、是什么 一个函数和对其周围状态&#xff08;lexical environment&#xff0c;词法环境&#xff09;的引用捆绑在一起&#xff08;或者说函数被引用包围&#xff09;&#xff0c;这样的组合就是闭包&#xff08;closure&#xff09; 也就是说&#xff0c;闭包让你可以在一个…
阅读更多...
机器学习-Kmeans

机器学习-Kmeans

K-means是一种经典的无监督学习算法&#xff0c;用于对数据进行聚类。K-means算法将数据集视为具有n个特征的n维空间&#xff0c;并尝试通过最小化簇内平方误差的总和来将数据点划分为簇。本文将介绍K-means算法的原理、实现和应用。 定义 K-means是一种无监督学习算法&#…
阅读更多...
MongoDB基础到入门(一篇就够了)

MongoDB基础到入门(一篇就够了)

文章目录 文章有误请指正&#xff0c;如果觉得对你有用&#xff0c;请点三连一波&#xff0c;蟹蟹支持✨前言MongoDBMongoDB体系结构MongoDB数据模型MongoDB部署安装服务器启动服务器 Shell连接(mongo命令)MongoDB可视化工具MongoDB命令基本常用⭐权限数据库⭐辅助命令⭐集合⭐…
阅读更多...
vite的使用

vite的使用

私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版&#xff0c;配图更多&#xff0c;CSDN博文图片需要手动上传&#xff0c;因此文章配图较少&#xff0c;看不懂的可以去菜鸡博客参考一下配图&#xff01; 系列文章目录 前端系列文章——传送门 后端系列文章——传送…
阅读更多...
抖音seo源代码分享（前端+后端）

抖音seo源代码分享（前端+后端）

后端代码展示&#xff1a; $where [ [name > dvtv_s_id, oper > , value > $this->sid], [name > dvtv_dv_id, oper > , value > $dv_id], ]; $cache_model new App_Model_Douyin_MysqlVideoTempVideoStora…
阅读更多...
挂耳式耳机推荐，这几个蓝牙耳机品牌不容错过！

挂耳式耳机推荐，这几个蓝牙耳机品牌不容错过！

办公的同时享受音乐是释放工作压力的不错途径&#xff0c;对于成为打工人日常配饰的耳机随着无线技术的不断进步也在不断开发新产品。开放式耳机不入耳佩戴有效的降低对耳朵的负担&#xff0c;在不打扰旁人的同时&#xff0c;长时间的佩戴也是对耳朵的考验&#xff0c;不知该如…
阅读更多...
29 Vue 中 v-if/show/for 的实现

29 Vue 中 v-if/show/for 的实现

前言 这是最近的碰到的那个 和响应式相关的问题 特定的操作之后响应式对象不“响应“了 引起的一系列的文章 主要记录的是 vue 的相关实现机制 呵呵 理解本文需要 vue 的使用基础, js 的使用基础 v-if 测试用例 测试用例如下, 主要是一个 if 的使用 这里我们仅仅跟进到…
阅读更多...
chatgpt赋能python：Python桌面应用程序：在SEO中的重要性和应用

chatgpt赋能python：Python桌面应用程序：在SEO中的重要性和应用

Python桌面应用程序&#xff1a;在SEO中的重要性和应用 在当今数字时代&#xff0c;拥有一个桌面应用程序成为了非常重要的一件事情&#xff0c;特别是对于那些需要使用软件来完成日常任务的工作人员。而Python作为一种跨平台编程语言&#xff0c;可以帮助开发者编写适用于Win…
阅读更多...
chatgpt赋能python：Python换行连接介绍

chatgpt赋能python：Python换行连接介绍

Python 换行连接介绍 如果你是一个Python初学者&#xff0c;你可能会想知道如何在程序中使用换行连接来使代码更加易读和易于理解。 换行连接是Python编程中一个很重要的概念&#xff0c;也是一个很简单的概念&#xff0c;但是许多初学者经常会犯错误。 在本文中&#xff0c;我…
阅读更多...
( 链表) 142. 环形链表 II——【Leetcode每日一题】

( 链表) 142. 环形链表 II——【Leetcode每日一题】

❓142. 环形链表 II 难度&#xff1a;中等 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定…
阅读更多...
【测试】软件测试基本概念、软件测试分类、测试工具

【测试】软件测试基本概念、软件测试分类、测试工具

文章目录 软件测试的定义概念、目的什么是软件&#xff1f;软件与程序的区别软件测试的定义软件测试的目的软件测试的流程软件测试执行 软件测试分类按照测试阶段分类单元测试集成测试确认测试系统测试验收测试 按照测试方法分类静态测试动态测试黑盒测试白盒测试灰盒测试冒烟测…
阅读更多...
算法第四版 Algorithms Part 1动态联通性

算法第四版 Algorithms Part 1动态联通性

联通性检测用途 照片中的像素网络中的计算机社交网络中的朋友计算机芯片中的电路元器件数学集合中的元素Fortan程序中的变量复合体系中的金属位 假定已连接等价于 反身的: p与p本身是连接的.对称的: 如果p连接到q,那么q也链接到p传递的: 如果p连接到q并且q连接到r,那么p连接…
阅读更多...
港科夜闻｜香港科大近百名创新企业家回归母校庆祝大学首个「独角兽日」

港科夜闻｜香港科大近百名创新企业家回归母校庆祝大学首个「独角兽日」

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大近百名创新企业家回归母校庆祝大学首个「独角兽日」。这些香港科大毕业的创业者&#xff0c;参与创立了五间独角兽企业或上市公司&#xff0c;以及近90间初创企业&#xff0c;包括现正快速崛起、有潜力成为下一间…
阅读更多...
【Linux】守护进程（附终端、进程组、会话的介绍）

【Linux】守护进程（附终端、进程组、会话的介绍）

目录 1、终端2、进程组3、会话4、守护进程 橙色 1、终端 echo $$ 可以查看当前终端进程的id 默认情况下(没有重定向)&#xff0c;每个进程的标准输入、标准输出和标准错误输出都指向控制终端、进程从标准输入读也就是读用户的键盘输入&#xff0c;进程往标准输出或标准错误…
阅读更多...
PGXC GaussDB

PGXC GaussDB

PGXCA PGXC&#xff08;PostgreSQL eXtended Coordinator&#xff09;是一个基于 PostgreSQL 架构的分布式数据库解决方案。它扩展了 PostgreSQL&#xff0c;为用户提供了在多个节点上分布式存储和处理数据的能力。 PGXC 的设计目标是将 PostgreSQL 扩展为能够处理大规模数据…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023