![](https://img-blog.csdnimg.cn/20200817163916942.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
js
js基础
Codingwithlife
对人真诚,对事热忱,codeing...
展开
-
js事件流
捕获 目标 冒泡首先是事件捕获:当鼠标点击或触发dom事件时,被触发的这个dom元素称为事件源,浏览器会从根节点到事件源(从外到内)进行事件传播;目标:在目标节点上触发;事件冒泡:事件源->根节点(由内到外)进行事件传播。事件代理利用事件冒泡的机制,把里层需要的事件绑定到了外层,在父元素上做子元素节点上的事件处理。可以减少dom操作和事件注册的次数,从而降低内存使用。...原创 2020-10-31 17:33:08 · 119 阅读 · 0 评论 -
JS中构造函数、实例对象和原型对象三者之间的关系
今天在看检测对象 私有属性时,有这样一个题let arr=new Array();arr.a=1;arr._proto_.b=2;arr.hasOwnProperty("a") //truearr.hasOwnProperty("b") //false这个题出现了_proto_,我就想起来自己原型链,尤其是构造函数、实例对象和原型对象三者之间的关系不是很懂,就写下这篇文章。我们首先要知道:一个需要共享并且通过实例对象调用的方法,是在构造函数的原型对象中的。(实例对象原型__pro原创 2020-09-27 18:17:12 · 300 阅读 · 0 评论 -
new的实现原理
目录1.new的四个步骤2.new的实现过程3.例子 1.new的四个步骤创建一个空对象→这个新对象继承原函数的原型→更改this指向,为对象设置属性→返回新对象1.创建一个空对象varobj={}2.这个新对象继承原构造函数的原型obj._proto_=Constructor.prototype3.更改this指向,为对象设置属性letresult=Constructor.apply(...原创 2020-09-27 17:40:14 · 2450 阅读 · 0 评论 -
很简单的判断JavaScript数据类型方法
代码:function type(data) { let value = /\[object (\w+)]/.exec( Object.prototype.toString.call(data) ); return value ? value[1].toLowerCase() : '';}执行结果:解释:(1)/\[object (\w+)]/.exec正则表达式的匹配,其中前中括号[:表示中括号表达式的开始,属于特殊字符,要匹配...原创 2020-09-04 10:46:31 · 163 阅读 · 1 评论 -
js基础知识篇(2)---函数的使用(加es6箭头函数)
函数,是一种封装。就是将一些语句,封装到函数里面。通过调用的形式,执行这些语句。函数的使用,有两个步骤,第一步,函数的定义:基本语法:function 函数名字(形参){函数体;}函数名字的命名规定,和变量的命名规定一样。只能是字母、数字、下划线、美元符号,不能以数字开头。后面有一对(),里面是放参数用的。第二步,函数的调用:函数如果不调用,等于白写。基本语法:函数名字(实参);函数根据使用时的需要主要分为以下三种:1.无参数无返回值:仅实现功能,没有...原创 2020-07-12 14:24:28 · 219 阅读 · 2 评论 -
es6 新增let 、const与块级作用域
一、块级作用域(1) 什么是块级作用域(2)为什么需要块级作用域二、let与const(1)let与const特性(2)几种声明变量方法的区别三、扩展--顶层对象的属性变化四、练习原创 2020-08-18 13:18:54 · 246 阅读 · 0 评论 -
js基础面试考点:null和undefined
null表示"没有对象",即该处不应该有值。undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。null表示"没有对象",即该处不应该有值。典型用法是:(1) 作为函数的参数,表示该函数的参数不是对象。(2) 作为对象原型链的终点。Object.getPrototypeOf(Object.prototype)// nullundefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:(1)变量被声明了,但没有赋值时,就等原创 2020-08-18 11:40:18 · 448 阅读 · 0 评论 -
深度理解this和改变this指向
this指向(this指针对象)https://www.cnblogs.com/pssp/p/5216085.htmlthis的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象。 在全局中this指向的是window(在JS中没有global这个全局对象,而JS的全局对象是window); 在函数中this指向的是这个函数执行所操作的当前对象。this在函...原创 2020-08-17 20:17:53 · 291 阅读 · 0 评论 -
面试题:输入一个url地址到最终页面渲染完成发生了什么的思考
1、DNS解析:将域名地址解析为IP地址2、TCP连接:TCP三次握手3、发送请求4、接收响应5、渲染页面6、断开连接:TCP四次挥手(服务器先关闭,浏览器后关闭)原创 2020-08-10 18:50:12 · 345 阅读 · 0 评论 -
使用节点添加实现表格查询和添加
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> select{ width: ...原创 2020-08-17 15:16:21 · 162 阅读 · 0 评论 -
js动态生成表格案例(使用事件委托)
目录1 案例效果2 案例思路3 案例源码1 案例效果2 案例思路第一步:静态页面布局 <input type="text" id="row" placeholder="请输入行数"> <input type="text" id="col" placeholder="请输入列数"> <input type="button" id="btn" value="生成"> <table b...原创 2020-08-17 12:08:51 · 567 阅读 · 0 评论 -
事件监听器具体例子理解
1 传统事件绑定的缺陷2 事件监听器3 事件冒泡与事件捕获原创 2020-08-17 10:59:57 · 368 阅读 · 0 评论 -
事件委托
当用事件委托的时候,根本就不需要去遍历元素的子节点,只需要给父级元素添加事件就好了,其他的都可以在js里面执行,这样可以大大的减少dom操作。原创 2020-08-17 09:26:54 · 148 阅读 · 0 评论 -
js实现拖拽
1、实际效果2、知识准备3、主体思路4、具体实现..原创 2020-08-16 22:59:10 · 77 阅读 · 0 评论 -
js函数调用时括号分析
1.函数调用时多个括号情况分析2.JavaScript 函数调用时带括号和不带括号的区别原创 2020-08-14 15:19:13 · 906 阅读 · 0 评论 -
值传递与引用传递题目解析
function Person(name,age,salary){ this.name=name, this.age=age, this.salary=salary; } function f1(person){ //参数调用 var person=p person.name="ls", person=new Person("aa...原创 2020-08-10 11:15:25 · 153 阅读 · 0 评论 -
使用js写一个功能基本完善的计算器能够实现正确的加减乘除,实现退格和清零。
使用js写一个功能基本完善的计算器能够实现正确的加减乘除,实现退格和清零。原创 2020-08-08 14:23:17 · 2544 阅读 · 1 评论 -
js中逻辑&&和||
在运算过程中,首先js会将 && 和|| 两边的值转转成Boolean 类型,然后再算值,转换成boolean 的规则 是:对象、非零整数、非空字符串返回true,其它为false;下面是我自己的一些总结。逻辑与&& (遇到为假的项就返回该假项的值;全是真值返回后面的那一个真项的值)逻辑与和逻辑或一样,都需要把前后两项进行Boolean转换再比较 如果第一项的值为true时,则执行后面一项的运算,返回的是第二项执行运算后的值 如果第一项的值为fal...原创 2020-08-07 10:45:14 · 446 阅读 · 0 评论 -
创建和删除子元素节点
1、demo效果2、demo功能在input中输入内容,获取到输入内容,将获取到的输入内容作为li元素节点内容,将li元素作为子节点插入到div中。 将添加到div中的子节点逐次删除 将添加的子节点一次性删除3、demo总结(1)将添加到div中的子节点逐次删除时,需要先判断子节点是否已经删除完,如果div中已经不存在子节点,继续删除就会报错。这里用if语句结合div[0].hasChildNodes()方法进行判断。这里可以正序删除,也可以逆序删除。分别是div[0].fir..原创 2020-08-06 12:52:32 · 296 阅读 · 0 评论 -
立即执行函数
形式:(function([形参列表]){ 函数体; [return [<表达式>];] })([实参列表]);//w3c标准(function([形参列表]){ 函数体; [return [<表达式>];] }([实参列表]));第一种写法清晰。上面的函数叫立即执行函数表达式(I...原创 2020-08-04 11:55:30 · 300 阅读 · 0 评论 -
原生js做一个简单的仿幻灯片放映
效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="原创 2020-08-04 10:38:42 · 265 阅读 · 0 评论 -
js严格模式
用了严格模式,代码的变化:1.全局变量必须用var声明变量2.this无法指向全局对象3.函数内重名属性(形参名字不能相同)4.arguments不允许动态修改,在严格模式下,argument保证了它的本质功能(arguments只存储在实际调用函数时实际传入的参数)原创 2020-08-03 18:56:14 · 122 阅读 · 0 评论 -
js基础---取消冒泡和阻止默认事件
1、取消冒泡(1)冒泡解除(2)封装一个stopBubble函数,阻止冒泡2、阻止默认事件(1)默认事件阻止(2)封装阻止默认事件的函数 cancelHandler();原创 2020-08-03 18:55:31 · 1093 阅读 · 0 评论 -
js事件绑定解除、事件处理模型
1、事件重要吗?2、如何绑定事件处理函数?3、解除事件绑定?4、事件处理模型(冒泡、捕获)原创 2020-08-03 18:17:01 · 228 阅读 · 0 评论 -
封装常用的数学对象
封装数学对象,包括封装一个求最大最小值对象,生成随机数对象,有限次数内猜数字。原创 2020-08-02 21:02:12 · 226 阅读 · 0 评论 -
js基础---构造函数理解
因为我们一次只能创建一个对象,里面很多属性和方法都是相同的,我们只能复制。1.为什么要用构造函数创建对象?2.怎么样创建?3.构造函数与对象的区别?原创 2020-08-02 20:35:03 · 2164 阅读 · 0 评论 -
变量/属性、函数/方法区别
(1)变量与属性:相同:都是用来存储数据不同:变量:单独声明并赋值,使用时直接用变量名,单独存在属性:在对象里面的,不需要声明,使用时用 对象名.属性名 var name="Alice"; console.log(name);//Alice var person={ name:"Alice", } console.log(person.name);//Alice(2)函数与方法相同:都是实现某种功能,做每件事不同:..原创 2020-08-02 15:53:19 · 426 阅读 · 0 评论 -
js基础----函数的属性和方法(详细)
函数内部属性1.函数内部属性1.1 arguments1.2 this2.函数的属性和方法原创 2020-08-02 13:54:56 · 1400 阅读 · 0 评论 -
js基础--值类型和引用类型传递方式及匹配规则
(1)关于实参和形参数量不匹配时的匹配规则(2)关于函数的形参传递方式:(3)值类型特点(4)引用类型特点:原创 2020-08-02 13:53:59 · 173 阅读 · 0 评论 -
js判断是不是数组类型的两种方式?
(1) instanceof:只能用来判断对象和函数的类型,返回值是布尔类型,不能用来判断字符串和数字等。"arr"instanceof Array 判断是不是数组,其中"arr"表示要判断的数组名字 var arr1=[1,2,3,4,5,6]; var arr2=(1,2,3,4,5); console.log(arr1 instanceof Array);//true console.log(arr2 instanceof Array);//fal...原创 2020-08-01 23:19:13 · 894 阅读 · 0 评论 -
使用函数数组翻转
规律newArr[newArr.length]=arr[i]// 新数组下标:newarr.length 0,1,2,3,4 //原数组倒序的值: arr[i] 5,4,3,2,1function rever(arr){ var newArr=[]; for(var i=arr.length-1;i>=0;i--){ newArr[newArr.length]=arr[i]; } return newArr;}...原创 2020-08-01 20:59:58 · 375 阅读 · 0 评论 -
递归学习理解
1、 在每一次调用自己时,必须(在某种意义上)更接近于解;因此这句话可以这样理解:函数每一次调用自己时,就越接近于我们期望它完成的任务的终点。2、必须有一个终止处理或计算的出口。这句话的意思是:必须要有一个标准的标志,让函数结束调用函数自身。注意:一定要保证有一个终止处理或计算的出口。否则很容易演变为死循环,从而造成内存溢出。原创 2020-08-01 20:11:40 · 177 阅读 · 0 评论 -
封装函数-查找节点元素
<body> <div> <b></b> abc <span></span> <p></p> <strong> <span> <i></i> </span> </strong>.原创 2020-08-01 20:10:12 · 247 阅读 · 0 评论 -
JS基础知识篇-DOM操作总结
DOM-Document Object Model 文档对象模型第一部分:Dom获取元素第二部分:DOM属性设置与获取第三部分:事件(鼠标事件、键盘事件、表单事件)原创 2020-07-30 14:10:12 · 586 阅读 · 0 评论 -
js原型
1、什么是原型?//Person.prototype={}--原型//原型是共有祖先,是该构造函数构造出的对象的共有祖先,原型的属性和方法可以被继承,原型也是对象Person.prototype.name="hi"; function Person(){}var person =new Person();console.log(person.name);//输出hi如果里面构造函数和原型都有相同的属性,对象会先找自己的。如//Person.prototype={}--原型//.原创 2020-07-29 20:38:37 · 77 阅读 · 0 评论 -
js数组去重操作总结
思路1.遍历数组,用indexOf()该方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回-1。整体思路:新建一个数组result,遍历原数组,当arr[i]不存在于新数组中就将其push进新数组,得到的新数组就是去重后的数组。 var arr=[1,3,1,1,2,4,4,8]; function unique(){ for(i=0;i<arr.length;i++){ ...原创 2020-07-29 19:47:49 · 193 阅读 · 0 评论 -
js封装一个typeof类判断数据类型
function type(target){ var ret=typeof(target); var flag={ "[object Array]":"array", "[object Object]":"object", "[object Number]":"number-object", "[object Boolean]":"boolean-object", ...原创 2020-07-29 18:17:34 · 141 阅读 · 0 评论 -
js类数组用法以及类数组转数组的方法
类数组基本形态,属性要为索引(数字)属性,必须有length属性(最重要),最好加上push。使用起来和数组一样,(可以使用数组的方法,但是使用前必须先在类数组中定义),也可以当成对象使用。存储数据能力更强。 //类数组基本形态,属性要为索引(数字)属性,必须有length属性(最重要),最好加上push //使用起来和数组一样, var obj={ "0":"a", "1":"b", "2":"c", name:原创 2020-07-29 16:18:00 · 448 阅读 · 0 评论 -
js使用for循环打印各种图形、乘法表
1.打印上三角 // 打印上三角 var str=""; for(var i=1;i<=8;i++){//外循环i控制行数,循环8次 打印8行 for(var j=1;j<=i;j++){//内循环控制每行星星的数量 str=str+"★"; } str=str+"\n";//每行打印完换行 } console.log(s原创 2020-07-28 16:40:39 · 1265 阅读 · 0 评论 -
js基础——js中数组方法总结篇
数组的属性和方法属性:length属性:获取数组的长度。 var arr=["apple","red",12345,true,789]; console.log(arr.length);//数组长度为5方法:push()向数组中添加数组到数组最后。pop() 删除数组最后一个元素,每次只能删除一个。unshift() 向数组头部添加数据。shift() 删除数组第一元素。 var arr=["apple","red",12345,true,789]...原创 2020-07-27 19:17:44 · 293 阅读 · 0 评论