![](https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
原生js
文章平均质量分 64
js从入门到精通
B.Bz
毛毛你是个好姑娘
展开
-
JS高级----深拷贝和浅拷贝
浅拷贝只拷贝最外面层的拷贝方式使用Object的assign方法:Object.assign(拷贝完的新对象,要被拷贝的旧对象) let user = { name: 'zs', age: 22, color: ['red', 'yellow', 'green', 'pink'], message: { index: 1, s原创 2021-11-23 17:44:28 · 416 阅读 · 0 评论 -
JS高级----Js中的 “类“(class)
class:早期 JavaScript 中是没有类的,面向对象大多都是基于构造函数和原型实现的ES6 中开始增加了 “类” 相关的语法,使得 js中的面向对象实现方式更加标准创建类类中封装的并不是变量和函数,因此不能使用关键字 let、const 或 var实例属性和实例方法: // 创建类 class 类名 { 实例属性 实例方法 } class Person { name = '小明' e原创 2021-11-23 17:22:23 · 1325 阅读 · 0 评论 -
JS高级----this指向问题和动态修改this指向
普通函数内: function study() { console.log(this); } let study1 = function() { console.log(this); } study(); // window 对象 study1(); // window 对象 let user = { name: 'zs.原创 2021-11-23 16:42:55 · 431 阅读 · 0 评论 -
JS高级----对象的继承
什么是继承?一个对象继承另一个对象,可以使用父级对象的属性和方法,共享资源,避免大量浪费系统资源prototype 属性的作用:原型对象的所有属性和方法,都能被实例对象共享。如果属性和方法定义在原型上,那么所有实例对象就能共享,不仅节省了内存,还体现了实例对象之间的联系。 function Person() { } Person.prototype.eyes = 2; p1 = new Person(); .原创 2021-11-22 20:54:39 · 802 阅读 · 0 评论 -
JS高级----面向对象
面向对象面向对象是一种编程思想。主要是把事物给对象化,包括其属性和行为。总体来说面向对象的底层还是面向过程,面向过程抽象成类,然后封装,方便使用就是面向对象。构造函数:构造函数是专门用于创建对象的函数,如果一个函数使用 new 关键字调用,那么这个函数就是构造函数。使用 new 关键字调用函数的行为被称为实例化实例化构造函数时没有参数时可以省略 ()构造函数的返回值即为新创建的对象构造函数内部的 return 返回的值无效! function foo(a) {.原创 2021-11-19 20:42:53 · 720 阅读 · 0 评论 -
JS---使用swiper制作移动端轮播图
进入官网下载swiper插件插件下载地址加载插件,需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件 <!-- 引入swipercss文件 --> <link rel="stylesheet" href="swiper/swiper-bundle.min.css"> <!-- 引入swiper js 文件 --> <script src="swiper/swipe..原创 2021-11-16 20:16:12 · 430 阅读 · 2 评论 -
JS----触摸事件对象
触屏事件移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。常见的触屏事件:触屏touch事件说明touchstart手指触摸到一个DOM元素时触发 类似于pc端的mouseovertouchmove手指在一个DOM元素上滑动时触发 类似于pc端的mousemovetouchend手指从一个DOM元素上移开时触原创 2021-11-15 17:53:30 · 2324 阅读 · 0 评论 -
JS----轮播图案例
轮播图案例分析:点击左右箭头 滑动轮播图鼠标不在轮播图内时 每隔2秒自动滑动轮播图鼠标移入时 停止自动滑动轮播图点击小圆圈 显示对应的轮播图鼠标移入、移出显示或隐藏左右箭头 // 获取左右箭头的元素 let arrow_l = this.document.querySelector('.arrow-l'); let arrow_r = this.document.querySelector('.arrow-r'); // 获取到轮播图盒子元素原创 2021-11-15 16:03:33 · 841 阅读 · 1 评论 -
JS---- mouseenter和mouseover的区别以及动画函数的封装
mouseenter 和mouseover的区别当鼠标移动到元素上时就会触发mouseenter 事件类似 mouseover,它们两者之间的差别是mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经过自身盒子触发之所以这样,就是因为mouseenter不会冒泡跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡Mouseover mouseout 和mouseenter mouseleave代码示例:mouseover:f原创 2021-11-11 20:51:21 · 1175 阅读 · 0 评论 -
JS-三大元素系列----offset、client和scroll
元素偏移量offset系列:offset就是偏移量,使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意:返回的数值都不带单位offset系列属性作用element.offsetParent返回该元素带有定位的父级元素,如果父级都没有定位则返回bodyelement.offsetTop返回元素相对带有定位的父元素上方的偏移 top:element.offs.原创 2021-11-10 21:04:47 · 152 阅读 · 0 评论 -
JS基础----运算符
算数运算符运算符是处理数据的基本方法,用来从现有的值得到新的值。JavaScript 提供了多种运算符,覆盖了所有主要的运算。加法运算符:x + y减法运算符: x - y乘法运算符: x * y除法运算符:x / y指数运算符:x ** y余数运算符:x % y赋值运算符: +x负赋值运算符:-x自增运算符:++x 或者 x++自减运算符:--x 或者 x--自增自减运算符加减符号在前后有区别!!var a = 1;var b =.原创 2021-10-28 18:08:58 · 479 阅读 · 0 评论 -
JS基础----入门
什么是 JavaScript 语言JavaScript 是一种轻量级的脚本语言。JavaScript 是一种嵌入式(embedded)语言宿主环境(浏览器)提供的API: BOM、DOM注释// 单行注释/*多行注释1多行注释2*/由于历史上 JavaScript 可以兼容 HTML 代码的注释,所以<!--和-->也被视为合法的单行注释但是不能使用这种注释,知道有这么个东西变量变量是对“值”的具名引用。变量就是为“值”起名,然后引用这个名字,就原创 2021-10-25 21:13:41 · 96 阅读 · 0 评论 -
JS基础----函数
函数的声明function 命令function fn() { console.log('1');}fn(); // 调用函数打印1函数表达式var fn = function() { console.log('1');}fn();如果同一个函数被多次声明,后面的声明就会覆盖前面的声明。函数名提升变量先使用后定义,有变量提升,函数同样有函数名提升,先使用函数后定义函数函数的属性和方法name属性返回函数名var fn =.原创 2021-10-28 17:49:19 · 90 阅读 · 0 评论 -
JS基础----数据类型
typeof 运算符可以确定一个值到底是什么类型。null和undefinednull表示空值,即该处的值现在为空。调用函数时,某个参数未设置任何值,这时就可以传入null,表示该参数为空。比如,某个函数接受引擎抛出的错误作为参数,如果运行过程中未出错,那么这个参数就会传入null,表示未发生错误。undefined表示“未定义”布尔值布尔值有两个值 true 或者 false和python中不同 js的布尔值开头不大写这些逻辑运算会返回布尔值:前置逻原创 2021-10-26 21:13:02 · 166 阅读 · 0 评论 -
JS-DOM----事件高级
事件监听addEventListener()方法参数1为具体的事件参数2为事件触发后的函数语法:元素.addEventListener('click(具体的事件)',function(e) { // 事件触发后处理的函数代码})解绑事件传统方式解绑事件元素.onclick = null;方法监听解绑事件的方式元素.removeEventListener('具体的事件',绑定事件时的回调函数名)解绑事件的代码示例:<!DOCTYPE html.原创 2021-11-08 20:33:51 · 952 阅读 · 0 评论 -
JS-DOM----操作页面的开始
什么是DOM?.DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容)。DOM 的最小组成单位叫节点,节点的7种类型:Document: 整个文档树的顶层节点DocumentType:doctype标签(比如<!DOCTYPE html>)Element:网页的各种HTML标签(比如<body>、&.原创 2021-11-01 21:19:07 · 174 阅读 · 0 评论 -
JS-DOM----自定义属性操作和事件操作
自定义属性操作获取属性值语法:element.getAttribute('属性名') // 返回属性值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&.原创 2021-11-04 21:21:57 · 167 阅读 · 0 评论 -
JS-BOM----顶级对象window的操作(一)
什么是Bom?BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。DOM与BOM的区别:dom:文档对象模型DOM就是把文档当作一个对象来看待DOM的顶级对象是do..原创 2021-11-08 19:57:30 · 483 阅读 · 0 评论 -
JS-BOM----顶级对象window的操作(二)
this指向问题this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象。全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)方法调用中谁调用this指向谁构造函数中this指向构造函数的实例location对象window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我原创 2021-11-09 17:30:42 · 804 阅读 · 0 评论