10个实用的JS技巧「值得收藏」
我一直在寻找提高效率的新方法。而且 JavaScript 总是能给人带来惊喜。
arguments 对象是函数内部可访问的类似数组的对象，其中包含传递给该函数的参数的值。
与其他数组不同，这里我们可以访问值并获得长度（length），但是不能在其上使用其他数组方法。
幸运的是，我们可以将其转换为常规数组：
我一开始想到的是使用一个循环，但是那样会很浪费。
我们有以下代码：
我们可以进一步简化代码，同时使用变量和函数：
我以前在函数开始时声明变量，只是为了避免在出现意外错误时遇到 undefined。
逗号运算符
逗号运算符（,）用来计算其每个操作数（从左到右）并返回最后一个操作数的值。
你可以调整大小或清空数组。
结构赋值语法是一种 JavaScript 表达式，可以将数组中的值或对象中的属性解包为不同的变量。
你可以在声明对象之前分配一个动态属性。
对于所有 ES6 爱好者而言，我们可以使用带有 Spread 运算符的 Set 对象来创建一个仅包含唯一值的新数组。
履行好自己的责任比提升效率要重要的多。
你的网站需要兼容所有浏览器。
你可以使用 Endtest或其他类似工具来确保兼容性。
https://endtest.io/
你还有其他 JavaScript 技巧或窍门要分享吗？
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
作者 | Zander Shirley
译者 | 王强
策划 | 小智
转发链接：https://mp.weixin.qq.com/s/QQp3GTUvnwn_cunmaqDwTg
熬夜7天，我总结了JavaScript与ES的25个知识点
前言
说起JavaScript，大家都知道是一门脚本语言。那么ES是什么鬼呢？ES全称ECMAScript ，是JavaScript语言的国际标准。
最近，我总结了25条JavaScript的基础特性相关的知识点，大家一起看一下吧
1.严格模式
- 使用严格模式，可以在函数内部进行较为严格的全局和局部的错误条件检查
- 严格模式的编译指示，\”use strict\”
- 创建全局变量，未声明变量，非严格模式下为创建全局变量；严格模式下为抛出ReferenceError
- 对变量调用delete操作符，删除变量，非严格模式下为静默失败；严格模式下为抛出ReferenceError
- 操作对象情况下：a，只读属性赋值会抛出TypeError；b，对不可配置的属性使用delete操作符会抛出TypeError；c，为不可扩展的对象添加属性会抛出TypeError。
- 重名属性情况：a，非严格模式下没有错误，以第二个属性为准；b，严格模式下会抛出语法错误。
- 函数参数必须唯一，重名参数，在非严格模式下没有错误，只能访问第二个参数；严格模式下，会抛出错误。
- 访问arguments.callee和arguments.caller，在非严格模式下没有问题，严格模式下抛出TypeError。
2.Class基础语法
在JavaScript当中如何声明一个类？如何定义类中的方法？如何实例化对象？
我们来看看下面的代码示例：
JavaScript constructor 属性
定义和用法
constructor 属性返回对创建此对象的数组函数的引用。
语法
object.constructor
constructor 是一种用于创建和初始化class创建的对象的特殊方法。
- 一个类中只能有一个名为“constructor\”的方法，出现多次构造函数constructor方法会抛出一个SyntaxError错误
- 在一个构造方法中可以使用super来调用一个父类的构造方法
- 如果没有指定一个构造函数方法constructor方法，就会使用一个默认的构造函数
3.类的属性Setter和Getter
get:
利用set/get实现对element.innerHTML封装
设置一个闭包，通过一定的规则来限制对它的修改：
4.静态方法
在es5中实现的静态方法：
静态方法在你的实例化对象是找不到的
在es6中的静态方法，标记static
5.如何继承一个类
在es5中的继承：
在es6中的继承
6.面向对象编程Class
类的声明，属性，方法，静态方法，继承，多态，私有属性
es6中的Class
7.函数参数的默认值
函数参数是从左到右解析，如果没有默认值会被解析成 undefined
8.es6箭头函数
箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
拓展
判断函数有几个参数
- 在 ES5 中可以在函数体内使用 arguments 来判断。
- 在 ES6 中可以借助 Function.length 来判断。(统计第一个默认参数前面的变量数)
9.JavaScript中的三个点（…）
JavaScript当中，函数的参数前面有三个点，代表什么呢？我们看下代码示例：
10.Object Property
JS中对象的属性定义，代码示例如下：
11.Set数据结构
Set存储的成员不允许的重复的（它类似于数组）
Set 本身是一个构造函数，用来生成 Set 数据结构。
实现数组去重
Set的遍历
- keys()：返回键名的遍历器
- values()：返回键值的遍历器
- entries()：返回键值对的遍历器
- forEach()：使用回调函数遍历每个成员
操作方法
- add(value)：添加某个值，返回Set结构本身。
- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
- has(value)：返回一个布尔值，表示该值是否为Set的成员。
- clear()：清除所有成员，没有返回值。
实现并集（Union）、交集（Intersect）和差集（Difference）
12.Map数据结构
JS当中的哈希表，使用方法如下：
Map数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
13.Object.assign(对象的拷贝)
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
语法
参数
目标对象
源对象
返回值
目标对象。
- Object.assign()拷贝的是（可枚举）属性值
- Object.assign方法的第一个参数是目标对象，后面的参数都是源对象
- 如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性
- 由于undefined和null无法转成对象，所以如果它们作为参数，就会报错
- 如果undefined和null不在首参数，就不会报错
- 如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用(这个对象的任何变化，都会反映到目标对象上面。)
Object.assign复制的是属性值value，如果属性值是一个引用类型，那么复制的其实是引用地址，就会存在引用共享的问题（Object.assign(target,source1,…,sourceN）浅拷贝的过程）
要点：
浅拷贝 Object.assign 的实现原理
拷贝第一层的基本类似值和第一层的引用类型地址：
如果源对象的属性值是一个指向对象的引用，它也只拷贝这个引用地址哦！
动态属性键
补充：前端面试考点，HTML和CSS，性能优化，原型，作用域，异步，各种手写代码，DOM事件和Ajax，HTTP协议。
- css(布局，定位，移动端响应式）
- es(原型，原型链，作用域，闭包，异步，单线程）
- webapi(DOM BOM，Ajax跨域，事件存储）
- 开发环境（版本管理，调试抓包，打包构建）
- 运行环境（页面渲染，性能优化，web安全）
- 网络通讯
- 布局（盒模型，BFC，float，flex）
- 定位，图文样式，移动端响应式（rem,media query,vw/vh），动画、渐变
- 变量类型和计算（值类型和引用类型，类型判断，逻辑运算）
- 原型和原型链（class，继承，原型，原型链，instanceof）
- 作用域和闭包（作用域，自由变量，闭包，this）
- 异步（单线程，callback，应用场景，Promise，event-loop，async/await，微任务/宏任务）
- 模块化（ES6 Module）
- DOM(树形结构，节点操作，属性，树结构操作，性能）
- BOM（navigator,screen,location,history）
- 事件（绑定，冒泡，代理）
- ajax(XMLHttpRequest,状态码,跨域）
- 存储（cookie,localStorage,sessionStorage）
- 开发环境（git,调试，webpack和babel，linux命令）
- 运行环境（页面加载：加载，渲染。性能优化：加载资源优化，渲染优化。安全：xss，CSRF）
- HTTP协议：状态码，Method，Restful API，headers，缓存策略
14.模板文字
模板文字是es2015/es6的新功能，与es5及以下版本相比，可以通过新颖的方式使用字符串，先只需要反引号代替单引号或双引号即可：
它们之所以独特是因为它们提供了很多用引号构建的普通字符串不具备的功能：
- 提供了定义多行字符串的语法；
- 提供了一种简单的方法来插值字符串中的变量和表达式
- 允许您使用模板标签创建DSL（领域特定的语言）
使用多行字符串
在es6之前的版本：
要在多行上呈现，则需要使用\\n在每行的末尾添加
使用反引号打开模板文字后，只需要按enter键就行：
在这里请记住空间是有意义的：
使用trim()方法，可以消除第一个字符之前的任何空格
插补：模板文字提供了一种将变量和表达式插入字符串的简便的方法
15.什么是解构赋值
解构赋值在于赋值，拷贝出来赋值给变量，而赋值的元素本身不会发生改变
默认值
给变量赋值（默认值），防止出现undefined的情况：
解构分配
ES5中的索引提取这些值：
ES6解构允许使用更简单方法：
使用rest运算符（…）提取剩余元素：
可变值交换
在ES6中，我们可以为任何参数分配默认值
函数返回多个值（函数只能返回一个值，但可以是一个复杂的对象或多维数组）
ES6 JavaScript深度解构
默认情况下，找不到的属性为undefined
如果访问不存在的父级的深层嵌套属性，则将获得异常。
16.异步操作
Callback
Promise
Promise对象是用于表示一个异步操作的最终完成（或失败），以及其结果值。
示例：
语法：
描述：Promise对象是一个代理对象，被代理的值在Promise对象创建时可能是未知的，它允许你为异步操作的成功和失败分别绑定相应的处理方法，这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。
一个Promise有以下几种状态：
- pending，初始状态，既不是成功，也不是失败状态。
- fulfilled，意味着操作成功完成。
- rejected，意味着操作失败。
pending状态的Promise对象可能会变为fulfilled状态并传递一个值给相应的状态处理方法。
Promise.prototype.then和Promise.prototype.catch方法返回promise对象，所以它们可以被链式调用。
方法：
Promise.all(iterable)
- 返回一个新的promise对象
- 在iterable参数对象里所有的promise对象都成功时，才会触发成功
- 当任何一个iterable里面的promise对象失败，才会触发promise对象的失败
- 成功状态会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值，顺序和iterable的顺序一样
- 如果这个新的promise对象触发了失败，会把iterable里的第一个触发失败的promise对象的错误信息作为它的失败信息
- 场景，多用于处理多个promise对象的状态集合
Promise.any(iterable)
- 接收一个Promise对象的集合，当其中的一个promise成功，就返回那个成功的promise的值
Promise.reject(reason)
- 返回一个状态为失败的Promise对象，然后将失败信息传递给对应的处理方法
Promise.resolve(value)
- 返回一个状态由给定value决定的Promise对象
Promise原型
属性：Promise.prototype.constructor返回被创建的实例函数，默认为Promise函数。
方法：
- Promise.prototype.catch(onRejected)
- Promise.prototype.then(onFulfilled,onRejected)
- Promise.prototype.finally(onFinally)
17.ES6代理
- 默认情况下，代理不执行任何操作
示例：
为了更好地了解代理的有用性，让我们做一些小练习。
示例：
想象一下，您已经17岁了，即将满18岁。并且您希望您的程序在打开时自动向您祝贺。为此，您可以使用代理。
语法：
- target 用Proxy包装的目标对象
- handler 一个对象，其属性是当执行一个操作时定义代理的行为的函数
如果不想再调用key的时候，返回undefined：
使用Proxy
希望从服务器获取的数据只读，不允许修改：
使用Proxy:
检验逻辑代码：
使用Proxy，对读写进行监控：
示例：每个对象都有一个自己的id
18.Generator
Generator函数与普通函数的区别在于定义的时候有一个*，执行下面函数：
要生成一个自增的id:
方法
书写风格：
方法
Generator对象方法：next,return,throw
通过Next方法来获取每一次遍历的结果，这个方法返回一个对象，这个对象包含两个value和done。
value：当前程序的运行结果 done:遍历是否结束
next是可以接收参数的，这个参数可以让你在generator外部给内部传递数据，这个参数就是作为yield的返回值。
return()方法可以让generator遍历终止
return可以传入参数，作为返回的value的值
throw()方法在generator外部控制内部执行的“终断”
generator函数声明：
generator表达式：
对象中定义：
类定义（类声明或类表达式）:
最简单的iterator遍历规范：
19.module
在es6前，js文件之间的导入，导出是借助require.js,sea.js，如现在使用import,export,来实现原生javascript的导入，导出。
export：
import
20.import, export21.Array.prototype.includes,Promise
该方法判断一个数组是否包含一个指定的值，返回布尔值
await后面是Promise对象
Object.values()返回一个数组，其元素是在对象上找到的可枚举属性值。
Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组
22.JS异步进阶
题目一：
题目二：
题目三：
题目四：
题目五：
题目六：
加载图片：
for…of常用于异步的遍历
23.宏任务和微任务
宏任务：setTimeout,setInterval,ajax等 微任务：Promise async/await
微任务执行时比宏任务要早:
宏任务：DOM渲染后触发，如setTimeout
微任务：DOM渲染前触发，如Promise
24.For await of 异步操作集合25.Array.prototype.flat()
该方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合为一个新数组。
Array.prototype.flat()建议将数组递归展平至指定范围depth并返回新数组。
depth(指定要提取嵌套数组的结构深度）
语法：Array.prototype.flat(depth)
depth —默认值1，Infinity用于展平所有嵌套数组。
语法：Array.prototype.flatMap(callback)
callback：function产生新Array的元素。
Object.fromEntries
Object.fromEntries执行与的相反操作Object.entries。它将一组键值对转换为一个对象。
Symbol.prototype.description
只读属性，返回Symbol对象的可选描述：
点关注，不迷路
好了各位，以上就是这篇文章的全部内容，能看到这里的人都是人才。我后面会不断更新技术相关的文章，如果觉得文章对你有用，欢迎给个“赞”，也欢迎分享，感谢大家 ！！
喜欢本文的朋友，欢迎关注公众号 程序员小灰，收看更多精彩内容
JavaScript基础知识点总结
//小憨憨
/*第一章
*HTML引用js方法：
*1,外部引用：HTML外部引用js：<script src=\”js/day1.js\”></script>
*2,内部引用：<script> alert(\”小憨憨\”);</script>
*3,元素事件引用：<input type=\”button\” value=\”button\” onclick=\”alert(\’welcome\’)\” />
*/
/*第二章
* 变量定义：
* 1，变量由数字，字母，下划线，$组成，且不能以数字开头
* 2，变量不能使用系统关键词
* 3变量定义语法：var 变量1=变量值,变量2=变量值,…;
*/
//举例：
var a = 10;
document.write(a);//在页面输出一个内容
/*
* 数据类型：
* 1，基本数据类型：数字，字符串，布尔值，未定义值(undefined)，空值(null)
* 2，引用数据类型：数组，对象
* 其中：数字不区分整型和浮点型
*/
/*
* 运算符：
* 1，算术运算符:+ – * / % ++ —
* 加法运算规则：数字+数字=数字； 数字+字符串=字符串； 字符串+字符串=字符串
* 2，
*/
//举例：
var a = 10;
var str = \”小憨憨\”;
document.write(str + a, typeof(str + a));
/*
* 赋值运算符：= += -= *= /=
* 比较运算符：> < >= <= == !=
* 逻辑运算符：&& || !
* 条件运算符：var b=条件?表达式1:表达式2;//相当于C语言中三目运算符
*/
/*
* 表达式语句：一个分号对应一条语句
* 类型转换：
* 1，隐式类型转换（js自动完成的）
* 2，显式类型转换
* (1)字符串转数字：Number(),parseInt(),parseFloat()（字符串必须是数字字符串）
* (2)数字转字符串：toString
* (3)转义字符：\\\’ \\\” \\n等
* 3，注释： 单行注释 和 多行注释 用法：与C语言注释一样
*/
//举例：
document.write(\”Number(\\\”123\\\”):\” +Number(\”123\”) + \”<br/>\”);
document.write(parseInt(\”+123.456px\”));//第一个字符为+或-也进行转换，从左往右取整数
document.write(parseFloat(\”123.456px\”));
var num = 123;
document.write(num.toString());
/*第三章
* 流程控制：
* 1，顺序结构：程序代码从上到下，从左到右依次执行
* 2，选择结构：
* (1)if语句:（单重if）
* <1>:if(条件){语句块}
* <2>:if(条件){语句块} else{语句块}
* <3>:if(条件){语句块} else if(条件){语句块} else{语句块}
* (2)switch语句：
* switch(判断值){ case 取值1:语句块1;break;
* case 取值2:语句块2;break;
* …
* default:语句块n;break;}
* 3,循环结构：
* (1)while循环：
* while(条件){语句块}
* (2)do…while循环：
* do{语句块}while(条件);
* (3)for循环：
* for(初始化表达式;条件表达式;循环后操作表达式){语句块}
*/
//举例：计算1+2+3+…+100
var n = 1, sum = 0;
while(n <= 100)
{
sum += n;
n++;
}
document.write(sum);
//找出100-1000中的水仙花数
var str1 = \”\”;
for(var i = 100; i < 1000; i++)
{
var a = i / 100; //取百位上的数字
a = parseInt(a);
var b = i % 100 / 10; //取十位上的数字
b = parseInt(b);
var c = i % 10; //取个位上的数字
c = parseInt(c);
if(i == (a * a * a + b * b * b + c*c*c))
{
str1 = str1 + i + \”、\”;
}
}
document.write(\”水仙花数有：\” + str1);
//判断一个数是不是整数
window.onload = function()
{
var n = 3.14159;
if(parseInt(n) == parseFloat(n))
{
document.write(n + \”是整数\”);
}
else
{
document.write(n + \”不是整数\”);
}
}
/*第四章
* 函数：
* 1，函数的定义:函数名命名规则遵循变量命名规则
* (1)没有返回值的函数定义：function(参数1，参数2，…){语句块}
* (2)有返回值的函数定义：function(参数1，参数2，…){语句块; return 返回值}
* 2，变量的作用域：全局变量，局部变量
* 3，函数的调用：
* (1)直接调用：函数名(实参1,实参2,…);
* (2)在表达式中调用:例如：var sum = 函数名(实参1,…)
* (3)在超链接中调用：<a href=\”javascript:函数名\”> </a>
* (4)在事件中调用
* 4，函数嵌套
* 5，内置函数：比如：parseInt()
*/
//举例：
function add_sum(e, f){
var sum = e + f;
document.write(sum);
}
add_sum(10, 20);
function test(){alert(\”doubi\”);}//供超链接调用测试的函数
/*第五章
* 1，js中对象分为：自定义对象和内置对象
* 2，常用的内置对象：字符串对象，数组对象，日期对象，数值对象
* 3，字符串对象相关知识点：
* 3.1 获取字符串长度：语法： 字符串名.length
* 3.2大小写转换： 字符串名.toLowerCase(),字符串名.toUpperCase()
* 3.3获取一个字符：字符串名.charAt(n)
* 3.4获取字符串： 字符串名.substring(start, end)
* 3.5替换字符串： 字符串.replace(原字符串或正则表达式, 替换字符串)
* 3.6分割字符串： 字符串.split(\”分隔符\”)
* 3.7检索字符串的位置： 字符串.indexOf(指定字符串),字符串.lastIndexOf(指定字符串)
* indexOf：返回首次出现的位置 lastIndexOf：返回最后一次出现的位置 没找到返回-1
* 3.8删除字符串中的一个字符：
*/
//举例
var str = \”This is doubixiaohanhan\”;
document.write(\”字符串长度为：\” + str.length);//空格也计算在内
document.write(\”转为大写字母:\” + str.toUpperCase());
document.write(\”转为小写字母:\” + str.toLowerCase());
document.write(\”获取第3个字符: \” + str.charAt(3));//字符串下标从0开始计算
document.write(str.substring(8, 23));
document.write(str.replace(\”doubixiaohanhan\”, \”hahahahahaha\”));
var str1 = str.split(\” \”);//以空格作为分隔符
for(var i = 0; i < 3; i++)
document.write(str1[i]);
document.write(str.indexOf(\”bi\”));
document.write(str.lastIndexOf(\”han\”));
//找出字符串中所有字符b,不区分大小写
var n = 0,str1 = \”doubixiaohanhan\”;
document.write(\”源字符串:\” + str1);
for(var j = 0; j < str1.length; j++)
{
var char = str1.charAt(j);
if(\’h\’ == char.toLowerCase())
{
document.write(char);
n = n + 1;
}
}
document.write(\”字符串中有\” + n + \”个字符h\”);
//统计字符串中数字的个数
function get_number(str){
var num = 0, i = 0;
while(i < str.length){
var char = str.charAt(i);
if((char != \” \”) && (!isNaN(char))){//isNaN:不是数字则返回true
num++;
}
i++;
}
alert(\”执行完毕\”);
return num;
}
var ret = get_number(\”dou120k53KDDD6656\”);
document.write(ret);
/*第六章：数组对象
* 1，数组的创建：（数组 中可以存储不同类型的数据）
* (1)完整形式：var 数组名=new Array(元素1,元素2,..)
* (2)简写形式：var 数组名=[元素1,元素2,…]
* 2，数组的获取：使用下标获取，下标从0开始
* 3，数组的赋值：arr[i]=值;
* 4，获取数组的长度： 数组名.length
* 5，截取数组： 数组名.slice(start, end)
* 6，为数组添加元素：
* (1)在数组开头添加元素： 数组名.unshift(元素1,元素2,…)
* (2)在数组末尾添加元素： 数组名.push(元素1,元素2,…)
* (3)在数组首部删除元素： 数组名.shift()
* (4)在数组末尾删除元素： 数组名.pop()
* (5)数组排序： 升序：数组名.sort(up) 降序：数组名.sort(down)
* 其中：function up(a,b){return a-b;} function down(a,b){return b-a;}
* (6)数组颠倒顺序： 数组名.reverse()
* (7)将数组元素连接成字符串： 数组名.join(\”连接符\”)
* (8)
*/
//举例
var arr = [\”js\”,\”jquery\”];
document.write(arr + \’\\n\’);
arr.unshift(\”db\”);
arr.push(\”ab\”);
document.write(arr);
arr.shift();
arr.pop();
document.write(arr);
var arr1 = [3, 6, 2, 5, 8, 1];
document.write(arr1);
function up(a,b){return a–b;}
arr1.sort(up);
document.write(arr1);
function down(a,b){return b–a}
arr1.sort(down);
document.write(arr1);
var arr = [\”js\”,\”jquery\”,\”abcd\”];
var re = arr.join(\”\”);
document.write(re);
document.write(typeof(re));
//例题：将字符串所有字符颠倒顺序
function test(str){
var arr = str.split(\”\”);
document.write(typeof(arr));
arr.reverse();
var re = arr.join(\”\”);
document.write(typeof(re));
return re;
}
document.write(\”javascript颠倒后： \” + test(\”javascript\”));
/*第七章：时间对象
* 创建一个日期对象必续使用new关键字：语法： var 日期对象名 = new Date();
* Date对象的方法有很多，主要分为两大类：获取时间：getXxx() 和 设置时间：setXxx()
*
* getFullYear() 获取年份：取值4位数字
* getMonth() 获取月份：取值0（一月）-11（十二月）整数
* getDate() 获取日数：取值0-31整数
* getHours() 获取小时：取值0-23整数
* getMinutes() 获取分钟：取值0-59整数
* getSeconds() 获取秒数：取值0-59整数
* getMilliseconds() 获取毫秒
* getDay() 获取星期几：0表示星期天
* setFullYear(year,month,day) 设置年月日
* setMonth(month,day) 设置月日
* setDate(day) 设置日 : 1-31整数
* setHours(hour,min,sec,millsec) 设置时分秒毫秒
* setMinutes(min,sec,millsec) 设置分秒毫秒
* setSeconds(sec,millsec) 设置秒毫秒
*/
//举例
var d = new Date();
var myyear = d.getFullYear();
var mymonth = d.getMonth();
var myday = d.getDate();
var myday1 = d.getDay();
var weekend = [\”星期天\”,\”星期一\”,\”星期二\”,\”星期三\”,\”星期四\”,\”星期五\”,\”星期六\”];
document.write(myyear + \”年\”+(mymonth+1)+\”月\”+myday+\”日\”+weekend[myday1]);
/*第八章：数学对象
* 数学对象不需要使用new关键字来创造，而是直接使用它的属性和方法
* 语法： Math.属性 Math.方法
* 注：属性往往都是常量，比如：圆周率：PI （常用格式：度数*Math.PI/180）
* Math中方法常用有：
* max min sin cos tan asin acos atan floor ceil random atan2
* Math中方法不常用有：
* abs sqrt log pow exp
* random():用于生成0-1之间的随机数，即： [0,1)
* 随机生成某个范围的任意数：
* 1，Math.random()*m:生成0~m之间的随机数
* 2，Math.random()*m+n:生成n~m+n之间的随机数
* 3，Math.random()*m-n:生成-n~m-n之间的随机数
* 4，Math.random()*m-m:生成-m~0之间的随机数
*/
//举例
var a = Math.max(3,9,10,2,4,6,12,67,9);
document.write(a);
var b = 0.6;
document.write(Math.floor(b));//floor向下取整
document.write(Math.ceil(b)); //ceil向上取整
document.write(Math.random()*10);
//例题：生成随机验证码
function random_validate(str){
var arr = str.split(\”\”);
var result = \”\”;
for(var i = 0;i < 4; i++){
var n = Math.floor(Math.random()*arr.length);
result += arr[n];
}
return result;
}
document.write(random_validate(\”asjcbakavbavakvhakjbvkvJASSDKABKAVAVJ24123435\”));
/*第九章：DOM基础
* DOM：document object model文档对象模型（W3C定义的一个标准）
* DOM操作：理解：元素操作；DOM采用树形结构
* 重点：每一个元素就是一个节点，每个节点就是一个对象。操作元素时其实就是把这个元素看成一个对象，
* 然后使用其对象的属性和方法进行操作。节点包括元素，二者实际不是同一概念
* DOM节点有12种类型，其中常用的三种：元素节点，属性节点，文本节点
* 不同节点的nodeType属性值：
* 元素节点：1
* 属性节点：2
* 文本节点：3
*
* 一，获取元素（实际获取元素节点），js种有以下方式：
* 1，getElemnetById()
* 2，getElemnetByTagName():返回一个类数组（伪数组）：只能使用length属性和下标形式
* 3，getElemnetByClassName()
* 4，getElemnetByName():只用于表单元素，一般用于单选按钮和复选框
* 5，querySelector()和querySelectorAll()
* 6，document.title()和document.body()
* 二，创建元素：（动态DOM操作）
* 创建元素节点：createElement()
* 创建文本节点：createTextNode()
* 总结：创建一个元素的步骤：
* (1)创建元素节点：createElement()
* (2)创建文本节点：createTextNode()
* (3)把文本节点插入元素节点：appendChild()
* (4)把组装好的元素插入到已有的元素中：appendChild()
* 三，插入元素
* 1，appenChild() :把一个元素插到父元素的内部子元素的末尾
* 2，insertBefore():把一个元素插到父元素的内部某个子元素的之前
*
* 四，删除元素：removeChild()
* 五，赋值元素：obj.cloneNode(bool)
* obj:被复制的对象
* bool:参数 true：复制元素本身及其子元素 false：仅仅复制本身
* 六，替换元素：replaceChild(new,old)
*/
//创建简单元素
window.onload =function(){
var oDiv = document.getElementById(\”content\”);
var oStrong = document.createElement(\”strong\”);
var oTxt = document.createTextNode(\”小憨憨\”);
oStrong.appendChild(oTxt);
oDiv.appendChild(oStrong);
}
//创建带属性的元素
window.onload =function(){
var oInput = document.createElement(\”input\”);
oInput.id = \”sumit\”;
oInput.type = \”button\”;
oInput.value = \”提交\”;
document.body.appendChild(oInput);
}
//创建动态图片
window.onload =function(){
var oImg = document.createElement(\”img\”);
oImg.className = \”doubi\”;
oImg.src = \”img/doubi.jpg\”;
oImg.style.border = \”1px solid silver\”;
document.body.appendChild(oImg);
}
//创建多个元素
window.onload =function(){
var oTable = document.createElement(\”table\”);
for(var i = 0; i < 3;i++){
var oTr = document.createElement(\”tr\”);
for(var j = 0; j < 3; j++){
var oTd = document.createElement(\”td\”);
oTr.appendChild(oTd);
}
oTable.appendChild(oTr);
}
document.body.appendChild(oTable);
}
//子元素插到末尾
window.onload =function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.onclick = function(){
var oU1 = document.getElementById(\”list\”);
var oTxt = document.getElementById(\”txt\”);
var textNode = document.createTextNode(oTxt.value);
var oLi = document.createElement(\”li\”);
oLi.appendChild(textNode);
oU1.appendChild(oLi);
}
}
//子元素插到某个子元素之前
window.onload =function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.onclick = function(){
var oU1 = document.getElementById(\”list\”);
var oTxt = document.getElementById(\”txt\”);
var textNode = document.createTextNode(oTxt.value);
var oLi = document.createElement(\”li\”);
oLi.appendChild(textNode);
oU1.insertBefore(oLi, oU1.firstElementChild);
}
}
//删除子元素
window.onload =function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.onclick = function(){
var oU1 = document.getElementById(\”list\”);
oU1.removeChild(oU1.lastElementChild);
}
}
//复制元素
window.onload =function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.onclick = function(){
var oU1 = document.getElementById(\”list\”);
document.body.appendChild(oU1.cloneNode(1));
}
}
//替换元素
window.onload =function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.onclick = function(){
var oFirst = document.querySelector(\”body *:first-child\”);
var oTag = document.getElementById(\”tag\”);
var oTxt = document.getElementById(\”txt\”);
var oNewTag = document.createElement(oTag.value);
var oNewTxt = document.createTextNode(oTxt.value);
oNewTag.appendChild(oNewTxt);
document.body.replaceChild(oNewTag, oFirst);
}
}
/*第十章：DOM进阶
* 操作HTML元素属性的方式：对象属性和对象方法
* 不管是用那种方式，都需要涉及两个操作：获取HTML属性值，设置HTML属性值
* 一，获取HTML属性值：
* 语法： obj.attr (obj是元素名，是一个DOM对象，指的是getElementById()
* 等方法获取到的元素节点)
* 二，设置HTML属性值： obj.attr = \”值\”;
* 三，HTML属性操作(对象方法)
* 1，getAttribute()：获取元素的某个属性值
* 2，setAttribute()：设置元素的某个属性值,参数1：属性名 参数2：属性值
* 3，removeAttribute()：删除某个属性
* 4，hasAttribute()：判断元素是否含有某个属性
* 四，总结：
* 1，“对象属性方式”和“对象方法方式”都可以操作静态HTML的属性和动态DOM属性
* 2，只有“对象方法方式”才可以操作自定义属性
*
* 五，CSS属性操作：是指js操作一个元素的CSS样式
* 1，获取CSS属性值：getComputeStyle(obj).attr <==> getComputeStyle(obj)[\”attr\”]
* obj：DOM对象 attr：CSS属性名
* 2，设置CSS属性值
* (1)style对象：行内样式 语法：obj.style.attr=\”值\”
* (2)cssText方法
* 六，DOM遍历
* 1，查找父元素：obj.parentNode obj:DOM对象
* 2，查找子元素：
* (1)childNodes,firstChild,lastChild
* (2)children,firstElementChild,lastElementChild
* 注：childNodes：获取所有节点包括文本节点 children：获取所有元素节点，不包括文本节点
* 3，查找兄弟元素:
* (1)previousSibling：查找前一个兄弟节点
* (2)nextSibling：查找后一个兄弟节点
* (3)previousElementSibling：查找前一个兄弟元素节点
* (4)nextElementSibling：查找后一个元素节点
* 七，innerHTML与innerText
*/
//获取静态HTML中的属性值
window.onload = function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.onclick = function(){
alert(oBtn.id);
}
}
//获取动态HTML中的属性值
window.onload = function(){
var oInput = document.createElement(\”input\”);
oInput.id = \”submit\”;
oInput.type = \”button\”;
oInput.value = \”提交\”;
document.body.appendChild(oInput);
oInput.onclick = function(){
alert(oInput.id);
}
}
//获取单行文本框的值
window.onload = function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.onclick = function(){
var oTxt = document.getElementById(\”txt\”);
alert(oTxt.value);
//document.write(oTxt.value);
}
}
//获取单选框的值
window.onload = function(){
var oBtn = document.getElementById(\”btn\”);
var oFruit = document.getElementsByName(\”fruit\”);
oBtn.onclick = function(){
for(var i = 0; i < oFruit.length; i++){
if(oFruit[i].checked){
alert(oFruit[i].value);
}
}
}
}
//获取复选框的值
window.onload = function(){
var oBtn = document.getElementById(\”btn\”);
var oFruit = document.getElementsByName(\”fruit\”);
var str = \”\”;
oBtn.onclick = function(){
for(var i = 0; i < oFruit.length; i++){
if(oFruit[i].checked){
str +=oFruit[i].value;
}
}
alert(str);
}
}
//获取下拉列表的值
window.onload = function(){
var oBtn = document.getElementById(\”btn\”);
var oSelect = document.getElementById(\”select\”);
oBtn.onclick = function(){
alert(oSelect.value);
}
}
//设置属性值
window.onload = function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.onclick = function(){
oBtn.value = \”button\”;
document.write(oBtn.value);
}
}
//获取固有属性值
window.onload = function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.onclick = function(){
alert(oBtn.getAttribute(\”id\”));
}
}
//获取自定义属性值
window.onload = function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.onclick = function(){
//alert(oBtn.data);//oBtn.data是不能获取自定义属性值
alert(oBtn.getAttribute(\”data\”));
}
}
//获取自定义属性值
window.onload = function(){
var oTd = document.getElementsByTagName(\”td\”);
for(var i = 0;i < oTd.length; i++){
oTd[i].onclick = function(){
var oParent = this.parentNode;
oParent.style.color = \”white\”;
oParent.style.backgroundColor = \”red\”;
};
}
}
//childNodes与children的比较
window.onload = function(){
var oU1 = document.getElementById(\”list\”);
var childNodes = oU1.childNodes.length;
var children = oU1.children.length;
alert(\”childNodes的长度：\”+childNodes + \”\\n\” +\”children的长度：\”+children);
}
/*第十一章：事件基础
* 一，在js中一个事件分为三部分：
* 1，事件主角：是按钮还是div元素或是其它？
* 2，事件类型：是点击还是移动或其它？
* 3，事件过程：这个事件都发生了些什么？
* 二，js中常用的事件：
* 1，鼠标事件
* 2，键盘事件
* 3，表单事件
* 4，编辑事件
* 5，页面事件
* 三，js中事件调用方式：
* 1，在script标签中调用：指的是在<script><script/>标签内调用事件
* 语法： obj.事件名 = function(){};
* 2，在元素中调用：指的是直接HTML属性中调用事件
* 四，鼠标事件
* onclick 鼠标单击事件
* onmouseover 鼠标移入事件
* onmouseout 鼠标移出事件
* onmousedown 鼠标按下事件
* onmouseup 鼠标松开事件
* onmousemove 鼠标移动事件
* 五，键盘事件
* 1，键盘按下：onkeydown
* 2，键盘松开：onkeyup
* 注：指按下或松开的一瞬间，先有按下后有松开
* 键盘事件一般用途：表单操作和动画控制
* 六，表单事件
* 1，onfocus：获取焦点时触发的事件 onblur：获取失去焦点时触发的事件
* 注：只有超链接和表单元素（单选框，多选框，单行文本框，多行文本框，下拉列表）才有上述功能
* 备注：判断一个元素是否有焦点的方法：
* 打开一个页面后按tab键，能够选中的就是具有焦点特性的元素
* 焦点事件（onfocus，onblur）一般用于单行文本框和多行文本框
* 2，onselect：当我们选中单行/多行文本框中内容时就会触发该事件
* 3，onchange：常用于具有多个选项的表单元素：
* (1)单选框选择某一项时触发
* (2)多选框选择某一项时触发
* (3)下拉列表选择某一项时触发
* 4，submit（一般结合后端技术使用，此处暂时不管）
* 七，编辑事件(一般用于保护版权)
* 1，oncopy：可以用于页面内容被复制
* 2，onselectstart：可以用于防止页面内容被选取：本质上是防止页面内容被复制
* 3，oncontexmenu
* 八，页面事件
* 1，onload：表示文档加载完成后再执行的一个事件
* window.onload：一般用于在想要获取页面中某一个元素的时候才会用到
* 2，onbeforeunload：表示离开页面之前触发的一个事件
*/
//鼠标移入移出
window.onload = function(){
var oP = document.getElementById(\”content\”);
oP.onmouseover = function(){
this.style.color = \”red\”;
}
oP.onmouseout = function(){
this.style.color = \”yellow\”;
}
}
//鼠标按下松开
window.onload = function(){
var oDiv = document.getElementById(\”title\”);
var oBtn = document.getElementById(\”btn\”);
oBtn.onmousedown = function(){
oDiv.style.color = \”red\”;
}
oBtn.onmouseup = function(){
oDiv.style.color = \”blue\”;
}
oBtn.onmousemove = function(){
oDiv.style.color = \”green\”;
}
}
//统计输入字符的长度（键盘按下松开实验）
window.onload = function(){
var oTxt = document.getElementById(\”txt\”);
var oNum = document.getElementById(\”num\”);
oTxt.onkeyup = function(){
var str = oTxt.value;
oNum.innerHTML = str.length;
}
}
//统计输入字符的长度（键盘按下松开实验）
window.onload = function(){
var oTxt = document.getElementById(\”txt\”);
var oDiv = document.getElementById(\”content\”);
var myregex = /^[0-9]*$/;
oTxt.onkeyup = function(){
if(myregex.test(oTxt.value)){
oDiv.innerHTML = \”输入正确\”;
}
else{
oDiv.innerHTML = \”必续输入数字\”;
}
}
}
//搜索框（焦点的应用）
window.onload = function(){
var oSearch = document.getElementById(\”search\”);
oSearch.onfocus = function(){
if(this.value == \”小憨憨\”){
this.value = \”\”;
}
};
oSearch.onblur = function(){
if(this.value == \”\”){
this.value = \”小憨憨\”;
}
};
}
//focus方法:onfocus是一个属性
window.onload = function(){
var oTxt = document.getElementById(\”txt\”);
oTxt.focus();
}
//onselect事件
window.onload = function(){
var oTxt1 = document.getElementById(\”txt1\”);
var oTxt2 = document.getElementById(\”txt2\”);
oTxt1.onselect = function(){
alert(\”你选中了单行文本框中的内容\”);
}
oTxt2.onselect = function(){
alert(\”你选中了多行文本框中的内容\”);
}
}
//select方法：当使用搜索框时，每次点击搜索框，它就会帮我们自动选中文本框中的所有内容
window.onload = function(){
var oSearch = document.getElementById(\”search\”);
oSearch.onclick = function(){
this.select();
};
}
//onchange事件用于单选框
window.onload = function(){
var oFruit = document.getElementsByName(\”fruit\”);
var oP = document.getElementById(\”content\”);
for(var i = 0;i < oFruit.length; i++){
oFruit[i].onchange = function(){
if(this.checked){
oP.innerHTML = \”你选择的是: \”+this.value;
}
}
};
}
//onchange事件用于复选框
window.onload = function(){
var oFruit = document.getElementsByName(\”fruit\”);
var oSel = document.getElementById(\”sel\”);
for(var i = 0; i < oFruit.length; i++)
alert(oFruit[i].value);
oSel.onchange = function(){
if(this.checked){
for(var i = 0; i < oFruit.length; i++){
oFruit[i].checked = true;
}
}
else{
for(var i = 0; i < oFruit.length; i++){
oFruit[i].checked = false;
}
}
};
}
//onchange事件用于下拉列表
//选择下拉列表的某一选项时，触发的是onchange事件，而不是onselect事件；
onselect事件仅仅当选择文本框中内容时才会触发
window.onload = function(){
var oList = document.getElementById(\”list\”);
oList.onchange = function(){
var link = this.options[this.selectedIndex].value;
window.open(link);
};
}
//oncopy事件的应用
window.onload = function(){
document.body.oncopy =function(){
return false;
}
}
//onselectstart事件的应用
window.onload = function(){
document.body.onselectstart =function(){
return false;
}
}
//oncontexmenu事件的应用
window.onload = function(){
document.body.oncontextmenu =function(){
return false;
}
}
//onload,onbeforeunload事件的应用
window.onload = function(){
alert(\”doubi\”);
}
window.onbeforeunload = function(e){
e.returnValue = \”你准备离开页面\”;
}
/*第十二章:事件进阶
* 在js中想要给元素添加一个事件，有两种方式：
* 1，事件处理器：缺点：无法为一个元素添加多个相同事件
* 2，事件监听器：优点：事件处理器的缺点；(可以添加多个相同事件)
* 指定是使用addEventListener()方法为一个元素加事件（又称绑定事件）
* 语法：obj.addEventListener(type,fn,false)
* obj:DOM对象 type:是一个字符串，指的是事件类型，不需要加上on前缀
* fn:是一个函数名或一个匿名函数 false:表示事件冒泡阶段调用
* 3，解绑事件:obj.removeEventListener(type,fn,false)
* 4，event对象：当一个事件发生的时候，这个事件有关信息都会临时保存到一个指定的地方，这个
* 地方就是event对象。对于每一个事件，都有一个对应的event对象。
* event对象的常用属性：
* type: 事件类型
* keyCode: 键码值
* shiftKey: 是否按下shift键
* ctrlKey: 是否按下ctrl键
* altKey: 是否按下alt键
*
* keyCode：获取按下的哪个键；语法：event.keyCode
* 返回一个数值，常用的键值对照表：
* W（上） 87
* S（上） 83
* A（上） 65
* D（上） 68
* 上箭头 38
* 下箭头 40
* 左箭头 37
* 右箭头 39
*
* this:
* this是极其复杂，在事件操作中，可以理解：哪个DOM对象（元素节点）调用了
* this所在函数，那么this指向的就是哪个DOM对象
*/
//例题
window.onload = function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.addEventListener(\”click\”, alterMes, false);
function alterMes(){
alert(\”javascript\”);
}
}
//上述等价于下面程序
window.onload = function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.addEventListener(\”click\”, function(){
alert(\”javascript\”);}, false);
}
//获取事件的类型
window.onload = function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.onclick = function(e){//e是一个变量名存储一个event对象
//实际上每次调用一个事件的时候，js都会默认给这个事件函数加上一个隐藏的参数
//这个参数就是event对象，一般来说，event事件是作为事件函数的第一个参数传入
alert(e.type);
}
}
//禁止shift，alt,ctrl键
window.onload = function(){
document.onkeydown = function(e){
if(e.shiftKey || e.altKey || e.ctrlKey){
alert(\”禁止使用shift，alt,ctrl键\”)
}
}
}
//获取上下左右方向键
window.onload = function(){
var oSpan = document.getElementsByTagName(\”span\”)[0];
window.addEventListener(\”keydown\”,doubi,false);
function doubi(e){
switch(e.keyCode)
{
case 38:
case 87:oSpan.innerHTML = \”上\”;break;
case 39:
case 68:oSpan.innerHTML = \”右\”;break;
case 40:
case 83:oSpan.innerHTML = \”下\”;break;
case 65:
case 37:oSpan.innerHTML = \”左\”;break;
default:oSpan.innerHTML = \”\”;break;
}
}
}
/*第十三章：window对象
* 在js中一个浏览器的窗口就是一个window对象。实际上每次打开一个页面时，浏览器都会自动为这个页面
* 创建一个window对象。window对象存放了这个页面的所有信息。
* window对象下的子对象：
* document 文档对象，用于操作页面元素
* title
* body
* forms
* images
* links
* location 地址对象，用于操作URL地址
* navigator 浏览器对象，用于获取浏览器版本信息
* history 历史对象，用于操作浏览历史
* screen 屏幕对象，用于操作屏幕宽度高度
* 注：location等对象又称为BOM（browser object module浏览器对象模型）
* 上述子对象可以看成window对象的属性
*
* window对象常用的方法：
* alert() 提示对话框
* confirm() 判断对话框
* prompt() 输入对话框
* open() 打开窗口
* close() 关闭窗口
* setTimeout() 开启一次性定时器
* clearTimeout() 关闭一次性定时器
* setInterval() 开启重复性定时器
* clearInterval() 关闭重复性定时器
* 注：对于window对象来说，不管它的属性还是方法，都可以省略window前缀
*
* 相关操作：
* 1，窗口操作
* (1)打开窗口：语法：window.open(url,target)
* (2)关闭窗口：语法：window.close()
* 2，对话框：
* (1)alert(\”提示文字\”)：一般仅仅用于提示文字，在其换行使用：\”\\n\”;无返回值
* (2)confirm(\”提示文字\”)：用于不仅提示文字，还供确认;返回布尔值
* (3)prompt(\”提示文字\”)：不仅提示文字，还能返回一个字符串
* 3，定时器
* (1)setTimeout(code,time)
* 其中code：一段代码或一个函数或一个函数名 time：时间，单位ms，表示要过多长时间才执行code中的代码
* (2)clearTimeout()
* (3)setInterval(code,time)
* (4)clearInterval()
* 4，location对象
* location对象的属性
* href 当前页面地址 作用：获取或设置当前页面的地址
* search 当前页面地址？后面的内容 作用：获取或设置当前页面的地址？后面的内容
* 地址？后面的内容也叫做查询字符串(querystring)，一般用于数据库查询用的，而且大量用到
* hash 当前页面地址#后面的内容 作用：获取或设置当前页面的地址#后面的内容
* #一般用于锚点链接
* 5，navigator对象：用于获取浏览器的类型
* 语法：window.navigator.userAgent
*/
//举例
window.onload = function(){
var oBtn = document.getElementById(\”btn\”);
oBtn.onclick = function(){
window.open(\”http://www.baidu.com\”,\”_blank\”);//在新窗口打开
window.open(\”http://www.baidu.com\”,\”_self\”);//在当前窗口打开
}
}
//操作空白窗口中的元素
window.onload = function(){
var oBtn = document.getElementsByTagName(\”input\”);
var opener = null;
oBtn[0].onclick = function(){
opener = window.open();
var strHtml = \'<!DOCTYPE html>\\
<html>\\
<head>\\
<title></title>\\
</head>\\
<body>\\
<div>小憨憨</div>\\
</body>\\
</html>\’;
opener.document.write(strHtml);
};
oBtn[1].onclick = function(){
var oDiv = opener.document.getElementsByTagName(\”div\”)[0];
oDiv.style.fontWeight = \”bold\”;
oDiv.style.color = \”hotpink\”;
};
}
//confirm对话框的使用
window.onload = function(){
var oBtn = document.getElementById(\”btn1\”);
oBtn.onclick = function(){
if(confirm(\”确定要跳转到首页吗?\”)){
window.location.href = \”http://www.baidu.com\”;
}else{
document.write(\”取消\”);
}
};
}
//prompt对话框的使用
window.onload = function(){
var oBtn = document.getElementById(\”btn1\”);
oBtn.onclick = function(){
var name = window.prompt(\”请输入您的名字:\”);
document.write(\”欢迎来到<strong>\”+name+\”</strong>\”);
};
}
//setTimeout()的使用
window.onload = function(){
setTimeout(\’alert(\”doubi\”)\’, 2000);
}
//setTimeout()的使用,其中code是一个函数
window.onload = function(){
setTimeout(\’alert(\”doubi\”)\’, 2000);
}
////setTimeout()的使用,其中code是一个函数名
window.onload = function(){
setTimeout(alertMes, 2000);
function alertMes(){
alert(\”doubixiaohanhan\”);
}
}
//clearTimeout()的使用
window.onload = function(){
var oBtn = document.getElementsByTagName(\”input\”);
var timer = null;
oBtn[0].onclick = function(){
//alert(\”你已点击开始定时按钮\”);
timer = setTimeout(alertMes, 5000);
function alertMes(){
alert(\”doubixiaohanhan\”);
}
};
oBtn[1].onclick = function(){
clearTimeout(timer);
}
}
//setInterval()的使用
var n = 10;
window.onload = function(){
var t = setInterval(countdown,1000);
};
function countdown(){
if(n > 0){
n—;
document.getElementById(\”num\”).innerHTML = n;
}
}
//setInterval()的使用,在图片轮播开发中特别有用
window.onload = function(){
var oBtn = document.getElementsByTagName(\”input\”);
var oDiv = document.getElementsByTagName(\”div\”)[0];
var colors = [\”red\”,\”yellow\”,\”blue\”,\”green\”,\”purple\”,\”orange\”];
var time = null;
var i = 0;
oBtn[0].onclick = function(){
clearTimeout(time);
time = setInterval(function(){
oDiv.style.backgroundColor = colors[i];
i++;
i = i%colors.length;
},1000);
};
oBtn[1].onclick = function(){
clearInterval(time);
};
}
//href的使用
window.onload = function(){
var url = window.location.href;
document.write(\”当前页面地址：\”+ url);
window.setTimeout(code,3000);
function code(){
url = window.location.href = \”http://www.baidu.com\”;
window.open(url);
};
}
//navigator的使用
window.onload = function(){
//indexOf(用于查找某个字符串在字符串中首次出现的位置，如果找不到返回-1)
if(window.navigator.userAgent.indexOf(\”MSIE\”) != –1){
alert(\”这是IE浏览器\”);
}
else if(window.navigator.userAgent.indexOf(\”Chrome\”) != –1){
alert(\”这是谷歌浏览器\”);
}
else if(window.navigator.userAgent.indexOf(\”Firefox\”) != –1){
alert(\”这是火狐浏览器\”);
}
else;
}
/*第十四章：document对象
* 浏览器会为每个窗口内的HTML页面自动创建一个document对象
* 一，document对象常用的属性
* document.title 获取文档的title
* document.body 获取文档的body
* document.forms 获取文档的forms
* document.images 获取文档的images
* document.links 获取文档的links
* document.cookie 获取文档的cookie
* document.URL 获取文档的URL
* document.referrer 获取文档的referrer:获取用户在访问当前页面
* 之前所在的页面地址，可以统计用户都是通过什么方式来访问页面的
* 其中：使用document.getElementByTagName(\”forms/img/a\”)操作
* forms、images、links
* 二，document对象常用的方法
* document.getElementById() 通过id获取元素
* document.getElementByTagName() 通过标签名获取元素
* document.getElementByClassName() 通过class获取元素
* document.getElementByName() 通过name获取元素
* document.querySelector() 通过选择器获取元素，只获取第一个
* document.querySelectorAll() 通过选择器获取元素，获取所有
* document.createElement() 创建元素节点
* document.createTextNode() 创建文本节点
* document.write() 输出内容
* document.writeln() 输出内容并换行
*/
//获取url
window.onload = function(){
var url = document.URL;
document.write(url);
}
//输出内容并换行
window.onload = function(){
var url = document.URL;
document.writeln(url);
document.writeln(\”doubixiaohanhan\”);
}
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
