目录
一 in操作符
- 判断属性属于对象
var mycar = {make: "Honda", model: "Accord", year: 1998};
//注意，属性名必须是字符串形式，因为make不是一个变量
if ( "make" in mycar ){
document.write('true');
}
else{
document.write('false'); // 显示true
}
- for in遍历对象属性
var mycar = {make: "Honda", model: "Accord", year: 1998};
for(var p in mycar){//p是属性名
console.log(p + ': ' + make[p]);
}
- in可以用来进行判断
if ( foo == 'bar' || foo == 'foobar' || foo == 'foo' )
{
//...
}
//就可以写成：
if ( foo in { 'bar':'', 'foobar':'', 'foo':'' } )
{
//...
}
- 尽量不要对数组对象使用for in遍历
二 函数的创建方式
函数声明
/*
* 使用 函数声明 来创建一个函数
* 语法：
* function 函数名([形参1,形参2...形参N]){
* 语句...
* }
*/
function fun2(){
console.log("这是我的第二个函数~~~");
alert("哈哈哈哈哈");
document.write("~~~~(>_<)~~~~");
}
函数表达式
/*
* 使用 函数表达式 来创建一个函数
* var 函数名 = function([形参1,形参2...形参N]){
* 语句....
* }
*/
var fun3 = function(){
console.log("我是匿名函数中封装的代码");
};
fun3();
方法
函数也可以称为对象的属性，
如果一个函数作为一个对象的属性保存，,那么我们称这个函数时这个对象的方法.调用这个函数就说调用对象的方法（method）
立即执行函数
函数定义完，立即被调用，这种函数叫做立即执行函数。立即执行函数往往只会执行一次
前面的括号表示里面是一个整体
(function(a,b){
console.log("a = "+a);
console.log("b = "+b);
})(123,456);
三 声明提前
变量的声明提前
使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），但是如果声明变量时不适用var关键字，则变量不会被声明提前
函数的声明提前
使用函数声明形式创建的函数 function 函数(){}.它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数 。使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用
四 作用域
作用域指一个变量的作用的范围
在JS中一共有两种作用域：
- 全局作用域
直接编写在script标签中的JS代码，都在全局作用域- 全局作用域在页面打开时创建，在页面关闭时销毁
- 在全局作用域中有一个全局对象
window - 创建的变量都会作为
window对象的属性保存
- 函数作用域
- 在函数作用域中可以访问到全局作用域的变量
- 当在函数作用域操作一个变量时，它会
先在自身作用域中寻找，如果有就直接使用.如果没有则向上一级作用域中寻找，直到找到全局作用域.如果全局作用域中依然没有找到，则会报错ReferenceError - 在函数作用域
也有声明提前的特性。使用var关键字声明的变量，会在函数中所有的代码执行之前被声明;函数声明也会在函数中所有的代码执行之前执行 - 在函数中，不是用var声明的变量都会成为全局变量.因为不写var，就是相当于用
window.xxx声明
五 this
解析器在调用函数每次都会向函数内部传递进一个隐含的参数.这个隐含的参数就是this，this指向的是一个对象
这个对象我们称为函数执行的 上下文对象
根据函数的调用方式的不同，this会指向不同的对象
- 以函数的形式调用时，this永远都是window
- 以
方法的形式调用时，this就是调用方法的那个对象 - 构造函数中，this就是新建的对象
六 原型-prototype
我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype(说明函数就有原型)，这个属性对应着一个对象，这个对象就是我们所谓的原型对象
如果函数作为普通函数调用prototype没有任何作用
当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，该属性指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
作用
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象。我们可以将对象中共有的内容，统一设置到原型对象中
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用
//向MyClass的原型中添加属性a
MyClass.prototype.a = 123;
//向MyClass的原型中添加一个方法
MyClass.prototype.sayHello = function(){
alert("hello");
};
hasOwnProperty()
使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性,用该方法只有当对象自身中含有属性时，才会返回true
原型还有原型
原型对象也是对象，所以它也有原型.
当我们使用一个对象的属性或方法时，会现在自身中寻找，
- 自身中如果有，则直接使用，
- 如果没有则去原型对象中寻找，如果原型对象中有，则使用，
- 如果没有则去
原型的原型中寻找,直到找到Object对象的原型， Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined
七 数组
数组（Array）
- 数组也是一个对象
- 它和我们普通对象功能类似，也是用来存储一些值的
- 不同的是普通对象是使用字符串作为属性名的， 而数组时使用数字来作为索引操作元素
索引：从0开始的整数就是索引
组中也可以放数组，如下这种数组我们称为二维数组
arr = [[1,2,3],[3,4,5],[5,6,7]];
console.log(arr[1]);
增删的四个方法
push
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
/*
* push()
* - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
* - 可以将要添加的元素作为方法的参数传递，
* 这样这些元素将会自动添加到数组的末尾
* - 该方法会将数组新的长度作为返回值返回
*/
var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
pop
/*
* pop()
* - 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
*/
result = arr.pop()
unshift
/*
* unshift()
* - 向数组开头添加一个或多个元素，并返回新的数组长度
* - 向前边插入元素以后，其他的元素索引会依次调整
*/
//console.log(arr);
arr.unshift("牛魔王","二郎神");
shift
/*
* shift()
* - 可以删除数组的第一个元素，并将被删除的元素作为返回值返回
*/
result = arr.shift();
foreach
用到了回调函数
/*
* 一般我们都是使用for循环去遍历数组，
* JS中还为我们提供了一个方法，用来遍历数组
* forEach()
* - 这个方法只支持IE8以上的浏览器
* IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach
* 还是使用for循环来遍历
*/
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
/*
* forEach()方法需要一个函数作为参数
* - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
* - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
* 以实参的形式传递进来，我们可以来定义形参，来读取这些内容
* - 浏览器会在回调函数中传递三个参数：
* 第一个参数，就是当前正在遍历的元素
* 第二个参数，就是当前正在遍历的元素的索引
* 第三个参数，就是正在遍历的数组
*
*/
arr.forEach(function(value , index , obj){
console.log(value);
});
slice和splice
slice类似java中String的subString()
/*
* slice()
* - 可以用来从数组提取指定元素
* - 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
* - 参数：
* 1.截取开始的位置的索引,包含开始索引
* 2.截取结束的位置的索引,不包含结束索引
* - 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
* - 索引可以传递一个负值，如果传递一个负值，则从后往前计算
* -1 倒数第一个
* -2 倒数第二个
*/
var result = arr.slice(1,4);
result = arr.slice(3);
result = arr.slice(1,-2);
删除的同时还可以新增(可以用来指定位置删除或新增,)
/*
* splice()
* - 可以用于删除数组中的指定元素
* - 使用splice()会影响到原数组，会将指定元素从原数组中删除
* 并将被删除的元素作为返回值返回
* - 参数：
* 第一个，表示开始位置的索引
* 第二个，表示删除的数量
* 第三个及以后。。
* 可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
*
*/
arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
var result = arr.splice(3,0,"牛魔王","铁扇公主","红孩儿");
剩余方法
主要有合并，join、排序、倒转
var arr = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["白骨精","玉兔精","蜘蛛精"];
var arr3 = ["二郎神","太上老君","玉皇大帝"];
/*
* concat()可以连接两个或多个数组，并将新的数组返回
* - 该方法不会对原数组产生影响
*/
var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");
/*
* join()
* - 该方法可以将数组转换为一个字符串
* - 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
* - 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
* 如果不指定连接符，则默认使用,作为连接符
*/
arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
result = arr.join("@-@");
/*
* reverse()
* - 该方法用来反转数组（前边的去后边，后边的去前边）
* - 该方法会直接修改原数组
*/
arr.reverse();
//console.log(arr);
arr = ["b","d","e","a","c"];
/*
* sort()
* - 可以用来对数组中的元素进行排序
* - 也会影响原数组，默认会按照Unicode编码进行排序
*/
arr.sort();
//arr.reverse();
/*
* 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，
* 所以对数字进排序时，可能会得到错误的结果。
*
* 我们可以自己来指定排序的规则
* 我们可以在sort()添加一个回调函数，来指定排序规则，
* 回调函数中需要定义两个形参,
* 浏览器将会分别使用数组中的元素作为实参去调用回调函数
* 使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
* - 浏览器会根据回调函数的返回值来决定元素的顺序，
* 如果返回一个大于0的值，则元素会交换位置
* 如果返回一个小于0的值，则元素位置不变
* 如果返回一个0，则认为两个元素相等，也不交换位置
*
* - 如果需要升序排列，则返回 a-b
* 如果需要降序排列，则返回b-a
*/
arr = [5,4,2,1,3,6,8,7];
arr.sort(function(a,b){
//前边的大
/*if(a > b){
return -1;
}else if(a < b){
return 1;
}else{
return 0;
}*/
//升序排列
//return a - b;
//降序排列
return b - a;
});
console.log(arr);
八 js的正则表达式
//创建正则表达式的对象
/*
* 使用typeof检查正则对象，会返回object
* var reg = new RegExp("a"); 这个正则表达式可以来检查一个字符串中是否含有a
* 在构造函数中可以传递一个匹配模式作为第二个参数，
* 可以是
*
*/
var reg = new RegExp("ab","i");
语法： var 变量 = new RegExp("正则表达式","匹配模式");
匹配模式:
- i 忽略大小写
- g 全局匹配模式
字面量来创建正则表达式
/*
* 语法：var 变量 = /正则表达式/匹配模式
*/
//var reg = new RegExp("a","i");
var reg = /a/i;
test
/*
* 正则表达式的方法：
* test()
* - 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，
* 如果符合则返回true，否则返回false
*/
var result = reg.test(str);
语法
//创建一个正则表达式，检查一个字符串中是否有a或b
/*
* 使用 | 表示或者的意思
*/
reg = /a|b|c/;
/*
* 创建一个正则表达式检查一个字符串中是否有字母
*/
//reg = /a|b|c|d|e|f|g/;
/*
* []里的内容也是或的关系
* [ab] == a|b
* [a-z] 任意小写字母
* [A-Z] 任意大写字母
* [A-z] 任意字母
* [0-9] 任意数字
*/
reg = /[A-z]/;
//检查一个字符串中是否含有 abc 或 adc 或 aec
reg = /a[bde]c/;
/*
* [^ ] 除了
*/
reg = /[^ab]/;
reg = /[^0-9]/;
开始和结尾
/*
* 检查一个字符串中是否以a开头
* ^ 表示开头
* $ 表示结尾
*/
reg = /^a/; //匹配开头的a
reg = /a$/; //匹配结尾的a
量词
- 通过量词可以设置一个内容出现的次数
- 量词只对它前边的一个内容起作用
- {n} 正好出现n次
- {m,n} 出现m-n次
- {m,} m次以上
- + 至少一个，相当于{1,}
- * 0个或多个，相当于{0,}
- ? 0个或1个，相当于{0,1}
常用字符
- \w
- 任意字母、数字、_ [A-z0-9_]
- \W
- 除了字母、数字、_ [^A-z0-9_]
- \d
- 任意的数字 [0-9]
- \D
- 除了数字 [^0-9]
- \s
- 空格
- \S
- 除了空格
- \b
- 单词边界
- \B
- 除了单词边界
reg = /\w/;
reg = /\W/;
reg = /\d/;
reg = /\D/;
reg = /\s/;
reg = /\S/;
配合字符串使用
var str = "1a2b3c4d5e6f7";
/*
* split()
* - 可以将一个字符串拆分为一个数组
* - 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
* - 这个方法即使不指定全局匹配，也会全都插分
*/
/*
* 根据任意字母来将字符串拆分
*/
var result = str.split(/[A-z]/);
//console.log(result);
/*
* search()
* - 可以搜索字符串中是否含有指定内容
* - 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
* - 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
* - serach()只会查找第一个，即使设置全局匹配也没用
*/
str = "hello abc hello aec afc";
/*
* 搜索字符串中是否含有abc 或 aec 或 afc
*/
result = str.search(/a[bef]c/);
//console.log(result);
/*
* match()
* - 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
* - 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
* 我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
* 可以为一个正则表达式设置多个匹配模式，且顺序无所谓
* - match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
*
*
*/
str = "1a2a3a4a5e6f7A8B9C";
result = str.match(/[a-z]/ig);
//console.log(result[2]);
/*
* replace()
* - 可以将字符串中指定内容替换为新的内容
* - 参数：
* 1.被替换的内容，可以接受一个正则表达式作为参数
* 2.新的内容
* - 默认只会替换第一个
*/
//result = str.replace(/[a-z]/gi , "@_@");
result = str.replace(/[a-z]/gi , "");
九 DOM
什么是DOM
什么是模型
节点
属性值
事件
事件对象
- 当事件的响应函数被触发时，浏览器每次都会将
一个事件对象作为实参传递进响应函数, - 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向
- 在IE8中，响应函数被触发时，浏览器不会传递事件对象， 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
冒泡
所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
//为s1绑定一个单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function(event){
event = event || window.event;
alert("我是span的单击响应函数");
//取消冒泡
//可以将事件对象的cancelBubble设置为true，即可取消冒泡
event.cancelBubble = true;
};
注意
通过冒泡，我们可以得出一个结论。那就是我们在页面中的事件，都是由最接近的一个元素触发
什么意思呢？就是我们可能会以为我们给document绑定了一个onclick方法。那我们只要在任何地方点击都会触发这个方法(我们会想当然的认为所有元素都在document内)。这是错误的！！！
因为文档对象模型中将页面中的元素都抽象成了一个对象，所以我理解成了类似自治区概念.所有事件的触发只在最近的一个元素完成。祖先级元素要想触发，是由冒泡机制实现的
委派模式
有事我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的(通过js)
我们可以尝试将其绑定给元素的共同的祖先元素
指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
事件的绑定
使用 对象.事件 = 函数 的形式绑定响应函数，
它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
addEventListener()
通过这个方法也可以为元素绑定响应函数
参数：
1. 事件的字符串，不要on
2. 回调函数，当事件触发时该函数会被调用
3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
这个方法不支持IE8及以下的浏览器
btn01.addEventListener("click",function(){
alert(1);
},false);
传播
捕获:和冒泡相反，从外往里捕获
BOM
BOM
浏览器对象模型,BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象，用来完成对浏览器的操作
BOM对象
- Window
- 代表的是整个浏览器的窗口，同时window也是网页中的全局对象 - Navigator
- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器;由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了 - Location
- 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面 - History
- 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
而且该操作只在当次访问时有效 - Screen
- 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用
十 定时器
/*
* setInterval()
* - 定时调用
* - 可以将一个函数，每隔一段时间执行一次
* - 参数：
* 1.回调函数，该函数会每隔一段时间被调用一次
* 2.每次调用间隔的时间，单位是毫秒
*
* - 返回值：
* 返回一个Number类型的数据
* 这个数字用来作为定时器的唯一标识
*/
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
if(num == 11){
//关闭定时器
clearInterval(timer);
}
},1000);
//console.log(timer);
//clearInterval()可以用来关闭一个定时器
//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
//clearInterval(timer);
};
类的操作
通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "yellow";
优化方式
直接修改他的class属性
//修改box的class属性
/*
* 我们可以通过修改元素的class属性来间接的修改样式
* 这样一来，我们只需要修改一次，即可同时修改多个样式，
* 浏览器只需要重新渲染页面一次，性能比较好，
* 并且这种方式，可以使表现和行为进一步的分离
*/
//box.className += " b2";
//addClass(box,"b2");
//alert(hasClass(box,"hello"));
//removeClass(box,"b2");
toggleClass(box,"b2");
//定义一个函数，用来向一个元素中添加指定的class属性值
/*
* 参数:
* obj 要添加class属性的元素
* cn 要添加的class值
*
*/
function addClass(obj , cn){
//检查obj中是否含有cn
if(!hasClass(obj , cn)){
obj.className += " "+cn;
}
}
/*
* 判断一个元素中是否含有指定的class属性值
* 如果有该class，则返回true，没有则返回false
*
*/
function hasClass(obj , cn){
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\bb2\b/;
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}
/*
* 删除一个元素中的指定的class属性
*/
function removeClass(obj , cn){
//创建一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
//删除class
obj.className = obj.className.replace(reg , "");
}
/*
* toggleClass可以用来切换一个类
* 如果元素中具有该类，则删除
* 如果元素中没有该类，则添加
*/
function toggleClass(obj , cn){
//判断obj中是否含有cn
if(hasClass(obj , cn)){
//有，则删除
removeClass(obj , cn);
}else{
//没有，则添加
addClass(obj , cn);
}
}
参考
- 尚硅谷js教程
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
