2017年06月_sunlizhen

12月 09月 08月 07月 06月 04月

原创数组(Array)详解；

Array是ECMAScript最常见用的类型；数组的每一项都可以保存任何类型的数据；如：可以用数组的第一个位置来保存字符串，可以用数组的第二个位置来保存数值，可以用第三个位置来保存对象等；数组的大小还可以动态调整；访问数组可以用索引var arr = [1, 2, 3, 9];arr[2] = "ad";alert(arr);//,2,ad,9;arr[4] = "我是增加

2017-06-20 23:50:38 467

原创通过Object.prototype.toString.call()--判断数据（基本、引用）类型

typeof只能检测基本数据类型，不能检测对象数据类型；要想区别对象、数组、函数单纯使用 typeof 是不行的，javascript中,通过Object.prototype.toString方法，判断某个对象值属于哪种内置类型。var arr = [];alert(Object.prototype.toString.call(arr)) //返回值：[object Array]

2017-06-20 22:54:45 434

原创数组去重

//第一种 //把所有数组循环，（在跟下一个比较；）如果有相等的就删除相等的； var arr = [1,3,44,5,1,7,8,44]; for(var i = 0;iarr.length;i++){ var cur = arr[i]; for(var k = i+1;karr.length;k++){ if(

2017-06-20 21:01:15 206

原创 classList

classList是html5新增的操作类名的方式；新类型具有如下方法：add()：给指定的字符串（要添加的类名）添加到类表中，如果值已经存在就不添加了；remove()：从列表中删除指定的字符串（要删除的类名）；contains()：类表中是否存在给定的类名，如果存在返回true，不存在返回false；toggle()：如果类表中存在类名，删除它；如果不存在类名，添加它；

2017-06-20 09:06:45 602

原创 normalize、splitText

normalize：如果在包含两个或者多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点；var oDiv = document.createElement("div"); var text1 = document.createTextNode("第一个"); oDiv.appendChild(text1); var text2 =

2017-06-19 18:58:51 307

原创 item、nameItem的区别

html文档结构：input type="text" name="nini1" value="我是第一项">input type="text" name="nini2" value="我是第二项">input type="text" name="nini3" value="我是第三项">input type="text" name="nini4" value="我是第四项">

2017-06-19 16:54:33 2758

原创 hasChildNodes方法；ownerDocument；

hasChildNodes()方法；hasChildNodes：是一个非常有用的方法，这个方法在节点包含一个或者多个字节点的情况下，返回true；body> ul id="main"> li id="one">第一个li> li id="box">第二个li> li>第三个li> li>第四个li

2017-06-19 15:43:33 843

原创 html5 accesskey

accesskey=“任意键”；用Accesskey属性指定键盘上的键用于代表快捷键，即：热键。触发是alt+设定的键；当单击键盘上的快捷键（热键）时，光标就会跳到该当元素。或者按下快捷键（热键）执行定义的命令。HTML5z中的accesskey属性可以设定多个候补热键（优先使用前面的热键）。定义多个候补热键（快捷键）时，热键之间用半角逗号分隔。html>html lang="e

2017-06-19 13:39:03 1573

原创 onmousedown、onmouseup、onclick的区别；

onmousedown：鼠标点击没有抬起发生的事件；onmouseup：鼠标点击后，抬起才发生的事件；onclick：鼠标点击抬起都发生的时候才触发的事件；window.onload = function(){ var oBox = document.getElementById("box"); oBox.onmousedown = function(){

2017-06-19 13:18:02 1411

原创给动态添加的按钮添加动态事件

function add(){ var btn = document.createElement("button"); //首先动态创建button按钮； btn.id="box"; btn.value = "动态创建的按钮"; var text = document.createTextNode("动态创建的按钮"); //动态创建按钮的文本元素； bt

2017-06-19 11:29:05 1275

原创 Enter键调用登陆按钮效果（keyCode、onkeydown)

按Enter键调用登陆按钮效果；input type="button" value="登陆按钮" id="box">window.onload = function(){ var oBox = document.getElementById("box"); oBox.onclick = function(){ alert("我被点击了！");

2017-06-19 11:06:29 749

原创 getAttribute、setAttribute 、 removeAttribute

html元素：div id="box"> ul id="ul"> li>第一个li> li id="one" data-name="myattr">第二个li> li>第三个li> ul>div>//getAttribute:获取行内属性的值；//setAttribute：设置行内属性的值；// removeAttribute：

2017-06-18 22:33:23 305

原创 appendChild、removeChild、insertBefore、createElement、cloneNode的区别；

html元素：div id="box"> ul id="ul"> li>第一个li> li id="one">第二个li> li>第三个li> ul> p>我是第二个子节点p>div>createElement：动态创建元素节点；appendChild：给元素添加一个子元素；添加新元素前样式：

2017-06-18 20:37:05 802

原创 nextSibling,nextElementSibling的区别；

html文档如下：div id="box"> ul id="ul"> li>第一个li> li id="one">第二个li> li>第三个li> ul> p>我是第二个子节点p>div>nextSibling：下一个兄弟节点（包括文本节点，元素节点，注释节点）；var one = documen

2017-06-18 19:59:22 1142

原创 previousSibling、previousElementSibling的区别

previousSibling：获取元素的上一个兄弟节点；（既包含元素节点、文本节点、注释节点）div id="box"> ul id="ul"> li>第一个li> li id="one">第二个li> li>第三个li> ul> p>我是第二个子节点p>div>var one = docume

2017-06-18 19:47:31 15553

原创 children的childNodes区别

childNodes：获取子元素的节点，包括文本节点、元素节点、注释节点；div id="box"> ul id="ul"> li>第一个li> li>第二个li> li>第三个li> ul> p>我是第二个子节点p>div>var oBox = document.getElementById("box");

2017-06-18 19:26:28 984

原创异步同步

异步：我们一起同时去干一件事情；不管前边执行不执行，后边都会执行；同步：一个事情没有处理完毕，就不处理下一个事情；一个方法没有执行完就不执行后边的；var i = 0;setInterval(function(){ for(i = 0;i10;i++){ console.log(i); }},1000) //一秒执行的时候fo

2017-06-17 20:51:09 210

原创 setInterval，setTimeout

setTimeout()属于单次循环；setInterval()属于每隔一定时间重复循环；var num = 0;setInterval(function(){ console.log(num++);},1000);//每隔1000会出现0 1 2 3 4 5 .....；var num = 0;setTimeout(function () { console

2017-06-17 20:11:13 220

原创选项卡效果

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> * { margin: 0; padding: 0; } #main { wid

2017-06-17 19:47:18 213

原创执行环境及作用域

执行环境：定义了变量和函数有权访问的其他数据，决定了他们各自的行为；每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中；全局执行环境是最外层的一个执行环境。全局执行环境被认为是window对象，因此所有全局的变量和函数都是作为window对象的属性和方法创建的；某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数也会被销毁；每个函数

2017-06-17 08:44:20 317

原创加性操作符（加法+，减法-）

1.加法：加法操作符（+）用法如下：某个运算数是 NaN，那么结果为 NaN。-Infinity 加 -Infinity，结果为 -Infinity。Infinity 加 -Infinity，结果为 NaN。+0 加 +0，结果为 +0。-0 加 +0，结果为 +0。-0 加 -0，结果为 -0。不过，如果某个运算数是字符串，那么采用下列规则：如果两个

2017-06-16 17:18:05 660

原创乘性操作符（乘法、除法、求模）

如果参与乘性计算的某个数不是数值，后台会调用Number()将这个数转换成数字，在进行乘性计算；1.乘法：乘法操作符有星号（*）表示，用于计算两个数值的乘积；乘法操作遵循下面的规则：a）如果两个都是数值，执行按照常规的乘法计算，即两个整数两个负数计算的结果还是整数，尔如果只有一个操作数有符号，那结果就是负数，如果乘机超过了数值的表示范围用Infinity或者-Infinity表示；

2017-06-16 16:58:27 1527

原创一元操作符

只操作一个值的操作符，叫做一元操作符；1.递增递减操作符：分为前置型和后置型；前置型即位于要操作的变量之前；后置型即位于要操作的变量之后；后置型递增递减和前置型递增递减的区别是：后置型是他们的语句被求值之后在执行；var num = 1;var sum = ++num; console.log(sum); //sum的值为2 因为++num为前置型；所以会先num自

2017-06-16 16:16:58 3456

原创 toString与String的区别

toString()方法；数值、字符串、对象、布尔；都有toString方法；这个方法唯一能做的就是返回相应的字符串；其中null和undefined没有toString()方法；String()属于强制转换， null转换的结果为null；undefined转换的结果为undefined；其余的如果有toString()方法，即调用该方法，返回相应的结果；

2017-06-16 15:31:02 9841 2

原创 js输出当前星期几--switch case

var taday = new Date();var week = taday.getDay(); switch(week){ case 0: str = "星期日"; break; case 1: str = "星期一"; break; cas

2017-06-16 10:37:21 5886

原创点击div切换颜色；

html元素：div style="width: 100px;height: 100px;background: red;margin: 0 auto;" id="box">div>第一种方法：（用if...else...）function fn(obj){ obj.onclick = function(){ if(obj.style.background =

2017-06-16 10:21:37 4089 1

原创 js的变量、参数

怎么创建变量：如：var str = “hello world”；通过var关键字来声明我们的变量；创建变量名的规范：a）不能以数字开头；b）不能出现js中的关键字和保留字；c）可以用_、$、字母开头；注：在创建变量的过程中作用域中不能出现重复的变量，否则后面的变量会把前面的变量覆盖；调用变量：调用的是给变量赋的值，而不仅仅调用

2017-06-15 20:49:39 673

原创九九乘法表

九九乘法表//第一种： //思路：body里边只有一个div 所以我们要动态添加9个p元素，每个p元素里边按照阶梯递增一个span的元素； //1. 首先要获取div var oDiv = document.getElementById("wrap"); //一共添加9个p元素，并把p元素添加到div元素里边；首先要循环p; var

2017-06-15 19:37:46 307

原创隔行变色

//第一种：//首先获取div元素，因为要动态往div里添加p元素；var oDiv = document.getElementById("wrap");//往div里动态添加p元素,因为要添加10个p每个p的内容不一样，所以要循环p；//var一个变量，初始值为空，以后要方变量的值；var str = "";for(var i = 0;i10;i++){ i

2017-06-15 19:30:21 219

原创形参、实参；

// 形参：形参变量，形参定义函数的表达式的小扩号里,定义形参不需要关键字，而且形参其实就是一个变量，形参也属于当前函数的私有变量；你可以定义一个或多个或者无数个，每个不同的形参之间用操作符逗号（，）来区分开；function sum(n, m) { console.log(n); console.log(m);}sum(1, 'a');// 想让形参有实际的

2017-06-15 09:11:49 358

原创实名函数、匿名函数；

// 实名函数有函数名()；如： function sum(){alert("我是实名函数，sum是我的函数名“）;}调用函数时：sum（）即可；// 匿名函数 1、直接就是函数表达式 2、自执行函数var fn = function () { console.log(1111111111111);};// 创建了一个匿名函数，通过变量的方式

2017-06-15 09:09:48 625

原创全局作用域和私有作用域的区别；

全局作用域：供所有代码执行的环境，只要浏览器不关闭就不会消失；私有作用域：函数执行的时候，开辟的用来解析函数体的代码的新的栈内存，他也叫做私有作用域；私有作用域可以访问全局作用域，全局作用域不能访问私有作用域；体现在：全局作用中可以访问和调用私有作用域中的变量；私有作用域不可以访问和调用全局作用域中的变量；// var num = 1;// var ob

2017-06-15 08:53:46 1193

原创初步认识函数

// function 关键字// 函数是对象数据类型，引用数据类型function sum () { // 函数体 // 函数执行的时候，执行代码 console.log(2);}// 最简单的实名函数// 函数是一个方法。是一个功能，也是一个可以操作的数据// 函数创建阶段，只是定义了函数。// 函数名(); 语法//sum

2017-06-15 08:39:58 589

原创 break和continue的区别

break；continue；跳出当前循环次的 continue for 循环中continue的作用：中止当前循环中的代码，continue后边的循环体中的代码就不执行了，直接进行i++，再进入下一次循环； break 是跳出整个循环；continue只是跳出当前循环，后边的代码不执行了，没有跳出循环体；break 还是continue 后边的代码都不执行了； for

2017-06-15 08:36:29 442

原创 js循环处理的表达式 for、for in、while

for循环表达式：简单循环：var num = 0;for(var i = 0;i5;i++){ console.log(num+=1)} 第一步第二步 for 循环 (创建一个开始循环标记变量（初始化变量）; 循环的成立的条件;第三步定义循环后要执行的代码)

2017-06-15 08:25:45 986

原创基本数据类型和引用数据类型的区别：

编辑器所开发的代码都是推送到浏览器。浏览器再解析代码。代码就相当于浏览器的工人，为浏览器提供好多功能（展示和交互）；浏览器得到代码后开始解析代码，在浏览器的后台开辟一个工作空间叫栈内存（全局作用域 =>window），来从上到下解析我们js代码。将基本数据类型存在当前栈里边，解析到引用数据类型的时候，他会接着做另一个辅助工作，在浏览后台开辟一个堆内存（私有作用域），来储存我们的代码字符；

2017-06-14 23:43:16 3773

原创布尔操作符：逻辑或（||）、逻辑与（&&）、逻辑非（！）

逻辑或（||）、逻辑与（&&）、逻辑非（！）逻辑非操作符遵循下列规则： “”、0、NaN、null、undefined转换成布尔值是false，其余转换成布尔值为true。逻辑非把前面的值取反即可；！取反操作；因为js有数据，数据有真假，所以可以进行转化取反；！！两个逻辑非操作符，就是直接将数据转换成布尔值；逻辑或：

2017-06-14 23:35:50 3169

原创基本数据类型、引用数据类型相互之间的比较规范（相等运算符的使用）

1. 基本数据类型与基本数据类型之间的比较规范：num str bool null unde数字与字符串之间的比较（number == string）：字符串通过Number转换成数字，然后数字之间进行比较；数字与布尔之间的比较（number == boolean）：将布尔转换为数字，然后数字之间进行比较；true转换数字为1；false转换数字为0；字符串与布尔之间的比较（strin

2017-06-14 23:14:20 1904

原创 if语句、三元运算、switch

if语句是变成语言中最常用的语句；if语句的语法为：if（condition）{语句1}else{语句2} condition可以是任意表达式，ECMAScript可以通过Boolean()将condition条件转换为布尔值；如果转换的条件为true，则执行语句1；如果转换的条件为false，则执行语句2； switch case；if 判断表达式，有固定的格式。

2017-06-14 22:55:39 631