![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
路飞小朋友
这个作者很懒,什么都没留下…
展开
-
定时器
定时器的常见方法setInterval():循环调用。将一段代码,每隔一段时间执行一次。(循环执行)setTimeout():延时调用。将一段代码,等待一段时间之后再执行。(只执行一次)备注:在实际开发中,二者是可以根据需要,互相替代的。setInterval() 的使用setInterval():循环调用。将一段代码,每隔一段时间执行一次。(循环执行)参数:参数1:回调函数,该函数会每隔一段时间被调用一次。参数2:每次调用的间隔时间,单位是毫秒。返回值:返回一个N原创 2020-07-17 10:17:56 · 95 阅读 · 0 评论 -
定时器练习题
轮播图代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width:原创 2020-07-17 08:35:08 · 482 阅读 · 0 评论 -
BOM简介
JavaScript的组成JavaScript基础分为三个部分:ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。DOM:文档对象模型(Document object Model),操作网页上的元素的API。比如让盒子移动、变色、轮播图等。BOM:浏览器对象模型(Browser Object Model),操作浏览器部分功能的API。比如让浏览器自动滚动。常见的 BOM 对象BOM可以让我们通过JS来操作浏览器。BOM中原创 2020-07-14 15:00:38 · 225 阅读 · 0 评论 -
DOM鼠标键盘事件
鼠标的拖拽事件拖拽的流程:(1)onmousedown:当鼠标在被拖拽元素上按下时,开始拖拽;(2)onmousemove:当鼠标移动时被拖拽元素跟随鼠标移动;(3)onmouseup:当鼠标松开时,被拖拽元素固定在当前位置。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/原创 2020-07-14 10:54:33 · 131 阅读 · 0 评论 -
DOM事件的绑定
绑定事件的两种方式/DOM事件的级别我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定(注册)事件的两种方式,我们以onclick事件为例。方式一:onclick element.onclick = function () { }举例:<body><button>点我</button><script> var btn = document.getEleme原创 2020-07-13 09:22:43 · 79 阅读 · 0 评论 -
DOM事件委托
事件委托事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown…)的函数委托到另一个元素。比如说有一个列表 ul,列表之中有大量的列表项 <a>标签:<ul id="one"> <li><a href="javascript:;">链接1</a></li> <li><a href="#">链接2</a></li> <li><原创 2020-07-13 08:18:36 · 129 阅读 · 0 评论 -
DOM事件传播及冒泡
DOM事件流事件传播的三个阶段是:事件捕获、事件冒泡和目标。事件捕获阶段:事件从祖先元素往子元素查找(DOM树结构),直到捕获到事件目标 target。在这个过程中,默认情况下,事件相应的监听函数是不会被触发的。事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。事件冒泡阶段:事件从事件目标 target 开始,从子元素往冒泡祖先元素冒泡,直到页面的最上一级标签。如下图所示:事件捕获addEventListener可以捕获事件:原创 2020-07-13 07:19:48 · 206 阅读 · 0 评论 -
DOM事件对象
绑定事件的两种方式/DOM事件的级别我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定(注册)事件的两种方式,我们以onclick事件为例。DOM0的写法:onclick element.onclick = function () { }举例:<body><button>点我</button><script> var btn = document.getE原创 2020-07-12 20:17:45 · 201 阅读 · 0 评论 -
DOM元素节点操作属性
设置节点的属性我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。我们就统一拿下面这个标签来举例: <img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">1、获取节点的属性值方式1: 元素节点.属性名; 元素节点[属性名];举例:(获取节点的属性值)<body><img src="images/1.jpg" class="image-box" title原创 2020-07-12 18:19:58 · 117 阅读 · 0 评论 -
DOM节点操作scroll相关属性(动画)
JS动画的三大家族包括:offset/scroll/client,这章讲scroll,以及与其相关的匀速动画scroll 相关属性方法window.onscroll() 方法当我们用鼠标滚轮,滚动网页的时候,会触发 window.onscroll() 方法。效果如下:(注意看控制台的打印结果)如果你需要做滚动监听,可以使用这个方法。scroll 相关属性scrollWidth 和 scrollHeight:获取元素整个滚动区域的宽高 + paddingscrollLeft 和 scroll原创 2020-07-12 12:53:19 · 1260 阅读 · 0 评论 -
DOM节点操作offset相关属性(动画)
JS动画的三大家族包括:offset/scroll/client,这章讲offset,以及与其相关的匀速动画offset 家族的组成js中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括:offsetWidthoffsetHightoffsetLeftoffsetTopoffsetParentoffsetWidth 和 offsetHightoffsetWidth 和 offsetHight:获取元素的宽高 + padding + borde原创 2020-07-12 10:33:39 · 318 阅读 · 0 评论 -
DOM元素节点操作样式
通过JS修改元素样式在DOM当中,如果想设置样式,有两种形式:className(针对内嵌样式)style(针对行内样式)这篇文章,我们就来讲一下style。使用style属性来操作元素的内联样式语法:读取语法:元素.style.样式名修改语法:元素.style.样式名 = 样式值 // 读取语法 元素.style.样式名 元素.style["属性"]; //这种读取方式可以给属性传递参数(变量) // 修改语法 元素.style.样式名 = 样式值;原创 2020-07-11 22:55:00 · 325 阅读 · 0 评论 -
DOM修改元素节点 (增删改)
DOM节点的操作(重要)上一段的内容:节点的访问关系都是属性本段的内容:节点的操作都是函数(方法)创建节点格式如下: 新的标签(元素节点) = document.createElement("标签名");比如,如果我们想创建一个li标签,或者是创建一个不存在的adbc标签,可以这样做:<script type="text/javascript"> var a1 = document.createElement("li"); //创建一个li标签 var a2原创 2020-07-11 10:04:37 · 512 阅读 · 0 评论 -
DOM增删改查练习
练习一效果图heml代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</原创 2020-07-10 12:06:01 · 286 阅读 · 0 评论 -
DOM获取元素节点 (查)
通过document对象获取元素节点在网页中浏览器已经为我们提供了document对象它代表的是整个网页,它是window对象的属性,可直接使用,通过它可以获取网页里任意对象DOM节点的获取方式其实就是获取事件源的方式。关于事件,上一篇文章中已经讲到了。想要操作元素节点,必须首先要找到该节点。有三种方式可以获取DOM节点://方式一:通过 id 获取 一个 元素节点对象(为什么是一个呢?因为 id 是唯一的)var div1 = document.getElementById("box1");原创 2020-07-10 12:03:24 · 150 阅读 · 0 评论 -
DOM事件简介
事件简介事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。事件的三要素事件的三要素:事件源、事件、事件驱动程序。比如,我用手去按开关,灯亮了。这件事情里,事件源是:手。事件是:按开关。事件驱动程序是:灯开了或者关了。再比如,网页上弹出一个广告,我点击右上角的X,广告就关闭了。这原创 2020-07-09 18:17:58 · 192 阅读 · 0 评论 -
DOM简介
JavaScript的组成JavaScript基础分为三个部分:ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。DOM:文档对象模型(Document object Model),操作网页上的元素的API。比如让盒子移动、变色、轮播图等。BOM:浏览器对象模型(Browser Object Model),操作浏览器部分功能的API。比如让浏览器自动滚动。节点节点(Node):构成 HTML 网页的最基本单元。网页中的每原创 2020-07-09 18:05:40 · 154 阅读 · 0 评论 -
JS对象:正则表达式
正则表达式简介 link定义:正则表达式用于定义一些字符串的规则。作用:计算机可以根据正则表达式,来检查一个字符串是否符合指定的规则;或者将字符串中符合规则的内容提取出来。使用构造函数创建正则表达式的对象语法 var 变量 = new RegExp("正则表达式"); // 注意,参数是字符串 var 变量 = new RegExp("正则表达式", "匹配模式"); // 注意,两个参数都是字符串备注:RegExp的意思是 Regular expression。使用typeof检查正则对原创 2020-07-09 16:11:54 · 195 阅读 · 0 评论 -
JS对象:内置对象String
在底层,字符串以字符数组的形式保存在底层,字符串是以字符数组的形式保存的。代码举例:var str = 'smyhvae';console.log(str.length); // 获取字符串的长度console.log(str[2]); // 获取字符串中的第2个字符上方代码中,smyhvae这个字符串在底层是以["s", "m", "y", "h", "v", "a", "e"]的形式保存的。因此,我们既可以获取字符串的长度,也可以获取指定索引 index 位置的单个字符。这很像数组中的操作。原创 2020-07-09 09:37:50 · 154 阅读 · 0 评论 -
JS对象:包装类
基本数据类型不能绑定属性和方法属性和方法只能添加给对象,不能添加给基本数据类型。注意,基本数据类型string是无法绑定属性和方法的。比如说: // 基本数据类型 let str1 = 'hello'; // 对象 let str2 = new String('hello'); str1.name = 'tom'; str2.name = 'tom'; console.log(typeof str1); // 打印结果:string c原创 2020-07-08 21:08:13 · 67 阅读 · 0 评论 -
JS对象:内置对象Number和Boolean
内置对象 NumberNumber.isInteger() 判断是否为整数语法:布尔值 = Number.isInteger(数字);toFixed() 小数点后面保留多少位语法:字符串 = myNum.toFixed(num);解释:将数字 myNum 的小数点后面保留 num 位小数(四舍五入),并返回。不会改变原数字。注意,返回结果是字符串。参数 num:指定了小数点后面的位数。举例:let num = 3.456;let num2 = num.toFixed(2);co原创 2020-07-08 19:22:43 · 117 阅读 · 0 评论 -
JS对象:内置对象Math
内置对象 MathMath 和其他的对象不同,它不是一个构造函数,不需要创建对象。所以我们不需要 通过 new 来调用,而是直接使用里面的属性和方法即可。Math属于一个工具类,里面封装了数学运算相关的属性和方法。如下:方法描述备注Math.PI圆周率Math对象的属性Math.abs()返回绝对值Math.random()生成0-1之间的随机浮点数取值范围是 [0,1)Math.floor()向下取整(往小取值)Math.ceil()向原创 2020-07-08 19:21:32 · 114 阅读 · 0 评论 -
JS对象:内置对象Date
内置对象:Date内置对象 Date 用来处理日期和时间。需要注意的是:与 Math 对象不同,Date 对象是一个构造函数 ,需要先实例化后才能使用。创建Date对象创建Date对象有两种写法:写法一:如果Date()不写参数,就返回当前时间对象写法二:如果Date()里面写参数,就返回括号里输入的时间对象写法一:不传递参数时,则获取系统的当前时间对象// 代码解释:不传递参数时,表示的是获取系统的当前时间对象。也可以理解成是:获取当前代码执行的时间var date1 =原创 2020-07-08 18:27:33 · 175 阅读 · 0 评论 -
JS数组:常见方法和数组的遍历
数组的方法清单 link数组的类型相关:方法描述备注Array.isArray()判断是否为数组toString()将数组转换为字符串Array.from(arrayLike)将伪数组转化为真数组Array.of(value1, value2, value3)创建数组:将一系列值转换成数组注意,获取数组的长度是用length属性,不是方法。关于 length属性,详见上一篇文章。数组元素的添加和删除:方法描述备注pu原创 2020-07-07 21:23:03 · 168 阅读 · 0 评论 -
JS数组:基本用法
数组简介 link数组(Array)是属于内置对象,我们可以在MDN网站上查询各种方法。数组和普通对象的功能类似,也是用来存储一些值的。不同的是:普通对象是使用字符串作为属性名的,而数组是使用数字作为索引来操作元素。索引:从 0 开始的整数就是索引数组的存储性能比普通对象要好。在实际开发中我们经常使用数组来存储一些数据(尤其是列表数据),使用频率非常高数组中的元素可以是任意的数据类型,也可以是对象,也可以是函数,也可以是数组。数组的元素中,如果存放的是数组,我们就称这种数组为二维数组创建数原创 2020-07-07 20:11:58 · 111 阅读 · 0 评论 -
JS对象:垃圾回收 (GC)
当一个对象没有任何的变量或属性对它进行引用,此时这种对象就是一个垃圾,这种对象过多会占用大量的内存空间,导致程序运行变慢,在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁我们不需要也不能进行垃圾回收的操作,我们需要做的只是要将不再使用的对象设置null即可...原创 2020-07-07 16:44:45 · 1065 阅读 · 0 评论 -
JS对象:原型对象
上一篇文章提出了类和对象的概念,但是之前的类还有改进空间改进思路创建一个Person构造函数(存在改进空间)构造函数每执行一次,就会创建一个新的sayName方法每个对象的sayName方法都是唯一的,100个对象就有100个sayName方法,且这些方法都一样,不合理 function Person(name, age) { this.name = name; this.age = age; this.sayName = function原创 2020-07-05 15:50:25 · 93 阅读 · 0 评论 -
JS对象:类和对象
本文是通过工厂方法来引出类和对象的概念,工厂方法不是重点工厂方法工厂方法其实就是自定义一个函数,函数内写创建对象的模板,然后通过调用函数批量生产对象 /* 使用工厂方法创建对象,可以大批量的创建对象 */ function creatPerson(name, age) { var obj = new Object(); obj.name = name; obj.age = age; obj.sayName原创 2020-07-05 10:04:16 · 131 阅读 · 0 评论 -
JS对象:this绑定
this指向一个对象解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this,this指向的是一个对象,这个对象我们称为函数执行的 上下文对象。普通函数是window对象的方法,调用普通函数其实是调用window对象的方法哪个对象调用方法,this便指向哪个对象this指向总结以函数的形式调用时,this永远都是window以方法的形式调用时,this是调用方法的那个对象以构造函数的形式调用时,this是新创建的那个对象使用call和apply调原创 2020-07-04 21:05:43 · 159 阅读 · 0 评论 -
JS基础:变量作用域
作用域、变量提升的知识点,面试时会经常遇到作用域的分类作用域是指一个变量的作用范围全局作用域:作用范围整个 script 标签内部,页面打开时创建,关闭时销毁函数作用域:作用范围函数内部,随着函数调用结束而销毁全局变量定义在函数外的变量,都是全局变量在函数内部,不使用 var 声明的变量 也是是全局变量全局变量有全局作用域,可以在页面任意位置访问,包括函数中全局变量在页面关闭后销毁局部变量在函数内部,使用 var 声明的变量是局部变量在函数内部,不使用 var 声明的变量原创 2020-07-04 18:38:36 · 74 阅读 · 0 评论 -
JS基础:函数
函数的核心内容函数有哪几种定义和调用方式this:函数内部的 this 指向、如何改变 this 的指向。函数的严格模式高阶函数:函数作为参数传递、函数作为返回值传递闭包:闭包的作用递归:递归的两个条件深拷贝和浅拷贝的区别函数的介绍函数,就是将一些功能或语句进行封装,在需要的时候,通过调用的形式,执行这些语句所有的函数,都是 Fuction 的"实例对象",函数本质上都是通过 new Function 得到的函数是 Fuction 的"实例对象",也就原创 2020-07-03 21:19:27 · 89 阅读 · 0 评论 -
JS对象:传值和传址
理论基础JS中的所有变量都保存在栈内存中基本数据类型的值直接保存在栈内存中对象的值保存在堆内存中,栈内存中保存的是对象的地址赋值操作a=b都会复制栈内存中的值,只是对象在栈内存中的存的是地址传值基本数据类型 String Number Boolean Null Undefined 都是传值 // 下方代码中,修改 b 的值之后,a 的值并不会发生改变 var a = 1; var b = a; b = 2; console.log(a,b) /原创 2020-07-03 17:50:09 · 430 阅读 · 0 评论 -
JS对象:简介
面向对象简介面向对象:可以创建自定义的类型,很好的支持继承和多态。面向对象的特征:封装、继承、多态。对象的概念在 JavaScript 中,对象是一组无序的相关属性和方法的集合。对象的作用是:封装信息。比如Student类里可以封装学生的姓名、年龄、成绩等。对象具有特征(属性)和行为(方法)。为什么需要对象保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。比如,如果要保存一个人的信息,通过数组的方式可以这样保存:var arr = ['王二', 35, '男', '180原创 2020-07-03 13:46:57 · 102 阅读 · 0 评论 -
222
循环语句:通过循环语句可以反复的执行一段代码多次for 循环的语法for 循环举例for (var i = 1; i < 13; i = i + 4) { console.log(i);}上方代码的遍历步骤:程序一运行,将执行var i = 1;这条语句, 所以i的值是1。然后程序会验证一下i < 13是否满足,1<13是真,所以执行一次循环体(就是大括号里面的语句)。执行完循环体之后,会执行i=i+4这条语句,所以i的值,是5。程序会会验证一下i <原创 2020-07-02 21:43:59 · 131 阅读 · 0 评论 -
JS基础:循环结构
循环 for whilefor循环 for (var i=1; i<10; i++){ document.write(i); } // 其他写法 for (var n=1; n<10;){ document.write(n); n++; } var m=1; for (; m<10;){原创 2020-07-02 21:43:24 · 71 阅读 · 0 评论 -
JS基础:选择结构
代码块用{}包围起来的代码,就是代码块。在 ES5 语法中,代码块,只具有分组的作用,没有其他的用途。代码块中的内容,在外部是完全可见的。举例:{ var a = 2; alert('你好'); console.log('中国');}console.log('a = ' + a);流程控制语句JS中的程序是从上到下一行一行执行的,通过流程控制语句可以控制程序执行流程,使程序可以根据一定条件选择执行流程控制语句分类顺序结构选择结构:if 语句、switc原创 2020-07-02 17:41:58 · 113 阅读 · 0 评论 -
JS基础:运算符
凡是运算,必有返回值即运算结果运算符简介运算符:也叫操作符,是一种符号。通过运算符可以对一个或多个值进行运算,并获取运算结果。表达式:由数字、运算符、变量的组合 (组成的式子),表达式最终都会有一个运算结果,我们将这个结果称为表达式的返回值。比如:+、*、/、( 都是运算符,而(3+5)/2则是表达式。比如:typeof 就是运算符,可以来获得一个值的类型。它会将该值的类型以字符串的形式返回,返回值可以是 number、string、boolean、undefined、object算原创 2020-07-01 13:07:43 · 121 阅读 · 0 评论 -
JS基础:数据类型转换
强制类型转换将一个数据类型强制转换为其他数据类型类型转换主要是指将其他数据类型转化为String Number Boolean转换为String方式1:调用被转换数据类型的 toString() 方法并没有改变a本身的数据类型,只是把返回的结果类型改变了可以把返回值赋给a,从而改变a的数据类型null 和 undefined 这两个值没有toString() 方法var a = 123;a = a.toString(); // string '123'a = true;a =原创 2020-06-30 10:53:14 · 106 阅读 · 0 评论 -
JS基础:Null和undefined
很多其他的语言中,只有 null;但 JS 语言中,既有 null,又有 undefined。很多人会弄混,由此觉得 JS 语言很麻烦。其实不然,学习完这篇文章后,你会发现 null 和 undefined 的区别很容易理解。Null:空对象null 专门用来定义一个空对象(例如:let a = null)。如果你想定义一个变量用来保存引用类型,但是还没想好放什么内容,这个时候,可以在初始化时将其设置为 null。比如:let myObj = null;cosole.log(typeof myO原创 2020-06-30 07:06:31 · 99 阅读 · 0 评论 -
JS基础:Number
数值型:Number在JS中所有的数值都是 Number 类型,包括整数和浮点数(小数)。 var a = 100; // 定义一个变量 a,并且赋值整数100 console.log(typeof a); // number var b = 12.3; // 定义一个变量 b,并且赋值浮点数 12.3 console.log(typeof a); // number补充:在 JS 中,只要是数,就是 Number 数值型的。无论整浮、浮点数(即小数)、无论大小、无论正负,都是 Number原创 2020-06-29 19:42:18 · 82 阅读 · 0 评论