![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javaScript
文章平均质量分 59
Yhuanbo
这个作者很懒,什么都没留下…
展开
-
cookie、sessionStorage,localStorage区别
HTML5 Web 存储(localStorage和sessionStorage)本文链接:HTML5 Web 存储(localStorage和sessionStorage)_sleepwalker_1992的专栏-CSDN博客HTML5 Web 存储(webStorage)是本地存储,存储在客户端,包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的,通常以字符串存储。localStoragelocalStorage生命周期是永久,除非主动转载 2022-02-05 13:10:59 · 456 阅读 · 0 评论 -
浅谈JS重绘与回流
1、什么是重绘、回流重绘(repaint):当元素样式的改变不影响页面布局时,比如元素的颜色,浏览器将对元素进行的更新,称之为重绘。常见的重绘操作有:1,改变元素颜色2,改变元素背景色 ……回流(reflow):也叫做重排。当元素的尺寸或者位置发生了变化,就需要重新计算渲染树,这就是回流,比如元素的宽高、位置,浏览器会重新渲染页面,称为回流,又叫重排(layout)。回流是影响浏览器性能的关键因素。因为一个元素的回流,可能会导致了其所有子元素以及紧随其后的节点、或祖先节点元素,或部分转载 2022-01-23 11:45:14 · 580 阅读 · 0 评论 -
10 个你应该知道的强大的JavaScript代码片段
JavaScript 现在非常流行,尤其是在 Web 开发中。随着新的 ECMAScript 版本,JavaScript 语法有了很大的改进。因此,JavaScript语言现在具有许多强大且有趣的功能,我们可以作为开发人员在代码中使用它们。另一件好事是,如今大多数主要浏览器都对新的 JavaScript 功能提供了良好的支持。无论您是哪种类型的开发人员,至少具备 JavaScript 的基本知识都是一个很好的优势。如今,开发人员使用不同的代码片段来解决程序中的问题并创建他们需要的功能。无论他们使用哪种编转载 2022-01-22 13:38:52 · 250 阅读 · 0 评论 -
js防抖和节流 区别及实现方式
概念:函数防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。函数节流(throttle):高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。1、函数防抖(debounce)实现方式:每次触发事件时设置一个延迟调用方法,并且取消之前的延时调转载 2022-01-14 09:51:38 · 3484 阅读 · 0 评论 -
jsonp方法跨域的过程
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决。但到目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来跨域。而这就是本文将要讲述的内容。JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿转载 2022-01-07 09:38:55 · 530 阅读 · 0 评论 -
javascript中的事件
一、事件的概念JavaScript使我们有能力创建动态页面,网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。二、事件流事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件,而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。使用返回值改变HTML元素的默认行为:HTML元素大都包含了自己的默认行为,例如:超链接、提交按钮等。我们可以通过在绑定事件中加上"return false"来阻止它的默原创 2021-06-29 16:23:42 · 73 阅读 · 0 评论 -
js中的ajax
AJAX传统的web交换缺点:1.流量损失 2.浪费时间和带宽AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)概念: ajax使网页异步刷新,在不重新加载整个页面时,对网页的局部进行刷新。特点: 局部刷新;最大的特点:局部刷新ajax的优点:1.局部刷新;2.优化了浏览器与服务器之间的传输,减少了不必要的数据返回,减少了带宽占用;3.ajax引擎在客户端进行,承担部分服务器的工作,减少了服务器端的压力;ajax的缺转载 2021-06-20 12:09:59 · 136 阅读 · 0 评论 -
javascript正则表达式
一、作用测试字符串的某个模式。例如,可以对一个输入字符串进行测试(包含/位置/……)替换文本。可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字二、2 正则表达式语法一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。三原创 2021-06-18 20:04:50 · 63 阅读 · 1 评论 -
BOM(浏览器对象模型)
BOM1. 什么是BOM?BOM即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是windowBOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性BOM缺乏标准,javascript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部份2. BOM的构成window对象是浏览器的顶级对象,它具有双重角色1.它是js访问浏览器窗口的一个接口2.它是一个全局对象,定义在全局作用域中的变量,函数都会变成wind转载 2021-06-09 18:56:49 · 391 阅读 · 0 评论 -
JS中的事件冒泡和事件捕获
谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。1、冒泡事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是,就是当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了转载 2021-06-04 19:21:53 · 751 阅读 · 0 评论 -
DOM元素的方法
获取DOM元素getElementById(id) - 获取带有指定 id 的节点(元素)getElementsByTagName() - 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。getElementsByClassName() - 返回包含带有指定类名的所有元素的节点列表getElementsByname() - 返回带有指定name的所有元素的列表,一般用于表单元素的获取创建节点使用createElement创建元素节点,例如:p,div,a…使用cr原创 2021-05-26 19:24:45 · 325 阅读 · 0 评论 -
DOM节点操作
DOM节点在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。根据W3C标准,HTML主要有以下节点整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:节点父、子和同胞节点树中的节点彼此拥有层级关系。父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节原创 2021-05-20 19:12:45 · 61 阅读 · 0 评论 -
DOM操作属性和样式
属性操作属性:语法:object.属性名=属性值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload=function(){ var linkObj=document.getElementById("link");原创 2021-05-18 18:45:58 · 100 阅读 · 1 评论 -
数组去重的方法
1.将数组的每一个元素依次与其他元素做比较,发现重复元素,删除var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5];console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5, 5]function noRepeat1(arr) { for(var i = 0; i < arr.length-1; i++){ for(var j = i+1; j转载 2021-05-12 18:58:53 · 133 阅读 · 0 评论 -
js中数组的属性及常用方法
属性constructor返回对创建此对象的数组函数的引用。<script type="text/javascript">function employee(name,job,born){ this.name=name; this.job=job; this.born=born;}var bill=new employee("Bill Gates","Engineer",1985);document.write(bill.constructor);</scri原创 2021-05-10 19:16:22 · 320 阅读 · 0 评论 -
数组的创建方法及二维数组
数组所谓的数组就是说用变量名来保存一系列的值,一般都是相同的数据类型数组的创建方法方法一通过new关键字声明数组用数组索引的方式来给对应的下标赋值语法:数组名称[索引] 数组的索引从零开始var arr1=new Array();arr1[0]="a";arr1[1]="b";arr1[2]="c";document.write("arr1:" + arr1+"<br />"); //arr1:a,b,c方法二通过指定数组的长度来创建var arr2=ne原创 2021-05-08 19:14:36 · 679 阅读 · 0 评论 -
彻底理解js中的闭包
彻底理解js中的闭包闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,那么什么是闭包呢?它又有什么用呢?我们都知道,js的作用域分两种,全局和局部,基于我们所熟悉的作用域链相关知识,我们知道在js作用域环境中访问变量的权利是由内向外的,内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量,反之则不能,也就是说在外层作用域下无法获取内层作用域下的变量,同样在不同的函数作用域中也是不能相互访问彼此变量的,那么我们想在一个函数内部也有限权访问另一个函数内部的转载 2021-05-07 20:00:01 · 125 阅读 · 0 评论 -
用js写简单的点名器
点名器实现原理将所有名字都封装到一个数组中将数组下标通过随机函数随机产生定义定时器让函数每隔一段时间执行点击停止时,让定时器停止将选中的名字赋值给文本框html结构<form action="" name="form"> <input type="text" name="name1" value="张三丰"> <input type="text" name="name2" value="张无忌"> <input type="tex原创 2021-04-28 19:36:11 · 778 阅读 · 2 评论 -
js中的Math对象以及随机数的实际应用
Math对象在js中Math对象是用来解决一些数学问题的,这些对象不需要创建直接使用就行,下面是开发过程中几个比较常用的Math 方法。<script type="text/javascript"> console.log("abs:" + Math.abs(-19)); //绝对值 console.log("ceil:" + Math.ceil(3.1)) //上取整 4 不论小数点后面的数是几,都取离它上面最近的数 console.log("floor:" + M原创 2021-04-27 11:20:42 · 346 阅读 · 1 评论 -
javascript基础笔记
一、js在浏览器的输出方式alert 窗口弹出document.write 在页面输出console.log 在控制台输出innerHTML 修改文档内容innerHTML可以覆盖之前页面中输入的内容:js代码是写在script标签里面的,script标签写在页面中的任何位置都可以运行,但一般写在head标签或body标签里。Js代码可以写在标签的onclick属性,也可以写在a标签的href属性中例如:js引入外部文件:script标签一旦用于引入外部文件,里面就不能再编写原创 2020-07-20 15:01:04 · 90 阅读 · 0 评论 -
javascript数据类型
javascript数据类型数据类型指的是字面量的类型,js中一共有六种数据类型String 字符串Number 数值Boolean 布尔值Null 空值Undefined 未定义Object 对象其中String、Number、Boolean、Null、Undefined 是基本数据类型Object是引用数据类型1、String 字符串在js中字符串需要使用引号引起来,不加引号是变量使用双引号或单引号都可以,但不要混着用var str=“hello”;双引号里不能嵌套双原创 2020-07-20 15:25:12 · 63 阅读 · 0 评论 -
js强制类型转换
强制类型转换强制类型转换:指将一个数据类型转换成其他数据类型类型转换主要是指:将其他数据类型转换成String、Number、Boolean1、将其他数据类型转换成String方式一、调用被转换的数据类型的toString()方法语法:a.toString();该方法不会影响原变量,它会将转换的结果返回。Var a=a.toString();但是注意null和undefined没有toString()方法,如果调用它们的方法会报错方式二、使用String()函数,并将被转换的数据作为参数原创 2020-07-22 20:37:45 · 93 阅读 · 0 评论 -
js运算符
运算符运算符也叫操作符,通过运算符可以对一个或多个值进行运算并获取运算结果比如:typeof就是运算符,可以来获取一个值的类型它会将该值的类型以字符串的形式返回number string boolean undefined object算数运算符当对非number类型的值进行运算,会将值转换成number然后在运算任何值和NaN做运算都是NaN“+”可以对两个值进行加法运算,并将结果返回如果对两个字符串进行加法运算,则会做拼串将两个字符串拼接成一个字符串,并将结果返原创 2020-07-27 15:19:32 · 96 阅读 · 1 评论 -
js逻辑运算符
逻辑运算符Js中提供了三种逻辑运算符!非&&与|| 或!非!可以用来对一个值进行非运算所谓非运算就是对一个布尔值进行取反操作true变false false变true例如:var a=true;a=!a;console.log(a); 结果是false如果对一个值进行两次取反,它不会变化例如:var a=true;a=!!a;console.log(a); 结果还是true如果对非布尔值进行运算,则会先将其转化为布尔值然后再取反例原创 2020-08-03 15:34:55 · 309 阅读 · 0 评论 -
js赋值、关系、相等、条件运算符
赋值运算符=可以将符号右侧的值赋值给符号左侧的变量+=a += 5 等价于 a = a+5-=a -= 5 等价于 a = a-5*=a * = 5 等价于 a = a * 5/=a /= 5 等价于 a = a/5%= 取余数a %= 5 等价于 a = a%5关系运算符通过关系运算符可以比较两个值之间的大小关系如果关系成立它会返回true,不成立会返回false“>” 大于号判断符号左侧的值是否大于右侧的如果关系成立,返回true,否则返回false原创 2020-08-05 11:25:02 · 400 阅读 · 0 评论 -
js条件分支语句
条件分支语句条件分支语句也叫switch语句语法:switch(条件表达式){case(表达式):语句…break;case(表达式):语句…break;default:语句…break;}执行流程:switch…case…语句在执行时会依次将case后的表达式和switch后的 表达式进行全等比较;如果比较结果为true,则从当前case处开始执行当前case后面的所有代码。使用break可以结束switch语句如果比较结果为false,则继续向下比较。如果所有的原创 2020-08-08 19:15:03 · 241 阅读 · 0 评论 -
js之原型对象
原型对象我们所创建的每一个函数,解析器都会在函数中添加一个隐含的属性 prototype这个属性对应着一个对象,这个对象就是所谓的原型对象如果函数作为普通函数调用时prototype没有任何作用当函数以构造函数的形式调用时,它所创建的对象都会有一个隐含的属性,指向该构造函数的原型对象,我们可以通过__proto__来访问该属性原型对象就相当于一个公共区域,所有同一个类的实例都可以访问到这个原型对象我们可以将对象中共有的内容,统一设置到原原创 2020-08-30 11:52:36 · 152 阅读 · 0 评论 -
js之Date对象
Date对象在JS中使用Date来表示一个时间如果直接使用构造函数创建一个Date对象,则会封装为当前代码的执行时间getDate()获取当前对象是几日getDay()获取当前对象是周几,会返回0-6的值,0表示周日getMonth()获取当前对象的月份,会返回0-11的值,0表示1月getFullYear()获取当前对象的年份getTime()获取当前对象的时间戳时间戳,指的是从格林威治时间的1970年1月1日,0时0分0秒,到当前日期所花费的毫秒数(1秒=1原创 2020-11-29 14:43:40 · 115 阅读 · 1 评论 -
正则表达式的简介和语法
正则表达式正则表达式用于定义一些字符串的规则计算机可以根据正则表达式来检查一个字符串是否符合规则,或者将字符串中符合规则的内容提取出来语法:var 变量 = new RegExp(“正则表达式”,“匹配模式”)var reg = new RegExp(“a”,“i” ); //i 忽略大小写console.log(typeof reg); //Objectconsole.log(reg);使用typeof检查正则对象会返回objectv原创 2020-12-22 19:04:59 · 175 阅读 · 1 评论 -
正则表达式的语法
量词通过量词可以设置一个内容出现的次数var reg = /a{3}/{n} 正好出现n次//通过量词可以设置一个内容出现的次数//{n} 正好出现n次var reg = /a{3}/;console.log(reg.test(“aaabc”));量词只对它前边的内容起作用,要想整体起作用,必须加上括号//创建一个正则表达式检查一个字符串中是否含有abababvar reg = /(ab){3}/;console.log(reg.test(“ababab”));{m原创 2020-12-27 14:50:39 · 184 阅读 · 0 评论 -
call、apply、bind三者的用法和区别
1. callcall、apply、bind都是改变this指向的方法fn.call当前实例(函数fn)通过原型链的查找机制,找到function.prototype上的call方法,function call(){[native code]}fn.call()把找到的call方法执行当call方法执行的时候,内部处理了一些事情1.首先把要操作的函数中的this关键字变为call方法第一个传递的实参2.把call方法第二个及之后的实参获取到3.把要操作的函数执行,并且把第转载 2021-04-25 19:27:31 · 121 阅读 · 0 评论 -
js中构造函数的创建
构造函数的创建方法一<script type="text/javascript"> //1函 2 实 3 属 4 方 5 调 function Play(){ } //实例化对象 var p = new Play(); //属性 p.width=300; p.height=200; p.num=4; p.autotime=3; //方法 p.autoplay=function(){ al原创 2021-04-23 19:14:14 · 1144 阅读 · 0 评论 -
js函数中的作用域
js函数的中作用域基本划分为两种 1 全局变量 2局部局部变量一 全局变量出现原因1在函数外声明的2没有使用 var二局部变量函数内声明的三使用说明1:遵循就近原则;2:局部变量不适用var 直接赋值的会升级为全局变量,污染作用域;3:局部变量使用时,遵循变量提升原则,即var 变量名会提升到函数顶部,值不会提升;4:函数调用后直接消失,执行后面的代码;5:js不存在块状区域;6:函数命名不能与变量相同,不能出现相同名字的函数;7:推荐优先使用局部变量;原因:全局变量的生命周期和转载 2021-04-22 19:53:16 · 333 阅读 · 0 评论 -
js之arguments详解
平时编写js代码对arguments接触的可能不是很多,但是了解arguments却是很有必要的。例如,需要编写一个函数求传入的若干个数字(不能用数组显示传入)的和,这时候就需要用到arguments了。要实现这个函数我们先来了解下arguments:具体可参考http://www.w3school.com.cn/js/pro_js_functions_arguments_object.asp在Javascript中arguments是一个类似Array的存在,但它不能等同于Array。ar转载 2021-04-21 18:55:28 · 147 阅读 · 0 评论 -
js函数返回值及回调函数
函数返回值------return有返回值的叫函数,无返回值的叫过程返回值的类型由return后面的值决定的,返回值可以是任意数据类型return后没有值,会返回undefined函数不写返回值也会返回undefined函数中return就代表函数执行完毕,后面的语句不会再执行<script> function sum(num1, num2) { return num1 + num2; } var num=sum(11,23); alert(num);<原创 2021-04-19 20:01:30 · 7444 阅读 · 2 评论 -
JS获取页面中元素的Value值或文本值的方法
首先需要遍历获取表单页面中的页面元素1.可以通过 getElementsByTagName 方法来获取getElementsByTagName("标签名称") //代表查询返回所有该标签的元素,因此他是个集合document.getElementsByTagName("标签") //即查询文档中所有的该标签元素alert(document.getElementsByTagName("div").length) //返回查询结果的数量,这里结果为 1获取到元素集合以后,可以通过循环对元素进行遍历转载 2021-04-16 19:05:48 · 4317 阅读 · 1 评论 -
js中的循环结构------------while
javaScript中的while循环一、 while…do循环循环会在指定条件为真时循环执行代码块。先判断,后执行while (条件){需要执行的代码}执行流程:先对条件表达式进行求值判断,如果值为true,则执行循环体,循环体执行完毕以后,继续对表达式进行判断如果为true,则继续执行循环体,以此类推如果值为false,则终止循环<script>var n=1;var i=1;while(n>=1 && n<=100){if(n原创 2021-04-14 19:37:38 · 144 阅读 · 1 评论 -
js循环语句中的for循环
循环语句有两种:分为for循环和for…in循环一、 for循环指定次数的循环语法结构for(初始化; 条件; 增量){ //此处是循环体语句; }for ( var i=0; i<5; i++) { x="The number is " + i +"<br>"; }循环代码块一定的次数for循环里依然可以使用if…else语句:for(var a = 1; a < 10; a = a + 1) {if(a == 3 || a ==原创 2021-04-14 08:25:21 · 233 阅读 · 2 评论