JS
丨Q ,Q丨
这个作者很懒,什么都没留下…
展开
-
箭头函数与this
文章目录标准函中的this箭头函数中的this使用bind()函数将普通函数的行为变为箭头函数标准函中的this标准函数中(相对于箭头函数),this是方法调用的上下文对象。箭头函数中的this箭头函数中的this会保留定义该函数时的上下文。//创建两个对象 分别模拟定义时的上下文和调用时的上下文let defineContext = {name : "defineContext"};let invokeContext = {name : "invokeContext"}let st原创 2020-12-11 16:59:05 · 255 阅读 · 0 评论 -
JSON
JSON(JavaScript Object Notation)文章目录JSON(JavaScript Object Notation)JSON语法1. 普通对象特殊要求举例2. 数组对象举例JSON字符串和JavaScript对象的转换1. 对象转JSON2. JSON转对象eval()函数简介JSON(JavaScript Object Notation),JavaScript对象表示法,是***用于数据交换的特殊字符串***。JSON是表示对象的字符串,可以转换为JavaScript的对象,也可原创 2020-09-07 15:43:34 · 142 阅读 · 0 评论 -
延迟调用
延迟调用window对象提供了两种基础的异步调用方式:定时调用setInterval()和延迟调用setTimeout()关于定时调用的内容点击查看延迟调用和定时调用的区别对于定时调用,如果不调用clearInterval()关闭,每隔一定的时间,回调函数都会被调用一次;延迟调用和定时调用的方法很类似,同样使用了window对象的方法,setTimeout(function, milliseconds)。调用这个方法之后,在延迟milliseconds毫秒后,调用回调函数fucntion。***与原创 2020-09-07 14:55:50 · 566 阅读 · 0 评论 -
定时调用
文章目录定时调用举例:显示当前包含秒数的时间停止定时调用:`clearInterval(idOfSetInterval:number) `定时调用BOM中的window对象,提供了一个方法setInterval()。他有两个参数:function,milliseconds。该方法可以使回调函数function每间隔milliseconds毫秒被调用一次。举例:显示当前包含秒数的时间显示时间时,只需要通过指定元素element.innerHTML来修改显示的内容即可。由于每1秒都需要修改一次,所以原创 2020-09-07 14:14:01 · 327 阅读 · 0 评论 -
BOM简介
BOM简介BOM(Browser Object Model),是对浏览器的属性和行为的抽象。通过BOM提供的各种对象,可以获取浏览器的一些状态值以及对浏览器进行操作。window, window.screen, window.location, window.history, window.navigator等都是BOM。浏览器信息:window.navigatorwindow.navigator对象包含浏览器的一系列信息。这些信息基本没用,所以开发中很少用到这个对象。历史记录:window.hi原创 2020-09-05 17:52:10 · 351 阅读 · 0 评论 -
正则表达式作为参数的字符串方法
文章目录正则表达式作为参数的字符串方法1. split()2. search()3. match()不使用全局匹配修饰符使用全局匹配修饰符4. replace()正则表达式作为参数的字符串方法1. split()分割字符串,分隔符可以是一个字符串,也可以是一个正则表达式。var str = "axbxcxd";console.log(str.split(/x/));默认情况下,该方法***全局匹配***注意上面的例子,正则表达式/x/,并没有使用修饰符g修饰,但方法的结果显示,该方法默认全原创 2020-09-05 17:14:57 · 1096 阅读 · 0 评论 -
正则表达式的修饰符及构造函数
文章目录正则表达式的修饰符及构造函数1. 修饰符修饰符介绍:i修饰符介绍:g修饰符介绍:m2. 构造函数`RegExp(正则表达式,修饰符)`使用构造函数创建的优点:参数可以使用变量正则表达式的修饰符及构造函数1. 修饰符正则表达式还可以跟上修饰符(/exp/修饰符)限制正则表达式的行为。介绍三个常用的修饰符: 修饰符 作用 i 忽略大小写 g 全局匹配原创 2020-09-05 16:48:59 · 546 阅读 · 0 评论 -
事件冒泡应用:事件代理
事件冒泡应用:事件代理文章目录事件冒泡应用:事件代理1. 什么是事件代理2. 事件代理的实现给祖先元素(一般使用父元素)绑定回调函数(响应函数)在祖先元素的响应函数中,获取事件的触发者:`Event.target`避免父元素本身触发事件1. 什么是事件代理事件代理,应用了事件冒泡的特性,将一个元素的事件处理,交给祖先元素进行处理。即,自己本身不处理事件,而是通过冒泡的特性,触发祖先元素的相同事件,调用祖先元素的回调函数。2. 事件代理的实现回看之前为了总结知识,做的一个小练习*点击查看→示例代码:原创 2020-08-29 17:19:27 · 152 阅读 · 0 评论 -
阻止事件传播:stopPropagation()方法和cancelBubble
阻止事件传播:stopPropagation()方法和cancelBubble1. cancelBubble属性如果事件对象的cancelBubble属性被设置为true, 则会阻止事件继续向上冒泡(也可以阻止事件的捕获)。举例:<html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> win原创 2020-08-29 02:01:47 · 1200 阅读 · 0 评论 -
事件的传播:捕获、冒泡
文章目录事件的传播:捕获、冒泡1. 事件的冒泡2. 事件的捕获3. 总结:事件触发并执行回调函数的完整描述4. 模拟实验:事件的传播事件的传播:捕获、冒泡请看这样一个问题,有下面的页面:两个元素都绑定了onclick单击事件,由于子元素在父元素内,所以单击子元素时父元素也被单击。这时,问题就来了,这两个元素的onclick事件哪个先触发?1. 事件的冒泡现在,通过一个实验来解答一下上面的问题。<html> <head> <meta charset="utf原创 2020-08-29 01:19:46 · 175 阅读 · 0 评论 -
事件对象
文章目录事件对象1. 简介2. 获取事件对象事件响应函数的参数(IE8及以下版本不支持)window.event(IE8及以下版本)3. 事件对象的属性事件的属性举例事件的方法举例(记录在事件对象的原型对象`__proto__`中)举例取消默认动作:`cancelable`属性和`preventDefault()`方法顺便一提:取消默认动作的另一种方法,`return false`事件对象1. 简介如果给一个元素对象的某事件(例如,onclick)绑定了一个响应函数(回调函数),当这个事件触发时,浏览原创 2020-08-20 02:44:04 · 476 阅读 · 0 评论 -
通过DOM对象获取/修改CSS样式 & class
文章目录通过DOM对象获取/修改CSS样式1.获取 & 修改内联样式2. 获取当前样式IE8及以下不支持,其它支持:`window.getComputedStyle(element)`仅IE浏览器支持:`element.currentStyle.XXX`封装一个通用的方法总结通过DOM对象获取/修改CSS样式1.获取 & 修改内联样式对于一个元素结点来说,内联样式style就是元素结点的一个属性节点。可以通过element.style.XXX来获取这个元素结点的内联样式;同时,也可以原创 2020-08-18 15:33:37 · 7945 阅读 · 0 评论 -
innerHTML踩坑
innerHTML踩坑请看下面的例子:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>再来一个</button> </body> <script type="text/javascript">原创 2020-08-18 00:58:59 · 427 阅读 · 0 评论 -
innerHTML踩坑
innerHTML踩坑请看下面的例子:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>再来一个</button> </body> <script type="text/javascript">原创 2020-08-18 00:16:56 · 351 阅读 · 0 评论 -
DOM对象的增、删操作——通过element.innerHTML
文章目录DOM对象的增、删操作——通过element.innerHTMLinnerHTML简介通过innerHTML实现DOM对象的增、删操作通过innerHTML修改的好处DOM对象的增、删操作——通过element.innerHTMLinnerHTML简介DOM对象的innerHTML属性,表示这个DOM对象对应的元素(标签)内部的内容。有如下结构: <body> <div> <p> hello world </p>原创 2020-08-17 23:50:02 · 716 阅读 · 0 评论 -
实例:选电影票(通过DOM对象的方法实现)
文章目录实例:选电影票(通过DOM对象的方法实现)效果展示1. 初始状态2. 选择3. 取消分析1. 布局2. 电影票及电影票生成3. 根据生成的电影票,生成可视化的座位4. 点击座位时,触发的操作5. 取消“选中”6. 渲染实例:选电影票(通过DOM对象的方法实现)效果展示1. 初始状态浅灰色的表示可以选择的座位;红色的表示票已经售出,不可选择。2. 选择点击要选择的座位,会计算出票价,并显示选择的座位对应的票。3. 取消通过点击绿色的座位(或者下方的票),实现取消票的选择。分析1原创 2020-08-17 23:25:00 · 1183 阅读 · 1 评论 -
DOM对象的增、删操作——通过DOM对象的方法
文章目录DOM对象的增、删操作——通过DOM对象的方法1. document.createElement(TagName:String)2. element.appendChild(node)3. document.createTextNode(content:String)4. element.removeChild(node)DOM对象的增、删操作——通过DOM对象的方法这里主要介绍4个方法:document.createElement(TagName:String)document.crea原创 2020-08-17 01:03:01 · 411 阅读 · 0 评论 -
document.querySelector(),document.querySelectorAll()
document.querySelector(),document.querySelectorAll()除了使用DOM的对象结点之间的关系选择一个元素结点外,还可以通过CSS的选择器选择元素结点。document对象中,有两个方法querySelector()和querySelectorAll()。这两个方法的参数相同,都是一个CSS选择器表达式(字符串形式),通过这个选择器表达式,选择元素。举例: <script type="text/javascript"> window.原创 2020-08-14 19:29:20 · 3984 阅读 · 0 评论 -
获得/修改一个元素节点的内容
获得/修改一个元素节点的内容用到的两个属性:innerHTML和innerText。先来看一下两个属性的区别:可以看到,innerHTML是内部所有的HTML代码,而将innerHTML中的标签去除,得到innerText。修改内容也很简单:object.innerHTML = newString;object.innerText = newString;...原创 2019-09-22 15:51:07 · 404 阅读 · 0 评论 -
DOM查询 ----- 获取节点
DOM查询 ----- 获取节点对于DOM的模型树来说,知道其中的某一个节点,就可以找到和它有关系的所有结点(也就是说,整个模型树中的所有节点),所以,要获取其中的一个结点元素,可以通过文档节点,或者通过其他节点。一.通过document文档节点获得元素节点可以看到,我们说的是获取元素节点,因为只有元素节点才可以设置id和name,并且只有元素节点才有tagName,也就是标签名(...原创 2019-09-22 15:26:30 · 164 阅读 · 0 评论 -
事件
事件事件就是与浏览器或页面发生的一些交互,不如所点击一个页面种的按钮。一.事件句柄对于每一个事件,都有一个事件句柄来表示。这里引用一下w3school的文档 ------事件句柄对于JS中的元素对象,我们可以给它设置一个事件句柄,并给这个事件绑定一个响应函数,这样,当事件被触发,则句柄绑定的响应函数就会被调用。二.绑定响应函数举个例子:单机一个区域,并显示当前时间。单...原创 2019-09-22 14:56:22 · 120 阅读 · 0 评论 -
JS的this引用(指针)
JS的this引用(指针)this的指向分为两种情况:一般的调用、new调用构造函数一.一般的调用调用函数/方法时,解析器会隐式的将调用函数的对象的引用传递给函数/方法。“谁调用,指向谁”。JS中,所有的函数都是方法,如果一个函数没有在对象中声明,那它就是window的成员。调用函数(其实就是window的方法),this指向window 调用方法,this指向调用这个方法的...原创 2019-07-05 00:02:38 · 196 阅读 · 0 评论 -
创建JS对象的方式
创建JS对象的方式1.工厂函数(方法) function creatObject(pro){ var obj = new Object(); obj.pro = pro; return obj; } var obj = creatObject("hello world"...原创 2019-07-04 23:39:12 · 91 阅读 · 0 评论 -
JS对象
JS对象一.对象分类1.内建对象ES标准中定义的对象,例如Object、Number、Boolean等等。2.宿主对象JS运行环境提供的对象,由浏览器创建。例如:BOM(浏览器对象模型)、DOM(文档对象模型)3.自定义对象由开发人员定义的对象二.基本的对象操作1.创建一个Object对象var obj = new Object();2.向对象添加属...原创 2019-07-04 23:23:38 · 123 阅读 · 0 评论 -
JS声明提前
JS声明提前JS中的声明提前主要有两个,变量的声明提前,以及函数的声明提前。一.声明提前 f(); var a = 1; f(); function f(){ console.log(a); }分析原因:使用var声明的变量,以及通过function声明的函数,解析器在解...原创 2019-07-04 22:26:23 · 118 阅读 · 0 评论 -
JS变量作用域
JS变量作用域先明确一点:讨论作用域,讨论的是非对象成员的变量。一.全局作用域1.创建具有全局作用域的变量在函数以及自定义对象之外声明的变量,具有全局作用域2.具有全局作用域的变量的特性1.浏览器会创建一个window对象,window的所有属性,都具有全局作用域2.反过来,具有全局作用域的变量,都是window的属性 <script type="te...原创 2019-07-04 22:10:09 · 158 阅读 · 0 评论 -
JS基本数据类型之间的转换
JS基本数据类型之间的转换基本数据类型1. number2. string3. boolean4. undefined5. null一.转换为string1.调用toString()方法因为null和undefined没有toString()方法,所以,不能通过这样的方式进行转换。var a = 123;var b = a.toString();console....原创 2019-06-17 02:46:23 · 687 阅读 · 0 评论 -
JS数据类型
JS数据类型JS的数据类型是动态的。首先,进行分类讨论,分类的依据是根据存储方式的不同。一.基本数据类型1.undefined当声明一个变量,但并未赋值,这个变量的类型就为undefined;或者给变量附一个undefinedvar a;console.log(typeof a); //输出undefined字面量只有一个,undefined2.number...原创 2019-06-17 01:58:37 · 100 阅读 · 0 评论 -
JS运算符
JS运算符所有语言的运算符大同小异,这里只说不同点。一.算术运算符与字符串做加法,非字符串会转换为字符串,然后进行拼串操作。如果运算时不存在字符串,则转换为Number进行运算。任何值与NaN做算术运算结果都为NaN。+(正号)对于非数字,先转换为数字。二.逻辑运算符JS的逻辑运算符运算时,遵循短路运算。JS的逻辑表达式运算后的结果:运算时,转换为布尔值,运...原创 2019-06-20 00:09:07 · 133 阅读 · 0 评论 -
JS原型对象
JS原型对象一.通过一个问题引入原型对象先看一个例子: function Student(name, age){ this.name = name; this.age = age; this.sayHello = function(){ console.log("He...原创 2019-07-06 01:29:12 · 128 阅读 · 0 评论 -
区别基本类型和内建对象
区别基本类型和内建对象一.从数据类型进行分类内建对象是对象,对象属于引用类型(对象存储在堆内存,栈内存存储地址) 基本类型就是基本类型(栈内存存储值)二.打包基本类型//声明一个基本类型var a = 123;console.log(typeof a);//number//将基本类型打包a = new Number(a);console.log(typeof a...原创 2019-08-21 14:20:49 · 135 阅读 · 0 评论 -
JS_目录
DOM(Document Object Model)文档对象模型,以及文档的加载原创 2019-09-22 14:17:23 · 195 阅读 · 0 评论 -
DOM
DOM(Document Object Model)当页面被加载时,浏览器会创建文档对象模型。也就是说,浏览器加载网页时(文档),对于网页文档的所有信息,都会创建对象(也就是宿主对象),然后将这些对象通过模型树组织起来。下面看一张图,浏览器在加载的文档时,会生成对应的对象模型。对于图中的节点,接下来进行介绍。一.节点(对象)通过上面的那个图,可以看到,总共有4种节点。...原创 2019-09-22 14:16:51 · 99 阅读 · 0 评论 -
arguments
arguments一.概述通过之前的学习,明白了在对象调用方法时,会将对象的引用隐式的传递给方法的this;除此之外,还对将一个arguments对象隐式的传递给对象。二.arguments里有什么function func(a, b, c){ console.log(arguments);}func();func(1, 2, 3);可以看到,argu...原创 2019-08-22 21:30:24 · 164 阅读 · 0 评论 -
JS函数对象的方法
JS函数对象的方法一.概述JS中,函数是一种特殊的对象,既然是对象,那么,函数对象也想其他对象一样,可以有自己的方法,这里,主要介绍两个方法。call()方法和apply()方法二.call()方法function Student(name, age){ this.name = name; this.age = age;}Student.prototype....原创 2019-08-22 21:13:59 · 2636 阅读 · 0 评论 -
JS使用forEach()方法遍历数组
使用forEach()方法遍历数组1.参数forEach()方法有一个参数,是一个回调函数的引用,每访问一个元素,调用一次回调函数2.回调函数的参数第一个参数,表示当前遍历的元素 第二个参数,表示当前遍历的元素的索引(下标) 第三个参数,表示当前正在遍历的数组3.举例var array = [5, 3, 2, 8, 5, 6, 4, 7];array.forEach(...原创 2019-08-22 12:39:28 · 2336 阅读 · 0 评论 -
JS数组对象的方法
JS数组对象的方法1.concat() 连接数组的方法var array1 = [1];var array2 = [2];var array3 = [3];var array = array1.concat(array2);console.log(array1);console.log(array);var array = array.concat(array2, arr...原创 2019-08-22 12:31:30 · 140 阅读 · 0 评论 -
JS数组
JS数组一.简述1.数组是内置对象的一种JS中有三大类对象,内置对象、宿主对象以及自定义对象。数组就是内置对象的一种——Array。2.索引(下标)从0开始像C一样,数组的下标从0开始3.数组中可以放任意类型的数据类似于java中的Object[]数组二.数组的创建方式1.通过构造函数创建数组a.无参调用//无参调用var a = new Array...原创 2019-08-22 01:25:19 · 120 阅读 · 0 评论 -
JS正则表达式(简单语法篇)
JS正则表达式(简单语法篇)正则表达式表示字符串的规则,用来检测一个字符串是否符合某个规则(正则表达式),或者从一个字符串中查找符合正则表达式的子串。先说一下,正则表达式的字面量放在一对“//”中1.字符var reg1 = /a/;console.log(reg1.test("!!!!!a!!!!!"));var reg2 = /abc/;console.log(reg...原创 2019-08-26 00:36:19 · 126 阅读 · 0 评论 -
JS函数
JS函数与其他的语言有一些不同,JS中,函数是特殊的对象。JS中的函数,是封装了功能的特殊对象。实际再仔细想想也差不多,反正栈中存储的都是一个引用。一.创建函数对象1.通过构造函数创建函数对象JS中,函数是特殊的对象,可以通过构造函数创建对象var func = new Function("console.log('hello world');");func();2....原创 2019-06-19 23:50:42 · 120 阅读 · 0 评论