![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web前端JavaScript
文章平均质量分 84
杏黄的三叶草
对于爱情,只字不提
展开
-
JavaScript中数组一次写入多个数据
let array=[1,2,3,4,5,6]; let y=[123,34,45]; array.push(...y); console.log(array);原创 2020-12-26 21:30:07 · 2719 阅读 · 0 评论 -
JavaScript中正则表达式详解
正则表达式的介绍 * 正则表达式也叫规则表达式[Regular Expression],是按照一定的规则组成的一个表达式,主要作用是用来匹配字符串的 * 正则表达式可以在大多数编程语言中使用 * 正则表达式的组成:由元字符或者限定符组成的一个式子 * . 表示的是:除换行符(\n)之外的任意单个字符====>"word23" * [] 表示的是:范围,...原创 2020-12-26 14:57:49 · 727 阅读 · 0 评论 -
JavaScript中unicode编码与中文之间的转化
JavaScript中把中文转化为unicode编码escape();JavaScript中把unicode编码转化为中文原创 2020-03-18 20:43:08 · 265 阅读 · 0 评论 -
JavaScript之浅拷贝,深拷贝,以及遍历DOM树详解
浅拷贝浅拷贝:相当于复制,把一个对象中的所有的内容,复制一份给另一个对象;或者说,把一个对象的地址给另一个对象他们地址的指向相同,两个对象之间有共同的属性和方法,都可以使用;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>...原创 2020-03-11 14:46:24 · 305 阅读 · 0 评论 -
JavaScript中函数详解
函数作为参数使用function animal(fn) { console.log("可是谁又真的关心谁"); fn(); } function dog() { console.log("若是爱已不可为"); } animal(dog); animal(function () { consol...原创 2020-03-10 22:30:37 · 125 阅读 · 0 评论 -
函数中的成员
函数中有一个name属性====》函数的名字,该属性只能查看,不能修改function person() { console.log(person.name); console.log("只到最后,一无所有,才无所畏惧"); } person();function person() { console.log(person.na...原创 2020-02-25 23:42:30 · 358 阅读 · 0 评论 -
JavaScript中call,apply,bind方法的区别
相同点在JavaScript中,这三个方法都是用来改变this的指向的传入的第一个参数都是用来改变this的指向,将this指向该对象都可以用后续参数传参既可以被函数调用,也可以被方法调用不同点传入参数的方法不一样apply的使用方法:函数名字.apply(对象,[参数1,参数2…]);对象.方法名字.apply(对象,[参数1,参数2…]);call的使用方...原创 2020-02-25 20:55:48 · 77 阅读 · 0 评论 -
JavaScript中apply和call方法的使用
* apply和call方法的作用:用来改变this的指向 * apply和call方法中如果没有传入参数,或者传入的是null,那么调用该方法的函数对象中this的指向为window(默认) * apply和call都可以让函数或者方法来调用,传入的参数和函数调用的写法不同,但是效果是一样的 * 如果传入的不是null,而是其他对象,那么就将this指向了该传入的...原创 2020-02-23 21:17:46 · 176 阅读 · 0 评论 -
JavaScript中的函数详解
函数中this的指向 * 普通函数中this的指向----->window * 构造函数中this的指向----->实例对象 * 对象.方法中this的指向----->当前的实例对象 * 定时器方法中this的指向----->window * 原型对象中方法的指向----->当前的实例对象<!DOCTYPE html&...原创 2020-02-23 12:21:18 · 75 阅读 · 0 评论 -
JavaScript中的继承
继承首先继承是一种关系,是类(class)与类之间的关系;js中没有类,但是可以通过构造函数来模拟类;然后通过原型来实现继承;继承是为了实现数据共享,js中的继承也是为了实现数据共享。原型的作用之一:实现数据共享,节省内存空间原型的作用之二:为了实现继承继承是一种关系:父类与子类之间的关系js中是通过改变原型的指向来实现继承的<!DOCTYPE html><ht...原创 2020-02-23 00:25:09 · 102 阅读 · 0 评论 -
原型链相关知识
原型链:实例对象和原型对象之间的关系是通过__proto__原型来联系起来的,这个关系就是原型链原型链以及原型之间的指向是否可以改变?实例对象的原型__proto__指向的是该对象所在构造函数的原型对象prototype构造函数的原型对象prototype指向如果改变了,实例对象的原型的指向也会发生改变原型最终指向了哪里<!DOCTYPE html><htm...原创 2020-02-21 22:14:51 · 92 阅读 · 0 评论 -
如何把局部变量变为全局变量
如何把局部变量变为全局变量把局部变量给window就可以了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script>...原创 2020-02-20 20:54:06 · 5937 阅读 · 0 评论 -
原型的书写方法,以及方法之间的访问
利用原型来共享数据不需要共享的数据写在构造函数中,需要共享的数据写在原型中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><...原创 2020-02-19 15:04:13 · 249 阅读 · 0 评论 -
JavaScript高级之原型的引入
原型的引入在使用构造函数创建对象时,有一个自身存在的浪费内存的问题,因此引入了原型这个概念<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>...原创 2020-02-18 22:36:25 · 135 阅读 · 0 评论 -
关于JavaScript中||和&&的用法
||逻辑或和&&逻辑与感觉JavaScript中关于逻辑与和逻辑或的语法十分的神奇。经常在对象上使用在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为true在js的语法运算中,当计算到哪一步可以得出最终结果时,就返回哪一个变量或者值。比如this.Height =height || ‘200’;意是如果height存...原创 2020-02-14 16:44:32 · 200 阅读 · 0 评论 -
BOM中的定时器setInterval()和setTimeout()详解
定时器 /* * 定时器: * window.setInterval(参数1,参数2); * 参数1:函数 * 参数2:时间---毫秒---1000毫秒--1秒 * 返回值就是定时器的id值 * 执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数..... * 返回值就是定时器的id值 * 停止定时器:...原创 2020-02-14 11:53:42 · 421 阅读 · 0 评论 -
BOM中window下的对象以及方法(location对象,history对象,navigator对象)以及加载事件
加载事件 /* * 浏览器中有个顶级对象:window * 页面中顶级对象:document * top是window的另一种表示方法 * 页面中的所有内容都是浏览器的----->页面中的所有内容都是window * 页面加载事件: * 只有这个页面加载完毕,这个事件才会触发(页面中的所有内容,包括文本,属性,标签以及外部引入文件) ...原创 2020-02-12 20:12:53 · 259 阅读 · 0 评论 -
DOM中的事件详解(事件的绑定和解绑,事件冒泡以及事件的三阶段)
为元素绑定事件的方法/** * 根据id属性的值,返回对应的标签元素 * @param id id属性的值,string类型的 * @returns {HTMLElement} 元素对象 */function my$(id) { return document.getElementById(id);}/**兼容代码 * 设置任意标签中的文本内容 * @param el...原创 2020-02-12 14:36:46 · 204 阅读 · 0 评论 -
元素创建的三种方式详解
用js模拟搜索框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> input { color: gray; ...原创 2020-02-11 13:39:37 · 568 阅读 · 0 评论 -
DOM中的节点详解
/*总结: *文档:document *元素:页面中所有的标签(元素-----element,标签----元素---对象) *结点:页面中所有的内容(标签,属性,文本[文字,换行,空格,回车])[node] *根元素:html标签 *节点的属性:(可以使用标签[元素].出来,可以使用属性节点.出来,文本节点.点出来) *nodeType:节点的类型-...原创 2020-02-11 11:08:20 · 173 阅读 · 0 评论 -
自定义属性的设置,获取和移除
本身html标签没有这个属性,自己(程序员)添加的,----自定义属性—为了存储一些数据设置自定义属性:setAttribute(“属性的名字”,“属性的值”);获取自定义属性的值:getAttribute(“属性的名字”)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...原创 2020-12-26 14:57:09 · 2533 阅读 · 0 评论 -
innerText,textContent的兼容代码以及和innerHTML之间的区别,
设置标签中的文本内容,如果使用innerText属性,那么谷歌,火狐,IE8都支持设置标签中的文本内容,如果使用textContext属性,那么谷歌,火狐支持,IE8不支持如果这个属性在浏览器中不支持,那么这个属性的类型是undefined判断这个属性的类型是不是undefined,就知道浏览器是否支持typeof一般是检测的是基本数据类型,instanceof主要检测的是引用类型!/*...原创 2020-02-10 13:12:52 · 193 阅读 · 0 评论 -
DOM获取属性的一些方法(部分)[body,title,html]
<!--2.通过name属性值获取元素--><input type="button" value="按钮" id="btn"><input type="text" value="再见,你好" name="name1"><input type="text" value="再见,你好" name="name2"><input type="t...原创 2020-02-09 18:21:56 · 725 阅读 · 0 评论 -
用DOM实现显示和隐藏二维码
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Title</title> <style> .nodeSmall { width: 50px; ...原创 2020-02-09 16:12:34 · 234 阅读 · 0 评论 -
DOM的基本操作(五)
先引入一个js文件/** * 根据id属性的值,返回对应的标签元素 * @param id id属性的值,string类型的 * @returns {HTMLElement} 元素对象 */function my$(id) { return document.getElementById(id);}<!--1.点击按钮禁用文本款--><input ty...原创 2020-02-09 15:58:33 · 110 阅读 · 0 评论 -
DOM自学第一天总结
JavaScript分三个部分1.ECMAScript标准------js的基础语法2.DOM:Document Object Model 文档对象模型3.BOM:浏览器对象模型DOM的作用:操作页面元素DOM树:把HTML页面或者xml文件看成是一个文档,文档就是一个对象,这个文档中的所有的标签都是元素,元素又可以看成是对象,再加上他们之间嵌套的关系,组成的这种层次结构,模拟成的树形结...原创 2020-02-09 13:11:24 · 122 阅读 · 0 评论 -
DOM的基本操作(四)
先引入一个JavaScript文件/** * 根据id属性的值,返回对应的标签元素 * @param id id属性的值,string类型的 * @returns {HTMLElement} 元素对象 */function my$(id) { return document.getElementById(id);}<!--1.点击按钮选择菜单--><i...原创 2020-02-08 21:31:05 · 77 阅读 · 0 评论 -
DOM的基本操作(三)
<!--<!–1.点击每个图片弹出对话框–>--><img src="../image/1.jpg" alt=""/><img src="../image/2.jpg" alt=""/><img src="../image/3.jpg" alt=""/><script&...原创 2020-02-08 21:26:14 · 111 阅读 · 0 评论 -
DOM的基本操作(二)
总结1.凡是成对的标签,设置中间文本内容的时候,都是使用innerText这个属性2.document.getElementsByTagName("标签的名字");返回的是一个伪数组,里面存储的是标签的名字;无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组3.在某个元素的事件中,自己的事件中的this就是当前的这个元素对象4.在表单标签中,如果属性和...原创 2020-02-08 21:16:23 · 259 阅读 · 0 评论 -
Web API介绍以及DOM树详解
API的概念API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。1.任何开发语言都有自己的API2.API的特征输入与输出(I/O)3.API的使用方法(console.log())Web API的概念浏览器提供...原创 2020-02-08 20:51:18 · 400 阅读 · 0 评论 -
DOM的基本操作(一)
事件的过程/**点击操作---->事件,有触发,有响应,有事件源*按钮经过点击,弹出对话框*按钮---->事件源*点击---->事件名字*经过点击---->触发*弹出对话框---->响应* */基本操作的书写方法方法一<!--第一个版本--><!--HTML代码,点击按钮弹出对话框,对话框:alert()====>js的...原创 2020-02-08 20:49:33 · 2481 阅读 · 0 评论 -
基本包装类型
1.普通变量不能直接调用属性或者方法2.对象可以直接调用属性和方法3.基本包装类型:本身是是基本类型,但是在执行代码的过程中,该类型的变量调用了属性或者是方法,那么这个变量就不再是基本类型了,而是基本包装类型;这个变量也不是普通的变量了,而是基本包装类型对象 ...原创 2020-02-07 16:52:05 · 86 阅读 · 0 评论 -
内置对象(Math对象,Date对象,Array对象,String对象)
内置对象js中的三种对象:1.内置对象-----js系统自带的对象2.自定义对象-----自己定义的构造函数创建的对象3.浏览器对象---BOM中内置对象: Math Date String Array Object验证是不是对象的方式:console.log(Array instanceof Object);MathMDN----JavaScr...原创 2020-02-07 14:17:19 · 219 阅读 · 0 评论 -
JavaScript对象的创建以及使用
创建对象的三种方式1.调用系统的构造函数创建对象var 变量名=new Object();Object是系统的构造函数。Array也是var obj=new Object(); //对象有特征---属性和行为---方法 //添加属性-----如何添加属性? 对象.名字=值; obj.name="温室"; obj.age="23"; //添加方法--...原创 2020-02-05 19:22:28 · 147 阅读 · 0 评论 -
JavaScript作用域以及预解析详解
作用域:变量可以起作用的范围全局变量:声明的变量是使用var声明的,那么这个变量就是全局变量,全局变量可以在页面的任何位置使用除了函数以外,其他任何位置定义的变量都是全局变量...原创 2020-02-05 10:35:10 · 122 阅读 · 0 评论 -
JavaScript之函数(匿名函数和函数表达式)详解以及arguments对象的使用
什么是函数把一段相对独立的具有特定功能的代码块封装起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用函数的作用:代码的重用函数的定义1.函数声明function 函数名(){ 函数体;}函数声明的时候,函数体并不会执行,只要当函数被调用的时候才会执行。函数的调用函数名();函数体只有在调用的时候才会执行,可以多次调用。function ...原创 2020-02-04 23:31:13 · 881 阅读 · 0 评论 -
JavaScript数组详解(冒泡排序)
数组的基础知识数组:一组有序的数据数组的作用:一次性存储多个数据数组的定义: 1.通过构造函数的方式创建数组 var 数组名=new Array(); var number=new Array(); 数组的名字如果直接输出,那么直接就可以把数组中的数据显示出来;如果没有数据就看不到数据 var 数组名=new Array(长度); 如果数组中没有数据,但是有长度---...原创 2020-02-04 13:42:28 · 238 阅读 · 0 评论 -
JavaScript代码调试以及布尔类型的隐式转换
提示用户请输入年龄---- var age=prompt("请您输入您的年龄");//弹框---并且有输入,输入的内容在age变量中 console.log(age);//最终的结果是字符串的类型 如果想要输入的是一个整数,用一个类型转换var age=parseInt(prompt("请您输入您的年龄")); * 三元表达式 * 运算符号: ...原创 2020-02-04 10:08:59 · 163 阅读 · 0 评论 -
JavaScript的基础知识详解
什么是变量变量是计算机内存中存储数据的标识符,根据变量名可以获取到内存中存储的数据为什么使用变量使用变量可以方便的获取或者修改内存中的数据变量的使用变量的声明:var number;变量的初始化:var number=12;同时声明多个变量并赋值:var a=2,b=3;JavaScript基本的代码规范1.js中变量的声明都用var2.js中每一行代码结束都应该有...原创 2020-02-03 18:06:03 · 300 阅读 · 0 评论 -
JavaScript的认识与学习
个人建议,敲代码的指法window下常用的一些快捷键JavaScript介绍1.Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。JavaScript与Java名称上...原创 2020-02-02 23:06:32 · 128 阅读 · 0 评论