![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Javascript
学js为了后期的全栈,及爬虫的js解密
小生听雨园
Fly Higher
展开
-
JS进阶 十三——闭包
1.引入<button>测试1</button><button>测试2</button><button>测试3</button>不用闭包:for (var i = 0,length=btns.length; i < length; i++) { var btn = btns[i] //将btn所对应的下标保存在btn上 btn.index = i btn.onclick = functi原创 2021-02-15 21:06:38 · 164 阅读 · 0 评论 -
JS进阶 十二——作用域,作用域链及执行上下文
1.作用域1.1 理解就是一块"地盘", 一个代码段所在的区域它是静态的(相对于上下文对象), 在编写代码时就确定了1.2 分类全局作用域函数作用域没有块作用域(ES6有了)1.2 作用隔离变量,不同作用域下同名变量不会有冲突 var a = 10, b = 20 function fn(x) { var a = 100, c = 300; console.log('fn()', a, b, c, x) //100, 20, 300,原创 2021-02-15 20:24:11 · 136 阅读 · 0 评论 -
JS进阶 十一——执行上下文
1.代码分类全局代码函数(局部)代码2.全局执行上下文在执行全局代码前将window确定为全局执行上下文对全局数据进行预处理var定义的全局变量==>undefined, 添加为window的属性function声明的全局函数==>赋值(fun), 添加为window的方法this==>赋值(window)开始执行全局代码3.函数执行上下文在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象(虚拟的, 存在于栈中)对局部数据进行预处理原创 2021-02-15 18:37:38 · 90 阅读 · 0 评论 -
JS进阶 十——变量提升与函数提升
1.变量提升 * 通过var定义(声明)的变量, 在定义语句之前就可以访问到 * 值: undefined2.函数提升 * 通过function声明的函数, 在之前就可以直接调用 * 值: 函数定义(对象) console.log('-----') /* 面试题 : 输出 undefined */ var a = 3 function fn () { console.log(a) var a = 4 } fn() console.原创 2021-02-15 16:45:05 · 69 阅读 · 0 评论 -
JS进阶 九——面试题
抛出两个问题1.1 function A () { } A.prototype.n = 1 var b = new A() A.prototype = { n: 2, m: 3 } var c = new A() console.log(b.n, b.m, c.n, c.m)1.2 function F (){} Object.prototype.a = function(){ console.log('a()') } F原创 2021-02-15 15:01:21 · 181 阅读 · 0 评论 -
JS进阶 八——原型与原型链
原型与原型链1.函数的prototype属性&给原型对象添加属性2.显式原型与隐式原型3.原型链3.2. 构造函数/原型/实例对象的关系3.3图解3.3 instanceof4.原型链属性1.函数的prototype属性&给原型对象添加属性1. 函数的prototype属性(图) * 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象) * 原型对象中有一个属性constructor, 它指向函数对象2. 给原型对象添加属性(一般都是原创 2021-02-15 14:26:37 · 79 阅读 · 0 评论 -
JS进阶 七——this
1.抛出两个问题1.1this是什么? * 任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window * 所有函数内部都有一个变量this * 它的值是调用函数的当前对象1.2如何确定this的值? * test(): window * p.test(): p * new test(): 新创建的对象 * p.call(obj): obj<script type="text/javascript"> function Person(col原创 2021-02-10 19:40:13 · 89 阅读 · 0 评论 -
JS进阶六——IIFE
IIFE——Immediately-Invoked Function Expression作用:隐藏实现不会污染外部(全局)命名空间用它来编码js模块立即执行函数:表达:(function (){ console.log("**********);})();<script type="text/javascript"> (function () { //匿名函数自调用 var a = 3; console.log(a + 3); })()原创 2021-02-10 19:09:11 · 102 阅读 · 0 评论 -
JS进阶五——函数及回调函数
1.抛出几个问题1.1. 什么是函数? * 实现特定功能的n条语句的封装体 * 只有函数是可以执行的, 其它类型的数据不能执行1.2. 为什么要用函数? * 提高代码复用 * 便于阅读交流1.3. 如何定义函数? * 函数声明 * 表达式1.4. 如何调用(执行)函数? * test(): 直接调用 * obj.test(): 通过对象调用 * new test(): new调用 * test.call/apply(obj): 临时让test成为obj的方原创 2021-02-10 17:59:16 · 179 阅读 · 0 评论 -
JS进阶三——内存,数据,变量理解二
先抛出几个问题问题1: var b = xxx, b内存中到底保存的是什么? var a = 3 a = function () { } var b = 'abc' a = b b = {} a = b ANSWER --> * xxx是基本数据, 保存的就是这个数据 * xxx是对象, 保存的是对象的地址值 * xxx是一个变量, 保存的xxx的内存内容(可能是基本数据, 也可能是地址值)问题2:关于引用变量赋值问题?原创 2021-02-09 22:36:10 · 100 阅读 · 0 评论 -
JS进阶二——数据,变量,内存的理解
先抛出几个问题1. 什么是数据?2. 什么是内存?3. 什么是变量?4. 内存,数据, 变量三者之间的关系1.什么是数据?* 存储在内存中代表特定信息的'东西', 本质上是0111... * 数据的特点: 可传递, 可运算 * 一切皆数据 * 内存中所有操作的目标: 数据 * 算术运算 * 逻辑运算 * 赋值 * 运行函数什么是内存? * 内存条通电后产生的可储存数据的空间(临时的) * 内存产生和死亡: * 内存条(电路版)==原创 2021-02-09 21:57:33 · 169 阅读 · 0 评论 -
JS进阶 一:——数据类型回顾 undefined和null区别 初始赋值为null,结束赋值为null
undefined和null区别 初始赋值为null,结束赋值为null1.问题2.答案1.问题面试高频1. undefined与null的区别?2. 什么时候给变量赋值为null呢?3. 什么时候给变量赋值为null呢?2.答案1. undefined与null的区别? * undefined代表定义未赋值 * nulll定义并赋值了, 只是值为null2. 什么时候给变量赋值为null呢? * 初始赋值, 表明将要赋值为对象 * 结束前, 让对象成为垃圾对象(被原创 2021-02-07 20:22:53 · 525 阅读 · 0 评论 -
js——json
json1.json2.创建3. json转js对象4. js对象转json1.jsonJSON * - JS中的对象只有JS自己认识,其他的语言都不认识 * - JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别, * 并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互 * - JSON * - JavaScript Object Notation JS对象表示法 * - JSON和JS对象的格式一样,只原创 2021-01-25 00:17:54 · 113 阅读 · 0 评论 -
js类的操作,修改css,封装修改类常用函数
js类的操作,修改css1.弊端2.于是乎解决一下,也降低css与js耦合度3.封装3.1 addClass3.2 hasClass3.3 removeClass3.4 toggleClass1.弊端通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面* 这样的执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不太方便2.于是乎解决一下,也降低css与js耦合度修改box的class属性 * 我们可以通过修改元素的class属原创 2021-01-25 00:11:51 · 215 阅读 · 0 评论 -
轮播图
轮播图1.<注意>2.代码1.<注意>1. #outer要开启相对定位2.裁剪溢出的内容:overflow: hidden;3. #navDiv要开启绝对定位:position: absolute;4.#navDiv a:设置超链接浮动 float: left; 5.兼容IE8透明filter: alpha(opacity=50); 创建一个方法用来设置选中的a function setA(){ //判断当前索引是否是最原创 2021-01-25 00:03:35 · 105 阅读 · 0 评论 -
定时器控制div移动,封装动态常用函数
定时器控制div移动,创建一个可以执行简单动画的函数1.定义一个函数,用来获取指定元素的当前的样式2.创建一个可以执行简单动画的函数3.代码1.定义一个函数,用来获取指定元素的当前的样式 * 定义一个函数,用来获取指定元素的当前的样式 * 参数: * obj 要获取样式的元素 * name 要获取的样式名 */ function getStyle(obj , name){ if(window.getComputedStyle){原创 2021-01-24 23:54:46 · 178 阅读 · 0 评论 -
定时器延迟调用
1.延迟调用延时调用, * 延时调用一个函数不马上执行,而是隔一段时间以后在执行,而且只会执行一次 * * 延时调用和定时调用的区别,定时调用会执行多次,而延时调用只会执行一次 * * 延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己需要去选择2.开启延迟调用setTimeoutvar timer = setTimeout(function(){ console.log(num++); },3000);3.关闭延迟调用c原创 2021-01-24 23:46:43 · 422 阅读 · 0 评论 -
结合定时器使键盘控制div无延迟
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } &原创 2021-01-24 23:43:19 · 73 阅读 · 0 评论 -
js 定时器setInterval
定时器setInterval1.setInterval开启定时器2.关闭定时器3.小练习:自动切换图片1.setInterval开启定时器* setInterval() * - 定时调用 * - 可以将一个函数,每隔一段时间执行一次 * - 参数: * 1.回调函数,该函数会每隔一段时间被调用一次 * 2.每次调用间隔的时间,单位是毫秒 * * - 返回值: * 返回一个Number类型的数据 * 这个数字原创 2021-01-24 23:40:15 · 54454 阅读 · 0 评论 -
JS BOM Location
Location1.定义1.1 location1.2 assign()1.3 reload()1.4 replace()1.定义Location * - 该对象中封装了浏览器的地址栏的信息1.1 location如果直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)如果直接将location属性修改为一个完整的路径,或相对路径 * 则我们页面会自动跳转到该路径,并且会生成相应的历史记录location = "https://www.nxys.xyz";原创 2021-01-24 23:31:17 · 139 阅读 · 0 评论 -
js BOM -->history
historyHistory1.1 length1.2 back()1.3 forward()1.4 go()History History * - 对象可以用来操作浏览器向前或向后翻页 *1.1 length* length * - 属性,可以获取到当成访问的链接数量1.2 back()* back() * - 可以用来回退到上一个页面,作用和浏览器的回退按钮一样1.3 forward()* forward() * - 可以跳原创 2021-01-24 23:07:04 · 101 阅读 · 0 评论 -
js BOM
BOM概述BOM * - 浏览器对象模型 * - BOM可以使我们通过JS来操作浏览器 * - 在BOM中为我们提供了一组对象,用来完成对浏览器的操作1.1Window * - 代表的是整个浏览器的窗口,同时window也是网页中的全局对象1.2Navigator * - 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器Navigator * - 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器 *原创 2021-01-24 23:16:38 · 98 阅读 · 0 评论 -
键盘事件练习 ——控制div移动
控制div移动topic:小键盘方向键控制div移动思考一下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { width: 100px; height: 100px; background-color: #8A2BE2;原创 2021-01-23 16:06:39 · 145 阅读 · 0 评论 -
键盘事件
键盘事件1.键盘事件2.代码1.键盘事件键盘事件: * onkeydown * - 按键被按下 * - 对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发 * - 当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常快 * 这种设计是为了防止误操作的发生。 * onkeyup * - 按键被松开 * * 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是原创 2021-01-23 16:01:09 · 160 阅读 · 0 评论 -
鼠标滚轮事件
鼠标滚轮事件1.获取方法2.代码1.获取方法event.wheelDelta 可以获取鼠标滚轮滚动的方向 向上滚 120 向下滚 -120wheelDelta这个值我们不看大小,只看正负wheelDelta这个属性火狐中不支持在火狐中使用event.detail来获取滚动的方向 向上滚 -3 向下滚 3火狐使用addEventListener()方法绑定响应函数,取消默认行为时* 不能使用return false* 需要使用event来取消默认行为event.pre原创 2021-01-23 15:51:51 · 630 阅读 · 1 评论 -
鼠标拖拽
拖拽1.拖拽流程1.22.代码1.拖拽流程拖拽box1元素 * - 拖拽的流程 * 1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown * 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove * 3.当鼠标松开时,被拖拽元素固定在当前位置 onmouseup1.2相当于加了if判断,如果前面有就执行,没有就不执行。box1.setCapture && box1.setCapture();当我们拖拽一个网原创 2021-01-23 15:22:20 · 573 阅读 · 0 评论 -
DOM事件的绑定
事件绑定1.事件绑定1.1box.onclick = function(){};1.2addEventListener()1.3attachEvent()2.写一个兼容性好的绑定函数模板3.代码1.事件绑定1.1box.onclick = function(){};只能绑定一个,后面会覆盖前面1.2addEventListener()addEventListener() * - 通过这个方法也可以为元素绑定响应函数 * - 参数: * 1.事件的字符串,不要on原创 2021-01-23 14:51:17 · 90 阅读 · 2 评论 -
事件的委派——一个非常有用的东西(解决了新增元素也需要绑定的问题)
事件的委派1.定义2.解决的问题3.代码1.定义事件的委派* - 指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素* 从而通过祖先元素的响应函数来处理事件。* - 事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能2.解决的问题我们希望,只绑定一次事件,即可应用到多个的元素上,即使元素是后添加的我们可以尝试将其绑定给元素的共同的祖先元素 * 我们希望,只绑定一次事件,即可应用到多个的元素上,即使元素是后添加的原创 2021-01-23 13:23:42 · 108 阅读 · 4 评论 -
事件的冒泡
事件的冒泡1.定义(这个别跳过)2.代码(定义理解的好此处代码可以忽略)1.定义(这个别跳过)事件的冒泡(Bubble) * - 所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发 * - 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡2.代码(定义理解的好此处代码可以忽略)<!DOCTYPE html><html> <head> <meta charse原创 2021-01-23 12:52:47 · 95 阅读 · 0 评论 -
div跟随鼠标移动
div跟随鼠标移动1.知识点1.1 clientX和clientY1.21.3必须开启绝对定位2.代码1.知识点1.1 clientX和clientY clientX和clientY 用于获取鼠标在当前的可见窗口的坐标 div的偏移量,是相对于整个页面的 pageX和pageY可以获取鼠标相对于当前页面的坐标 但是这个两个属性在IE8中不支持,所以如果需要兼容IE8,则不要使用1.2 chrome认为浏览器的滚原创 2021-01-23 12:48:46 · 686 阅读 · 1 评论 -
DOM获取鼠标坐标,并显示
1.图片效果2.代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 300px; height: 300px; background-color: #FFFF00; margin: 10px; }原创 2021-01-20 22:44:28 · 336 阅读 · 0 评论 -
Dom 操作css
1. 读取 * 语法:元素.style.样式名 * * 通过style属性设置和读取的都是内联样式 * 无法读取样式表中的样式 2. 修改 * 通过JS修改元素的样式: * 语法:元素.style.样式名 = 样式值 * * 注意:如果CSS的样式名中含有-, * 这种名称在JS中是不合法的比如background-color * 需要将这种样式名修改为驼峰命名法,原创 2021-01-20 22:41:48 · 364 阅读 · 0 评论 -
Dom增删改练习2,写一个小的管理界面
1.见图/* * confirm()用于弹出一个带有确认和取消按钮的提示框 * 需要一个字符串作为参数,该字符串将会作为提示文字显示出来 * 如果用户点击确认则会返回true,如果点击取消则返回false *//* * 点击超链接以后,超链接会跳转页面,这个是超链接的默认行为, * 但是此时我们不希望出现默认行为,可以通过在响应函数的最后return false来取消默认行为 */2.全部代码<!DOCTYPE原创 2021-01-20 21:50:01 · 145 阅读 · 0 评论 -
实现一个DOM增删改的页面
1.见效果图1.1知识点1.1.1createElement()createElement()/* * document.createElement() * 可以用于创建一个元素节点对象, * 它需要一个标签名作为参数,将会根据该标签名创建元素节点对象, * 并将创建好的对象作为返回值返回 */ var li = document.createElement("li");1.1.2createTextNode()createTe原创 2021-01-17 22:06:27 · 106 阅读 · 0 评论 -
js DOM补充及 超强querySelector()
1.补充<script type="text/javascript"> //在document中有一个属性body,它保存的是body的引用 var body = document.body; //document.documentElement保存的是html根标签 var html = document.documentElement; //页面里的所有元素 var all = document.all; console.log(all[0]);原创 2021-01-17 21:55:16 · 529 阅读 · 0 评论 -
js DOM练习,做一个单选多选全选的form表单
看效果图注意其中可能出现的几个bug1.点击全选单选框后也应该全选,取消选择其余四个也应该取消选择2.点击全选多选框以后,正常情况下四个都选中,取消一个选中,多选框也应该取消选中3.点击全选按钮以后,全选多选框也应该选中4.点击全不选按钮以后,全选多选框也应该取消选择5.点击全选按钮以后,点击全不选,多选框应该发生变化2.上代码<!DOCTYPE html><html> <head> <meta charset="utf-8">原创 2021-01-17 21:47:21 · 503 阅读 · 0 评论 -
***.forEach is not a function
***.forEach is not a function缘起:在这里插入图片描述==原生js获取的DOM集合是一个类数组对象,不能直接利用数组的方法(例如:forEach,map等),需要进行转换为数组后,才能用数组的方法!==1.推荐几种转换成数组的方法1.1 Array.from()1.2 [...ci]1.3 Array.prototype.slice.call(ci)缘起: <div id="box"> <p>city</p> <ul i原创 2021-01-17 21:34:55 · 6721 阅读 · 0 评论 -
js DOM子节点
DOM元素节点各个方法各个方法 childNodes属性会获取包括文本节点在呢的所有节点,根据DOM标签标签间空白也会当成文本节点 firstChild可以获取到当前元素的第一个子节点,包括空白文本。 firstElementChild获取当前元素的第一个子元素,不支持IE8及以下的浏览器,如果需要兼容他们 尽量不要使用 previousSibling获取前一个兄弟节点,有可能获取到空白文本 previousElementSibling获取前一个兄弟元素,IE8及以下不原创 2021-01-17 21:12:43 · 454 阅读 · 0 评论 -
JS DOM练习
练习:做一个可以点击按钮切换图片的网页<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } #pic{ width: 500px; height: 400px; }原创 2021-01-15 19:18:25 · 317 阅读 · 0 评论 -
js DOM树
DOM树DOM,全称Document Object Model文档对象模型。 节点:Node ——构成HTML文档最基本的单元。 常用节点分为四类 一文档节点:整个HTML文档 一元素节点:HTML文档中的HTML标签 一属性节点:元素的属性 一文本节点:HTML标签中的文本内容 1. getElementById() 一通过id属性获取一个元素节点对象 2. getElementsByTagName() -通过标签名获取一组元素节点对原创 2021-01-15 19:14:23 · 171 阅读 · 0 评论