wzg0817的博客

观看更佳：— 传送门 —scrollHeight：获取对象的滚动高度 — 传送门scrollLeft：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 — 传送门scrollTop：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 — 传送门scrollWidth：获取对象的滚动宽度 — 传送门offsetHeight：获取对象相对与版面或由父坐标offsetParent属性指定的父坐标的高度 —传送门offsetLeft：获取对象相对于版面或由off.

一定要使用分号的情况分号不只是语句结尾使用，在某些语法中，具有分隔表达式或语句的作用：for 中的表达式之间：for(var i=0;i<10;i++)同一行使用多个表达式：// example 1var i=0; i++// example 2case 'foo': dosomething(); break以 [ ( 开头的行，这是一种特殊的风格，用来防止解析器或者压缩工具误认为某行和上面几行在一起解析，造成代码执行结果错误，还有 IIFE（立即执行函数表达式）这种

访问元素的样式通过JS修改元素的样式：  语法：元素.style.样式名=样式值 (样式值必须是字符串样式)  注意：如果css的样式汇总含有 - ，  这种名称在JS中是不合法的,比如background-color  需要将这种样式的命名修改为驼峰命名法去掉 - ，  然后将 - 后的字母大写。box.style.backgroundColor = "yellow"box.style.width = "100px"我们通过style属性设置的样式都是内联样式，而内联样式有较高的优

纯js之代码雨特效????????html代码：????<canvas id="code_rain_canvas" width="1440" height="900"></canvas>js 代码：???? window.onload = function() { //获取画布对象 var canvas = document.getElementById("code_rain_canvas");

es6之扩展运算符 (…) 简称三个点对象的扩展运算符理解对象的扩展运算符其实没有那么难，只要记住一句话就可以轻松掌握它????对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }上面的代码就相当于let bar = { a: 1, b: 2 };let baz = Object.assign({}, bar); // { a:

文章目录es6之 Object.assign()基本用法注意事项常见应用es6之 Object.assign()基本用法Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(

我们先看一下JQuery的AJAX的使用。jQuery.ajax(url,[settings])参数：url:一个用来包含发送请求的URL字符串。data [Object,String]类型：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 “&foo=b

**定时器对队列的工作方式：**当特定时间过去后将代码插人。注意，给队列添加代码并不意味着对它立刻执行，而只能表示它会尽快执行。设定一个150ms后执行的定时器不代表到了150ms代码就立刻执行，它表示代码会在150ms后被加入到队列中。如果在这个时间点上，队列中没有其他东西，那么这段代码就会被执行，表面上看上去好像代码就在精确指定的时间点上执行了。其他情况下，代码可能明显地等待更长时间才执行。重复定时器：这种重复定时器的规则有两个问题: **(1)、 某些间隔会被跳过; (2) 、多个定时器的代码执

我们在开发中有时候会不经意的修改了别人的代码，可能会造成严重的后果，于是ES5定义了防篡改对象。但是要注意，一旦把对象定义为防篡改对象，就无法撤销了。不可扩展对象默认情况下，所有对象都是可以扩展的。也就是说，任何时候都可以向对象中添加属性和方法。比如： var person = { name: "阿清" } person.age = 14; console.log(person);//{name: "阿清", age: 14}

函数绑定：在特定的 this 环境中，以指定参数调用另一个函数。常常与回调函数和事件处理程序一起使用一遍在将函数作为变量传递的同时保留代码执行环境。 var handler = { message: "Event handled", handleClick: function(event) { alert(this.message); } }; var bt

我们想看两个例子： var name = "阿清", age = 18; var obj = { name: "阿广", objAge: this.age, myFun: function() { console.log(this.name + "年龄是" + this.age); } }

JavaScript内置的类型检测机制并非完全可靠。比如：var isArray = value instanceof Array;以上代码要返回true,value必须是一个数组，而且还必须与Array构造函数在同个全局作用域中。(别忘了，Array是window的属性。)如果value是在另个frame中定义的数组，那么以上代码就会返回false。解决方法： 众所周知，在任何值上调用Object原生的toString()方法，都会返回一个[obj ect NativeConstructorNam

构造函数其实就是一个使用new操作符调用的函数。当使用new调用时，构造函数内用到的this对象会指向新创建的对象实例，如下面的例子所示: function Person(name, age, job) { this.name = name; this.age = age; this.job = job; } var person = new

在实际开发中，我们编写的大多数JavaScript代码包含大量的 if…else语句或者 try… catch 语句来做功能检测。举一个简单的例子：事件的绑定，我们会首先想到下列的代码 var addHandler= function(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, f

所有现代浏览器都内建了供读取和操作 XML 的 XML 解析器。解析器把 XML 转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象。JavaScript 访问的 XML DOM 对象。解析 XML 文档 if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); }

为了让元素可拖动，需要使用 HTML5 draggable 属性。链接和图片默认是可拖动的，不需要 draggable 属性在拖放的过程中会触发以下事件：在拖动目标上触发事件 (源元素):ondragstart - 用户开始拖动元素时触发ondrag - 元素正在拖动时触发ondragend - 用户完成元素拖动后触发释放目标时触发的事件:ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件ondragover - 当某被拖动的对象在另一对象容器

文章目录表单基础知识1、提交表单2、重置表单3、表单字段文本框脚本1、选择文本2、过滤输入4、HTML5 约束验证API选择框脚本1、添加选项2、移除选项3、移动和重排选项表单基础知识在JavaScript中，表单对应的是HTMLFormElement 类型，它继承了HTMLElement 。acceptCharset:服务器能够处理的字符集;等价于HTML中的accept -charset特性。action:接受请求的URL;等价于HTML中的action特性。elements:表单中所有控件

文章目录什么是事件事件流1、事件冒泡2、事件捕获3、DOM事件流事件处理程序1、HTML事件处理程序2、DOM0 级事件处理程序3、DOM2 级事件处理程序4、IE事件处理程序5、跨浏览器事件处理程序事件对象1、DOM中的事件对象2、IE中的事件对象事件类型1、UI事件2、 焦点事件3、鼠标与滚轮事件什么是事件事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间。JavaScript与HTML是交互是通过事件来实现的。事件流事件流描述的是从页面接受事件的顺序。1、事件冒泡事件开始时由最具.

遍历“DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型: NodeIterator和TreeWalker。这两个类型能够基于给定的起点对DOM结构执行深度优先( depth-first )的遍历操作。DOM遍历是深度优先的DOM结构遍历，也就是说，移动的方向至少有两个(取决于使用的遍历类型)。遍历以给定节点为根，不可能向上超出DOM树的根节点。任何节点都可以作为遍历的根节点。如果假设元素为根节点，那么遍历的第一步 就是访问<p>元素，然后再访问同为<body

选择符API1、querySlector()方法querySlector()方法接受一个CSS选择器，返回与该模式匹配的第一个元素。通过Document类型调用querySlector()方法时，会在文档元素的范围内查找匹配的元素。而通过Element类型调用querySlector()方法时，只会在该元素的范围内查找匹配的元素。 //取得body元素 var body = document.querySelector("body");

动态脚本创建动态脚本有两种方式。1、引入外部文件<script type="text/javascript" src="aqing.js" ></script>2、直接插入JavaScript代码 function loadScript(url) { var script = document.createElement("script"); script.type = "text/ja

Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。一、文档子节点1、在document中有一个属性body，它保存的是body的引用（比通过childNodes列表访问的更快，更直接）  Var body = document.body;2、Doucument

DOM简介：通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。HTML DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被结构化为对象树：对象的 HTML DOM 树通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：JavaScript 能改变页面中的所有 HTML 元素JavaScript 能改变页面中的所有 HTML 属性Jav

BOM简介---------（BOM详细总结）JavaScript的实现包括以下3个部分：1）核心（ECMAScript）：描述了JS的语法和基本对象。2）文档对象模型 （DOM）：处理网页内容的方法和接口3）浏览器对象模型（BOM）：与浏览器交互的方法和接口ECMAScript扩展知识：① ECMAScript是一个标准，JS只是它的一个实现，其他实现包括ActionScript。② “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力……”，即ECMAScript不与具体的

闭包的几种概念理解：能够访问另一个函数作用域的变量的函数。清晰的讲：闭包就是一个函数，这个函数能够访问其他函数的作用域中的变量。闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。闭包是指有权访问另一个函数作用域中的变量的函数能够读取其他函数内部变量的函数。或简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引

作用域1、理解  就是一块“地盘”，一个代码所在的区域  它是静态的（相对于上下文对象），在编写代码时就确定了2、分类  全局作用域  函数作用域  块级作用域3、作用  隔离变量，不同作用域下的同名变量不会有冲突。作用域与执行上下文1、区别1  全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时。  全局执行上下文环境是在全局作用域确定之后，js代码马上执行之前创建。  函数执行_上下文环境是在调用函数时，函数体代码执行之 前创建

ES5中的继承一、 原型链继承原型链继承的原理：直接让子类的原型对象指向父类实例，当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，从而实现对父类的属性和方法的继承。// 父类function fat () { this.name = 'aqing'}// 父类上的原型方法fat.prototype.getName = function() { return this.name}// 子类function child () {}// 子类的原型对象方法指向

JS中的原型和原型链讲原型的时候，我们应该先要记住以下几个要点，这几个要点是理解原型的关键：1、所有的引用类型（数组、函数、对象）可以自由扩展属性（除null以外）。2、所有的引用类型都有一个’_ _ proto_ _'属性(也叫隐式原型，它是一个普通的对象)。3、所有的函数都有一个’prototype’属性(这也叫显式原型，它也是一个普通的对象)。4、所有引用类型，它的’_ _ proto_ _'属性指向它的构造函数的’prototype’属性。5、当试图得到一个对象的属性时，如果这个对象本身

问题一JavaScript 写一个字符串转成驼峰的方法，o_div_style_position转成oDivStylePosotion。var str = 'border-bottom-color';var strRg = str.replace(/\-[a-z]/g, function (params) { return params.charAt(1).toUpperCase();})console.log(strRg);charAt(1)也可以用substr(1)、substrin

(?=a) 代表什么意思！(?=a)非获取匹配，正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。还有四个和这个相近的:(?!a)非获取匹配，正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。(?:a)非获取匹配，匹配pattern但不获取匹配结果，不进行存储供以后使用。这在使用或字符“(|)”来组合一个模式的各个部分是很有用。(?<=a)非获取匹配，反向肯定预查，与正向肯定预查类似，只是方向

但在开始详细介绍之前，很有必要对ECMAScript 5中的数组方法做一个概述。首先，大多数方法的第一个参数接收一个函数，并且对数组的每个元素(或一些元素)调用一次该函数。如果是稀疏数组，对不存在的元素不调用传递的函数。在大多数情况下，调用提供的函数使用三个参数:数组元素、元素的索引和数组本身。通常，只需要第一个参数值，可以忽略后两个参数。大多数ECMAScript 5数组方法的第一个参数是一个函...

isPrototypeOf()isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的原型链中，是则返回true，否则返回false。格式如下：  object1.isPrototypeOf(object2);  object1是一个对象的实例；  object2是另一个将要检查其原型链的对象。原型链可以用来在同一个对象类型的不同实例之间共享功能。...

语法arr.forEach(callback(currentValue [, index [, array]])[, thisArg])参数callback   为数组中每个元素执行的函数，该函数接收一至三个参数：currentValue   数组中正在处理的当前元素。index (可选)    数组中正在处理的当前元素的索引。array (可选)  forEach()...

   除了for/in循环之外，ECMAScript 5定义了两个用以枚举属性名称的函数。第一个是Object.keys(), 它返回一个数组，这个数组由对象中可枚举的自有属性的名称组成。语法：Object.keys(obj)参数obj    要返回其枚举自身属性的对象。返回值一个表示给定对象的所有可枚举属性的字符串数组。描述Object.keys 返回一个所有元素...

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...

封装成方法如下：/* 定义一个函数 addClass() 用来向元素中添加指定的class属性值 参数： obj ：要添加class属性值的元素 cn ： 套添加的class属性 为字符串 */ function addClass(obj, cn) { ...

大致分为三个步骤：鼠标摁下 onmousedown鼠标移动 onmousemove鼠标抬起 onmouseup注意的一点是 onmousemove事件和onmouseup事件是在onmousedown事件里面的代码如下（不支持IE8及以下浏览器）：代码一<!DOCTYPE html><html lang="en"><head> ...

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的时间触发时，会一直冒泡到祖先元素。从而通过祖先元素的响应事件来处理事件。事件委派是利用了冒泡，通过委派可以减少事件的绑定次数，提高程序的性能。target：target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。<!DOCTYPE html><html lang="...

  为一个元素绑定多事件有两种方法：addEventListener（）和 attachEvent()addEventListener（） —IE8及以下不支持通过这个方法也可以为元素绑定响应函数参数：  1.事件的字符串，不要on  2.回调函数，当事件触发时该函数会被调用  3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false使用addEventListene...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document...