JavaScript
从0学习前端JavaScript
想要成为码农
这个作者很懒,什么都没留下…
展开
-
DOM拖拽事件源码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-12-26 14:14:40 · 65 阅读 · 1 评论 -
DOM关于事件的传播
事件的传播- 关于事件的传播网景公司和微软公司有不同的理解- 微软公司认为事件应该是由内向外传播,也就是当事件触发时应该先触发当前元素上的事件,然后再向当前元素的祖先元素传播也就是说事件应该在冒泡阶段执行- 网景公司认为事件应该是由外向内创博的,当事件触发时,应该先触发当前元素最外层的祖先元素事件,然后再向内传播给后代元素- W3C综合了两个公司的方案,将事件的传播分成了三个阶段1、事件的捕获阶段- 在事件的捕获阶段时从最外层的祖先元素,向目标元素进行实践的捕获,但是默认此时不会触发事件原创 2021-12-26 13:38:00 · 265 阅读 · 0 评论 -
通过DOM来说去元素的内联样式
通过js修改元素的样式:语法:元素.style.样式名 = 样式值 注意:如果CSS样式中含有减号“-” 这种名称在JS中是不合法的比如background-color 需要将这种样式名修改为驼峰命名法 去掉减号,然后将-后的字母大写 我们通过style属性设置的样式都是内联样式 而内联样式原创 2021-12-25 22:50:20 · 287 阅读 · 2 评论 -
通过DOM来获取元素的样式
获取元素当前显示的样式语法:元素.currentStyle.样式名它可以用来读取当前元素的样式如果当前元素没有设置改样式,则获取它的默认值在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式这个方法是window的方法,可以直接使用需要两个参数第一个:要获取样式的元素第二个:可以传递一个伪元素 该方法会返回一个对象,对象中封装了当前元素对应的样式 可以通过对象.样式名来读取样式原创 2021-12-25 22:49:36 · 496 阅读 · 0 评论 -
使用DOM写出简单的复仇者联盟轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-12-24 20:56:44 · 84 阅读 · 0 评论 -
JavaScript中DOM的那些事儿
DOM简介1、什么是DOMDOM,全程Document Object Model文档对象模型JS中通过DOM来对HTML文档进行操作。了解了DOM就可以随心所欲的操作WEB页面文档:表示的是整个HTML网页文档对象:表示将网页中的每一个部分都转换为一个对象模型:表示对象之间的关系,这样可以方便获取对象2、节点节点Node,是构成我们网页的最基本的组成部分,网页中每一个部分都可以称为是一个节点。比如:html标签、属性、文本、注释、整个文档等都是一个节点。虽然都是节原创 2021-12-24 11:04:26 · 92 阅读 · 0 评论 -
JavaScript中的arguments
在调用函数时,浏览器每次都会传递进两个隐含的参数:1、函数的上下文对象this2、封装实参的对象arguments- arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度- 在调用函数时,我们所传递的实参都在arguments中保存- arguments,length可以用来获取实参的长度- 即使不定义形参,也可以通过argumengts来使用实参,只不过比较麻烦arguments[0]表示第一个实参arguments[1]表示第二个实参…- 函数对象中还有一个原创 2021-12-08 18:58:21 · 463 阅读 · 0 评论 -
JavaScript中call()和apply()函数方法
call()和apply()- 这两个方式都是函数对象的方法,需要通过函数对象来调用- 当对函数调用call()和apply()都会调用函数执行- 在调用call()和aplly()可以将一个对象指定为第一个参数此时这个对象将会成为函数执行时的this- call()方法可以将实参在对象之后依次传递- apply()方法需要将实参封装到一个数组中统一传递 - this的情况: 1、以函数形式调用时,this永远倒是window 2、原创 2021-12-08 18:43:05 · 268 阅读 · 0 评论 -
JavaScript数组的3个属性和14个方法(内含举例)
JavaScript数组的3个属性和14个方法属性constructor:返回对创建此对象的数组函数的引用。length:设置或返回数组中元素的数目。prototype:使您有能力向对象添加属性和方法。方法concat():连接两个或更多的数组,并返回结果。join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。pop():删除并返回数组的最后一个元素push():向数组的末尾添加一个或更多元素,并返回新的长度。reverse():颠倒数组中元素的顺序。shift():删除并返回数组的第原创 2021-12-06 19:47:13 · 1179 阅读 · 19 评论 -
JavaScript中的slice()和splice()
slice()- 可以用来从数组中提取执行元素- 该方法不会改变原数组,而是将截取到的元素封装到一个新数组中返回- 参数:1、截取开始的位置的索引,包含开始索引2、截取结束的位置的索引,不包括结束索引- 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素- 索引可以传递一个负值,如果传递一个负值,则从后往前计算-1表示倒数第一个-2表示倒数第二个splice()- 可以用于删除数组中的指定元素- 使用splic()会影响到原数组,会将指定元素从原数组中删除- 参数:第一个原创 2021-12-05 20:40:41 · 559 阅读 · 0 评论 -
JavaScript中pop()、push()、unshift()、shift()
push()- 该方法可以想数组的末尾添加一个或多个元素,并返回数组新的长度- 可以将要添加的元素作为方法的参数传递这样这些元素将会自动提娜佳到数组的末尾- 该方法会将数组新的长度作为返回值返回push()- 该方法可以想数组的末尾添加一个或多个元素,并返回数组新的长度- 可以将要添加的元素作为方法的参数传递这样这些元素将会自动提娜佳到数组的末尾- 该方法会将数组新的长度作为返回值返回push()- 该方法可以想数组的末尾添加一个或多个元素,并返回数组新的长度- 可以将要添加的元素作原创 2021-12-05 00:38:56 · 452 阅读 · 0 评论 -
JavaScript中的数组
数组(Array)- 数组也是一个对象- 它和我们普通的对象功能类似,也是用来存储一些值的- 不同的是普通对象是使用字符串作为属性名的,而数组是使用数字来作为索引来操作元素的 - 索引(index) 从0开始的整数就是索引 - 数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据 // 创建数组对象var arr = new Array()// 使用typeof检查一个数组时,会返回object// consol原创 2021-12-04 20:27:08 · 193 阅读 · 0 评论 -
JavaScript中的垃圾回收
垃圾回收(GC)- 就像人生活的时间长了会产生垃圾一样,程序运行过程中也会产生垃圾像这些垃圾积攒过多以后,会导致程序运行的速度过慢,所以我们需要一个垃圾回收的机制,来处理程序运行过程中来产生的垃圾- 当一个对象没有任何的变量火属性对它进行引用,此时我们将永远无法操作该对象此时这种对象就是一个垃圾,这种对象过多会占用大量的内存空间,导致程序运行变慢所以这种垃圾必须进行清理。- 在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁我们不需要也不能进行垃圾回收操作- 我们需要做的只是原创 2021-12-04 19:46:02 · 182 阅读 · 0 评论 -
JavaScript中原型对象
原型portotype 我们所创建的每一个函数,解析器都会向函数中添加一个属性pertotype 这个属性对应着一个对象,这个对象就是我们所谓的原型对象 如果函数作为普通函数调用pertotype没有任何作用 当函数以构造函数形式调用时,它所创建的对象中都会有一个隐含的属性, 指向该构造函数的原型对象,我们可以通过__proto__来访问该属性 原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象原创 2021-12-01 22:21:31 · 406 阅读 · 0 评论 -
JavaScript中的构造函数
创建一个Person构造函数- 在Person构造函数中,为每一个对象都添加了一个sayName方法目前我们的方式是在构造函数内部创建的,也就是构造函数没执行一次就会创建一个新的sayName方法有就是所有实例的sayName都是唯一的。这样就导致了构造函数执行一次就会创建一个新的方法执行10000次就会创建10000个新的方法,而10000个方法都是一模一样的这是完全没有必要的,完全可以使所有的对象共享同一个方法 function Person(name, age, gender){原创 2021-12-01 21:47:56 · 95 阅读 · 0 评论 -
JavaScript中构造函数
使用工厂方法创建的对象,使用的构造函数都是object所以创建的对象都是object这个类型,就导致我们无法区分出多种不同类型的对象 创建一个构造函数,专门用来船舰person对象 构造函数就是一个普通的函数,创建方式和普通函数没有区别 不同的是构造函数习惯上首字母大写 构造函数和普通函数的区别就是调用方式的不同 普通函数是直接调用,而构造函数需要使用new关键字来调用 构造函数的执行流程: 1、立刻创建一个新的对原创 2021-12-01 21:23:32 · 48 阅读 · 0 评论 -
JavaScript使用工厂方法创建对象
使用工厂方法创建对象通过该方法可以大批量的创建对象function createPerson(name, age, gender){// 创建一个新的对象var obj = new Object() // 向对象中添加属性 obj.name = name obj.age = age obj.gender = gender obj.sayName = function(){ alert(this.name) } // 将新的对象原创 2021-12-01 20:54:26 · 290 阅读 · 0 评论 -
JavaScript中的this
解析器在调用函数时每次都会向函数内部传递进一个隐含的参数这个隐含的参数就是this,this指向的是一个对象,这个对象我们称为函数执行的上下文对象,根据函数的调用方式的不同this会指向不同的对象1、以函数的形式调用时,this永远都是window2、以方法的形式调用时,this就是调用方法的对象...原创 2021-12-01 20:33:36 · 482 阅读 · 0 评论 -
JavaScript中全局作用域,函数作用域,变量提前声明
指一个变量的的作用的范围- 在JS中一共有两种作用域1、全局作用域- 直接编写在script标签中的JS代码,都在全局作用域中- 全局作用域在页面打开时创建,在页面关闭时销毁- 在全局作用域中有一个全局对象window,代表的是一个浏览器的窗口,它由浏览器中创建,我们可以直接使用- 在全局作用域中,创建的变量都会作为window对象的属性保存创建的函数都会作为window对象的方法保存- 全局作用域中的变量都是全局变量,在页面的任意的部分都可以访问 2、函数作用域原创 2021-12-01 19:56:23 · 113 阅读 · 0 评论 -
JavaScript中立即执行函数
当函数定义完,被立即调用、这种函数叫做立即执行函数立即执行函数往往只会执行一次结果:结果:原创 2021-11-28 21:49:30 · 144 阅读 · 0 评论 -
JavaScript函数的返回值
举例创建一个用来计算三个数之和的函数可以使用retrun 来设置函数的返回值语法:return 值return后的值将会作为函数的执行结果返回可以定一个变量接收该结果在函数中return后的语句都不会执行如果return语句后不跟任何值就相当于返回一个undefined如果函数中不写return,则也会返回undefinedfunction sum(a.b.c){var d = a+b+c;return d;}var result = sum(4,5,6);document.wr原创 2021-11-28 18:40:48 · 409 阅读 · 0 评论 -
JavaScript函数中的形参
举个例子定义一个可以求和的函数可以在函数中的括号()中来指定一个或者多个形参(形式参数)多个形参之间使用 , 隔开声明形参就相当于函数内部声明了变量但是并不赋值在调用函数时可以在括号()中指定实参(实际参数)实参将会赋值给函数中对应的形参输出结果为:1+2=3在调用函数时解析器是不会检查实参的类型所以要注意是否有可能会接受到非法的参数,如果有可能则需要对参数进行类型的检查调用函数时,解析器也不会检查实参的数量多余的实参不会被赋值如果实参的数量少于形参的数量,则没有对应的实参的原创 2021-11-28 18:19:49 · 1004 阅读 · 0 评论 -
JavaScript中的函数
1、函数是什么(function) - 函数也是对象 - 函数中可以封装一些功能(代码),在需要时可以执行这些功能 - 函数中可以保存一些代码,在需要的时候调用 - 使用typeof检查一个函数对象时,会返回一个function2、创建一个函数的对象,可以将代码以字符串的方式传递给构造函数封装到函数里面的代码不会立即执行,函数中的代码会在调用函数时执行调用构造函数语法:函数对象();当调用函数时,函数中封装的代码会按照顺序执行,原创 2021-11-28 16:43:23 · 254 阅读 · 0 评论 -
谈一谈对象字面量
什么叫对象字面量?其实对象字面量也是创建对象的一种方式使用对象字面量可以在创建对象是世界指定对象中的属性语法:{属性名:属性值,属性名:属性值} 对象字面量的属性名可以加引号也可以不加,建议不加 如果要使用一些特殊的名字则必须加引号 属性名和属性值是一组一组的名值对结构, 名和值之间使用:链接,多个名值对之间使用,隔开 如果一个属性之后没有其他属性了就不要写,了 ![在这里插入图片描述](https://img-blo原创 2021-11-28 15:48:47 · 171 阅读 · 0 评论 -
JavaScript中对象的基本操作
1、创建对象使用new关键字调用函数,是构造函数(constructor) 构造函数时专门用来创建对象的函数var obj = new Object(); 表示创建好了一个Object对象并赋值给变量obj先来console.log(obj);看一下创建好对象后输出的内容输出内容:再来看一下这个对象的数据类型console.log(typeof obj);输出内容:使用typeof检查一个obj对象时,会返回object创建好对象之后,就可以向对象中保存属性,也可以说原创 2021-11-26 22:21:21 · 173 阅读 · 0 评论