js基础

第一章

1. 字面量和变量
   字面量:都是一些不可改变的值（常量）

2. 字符串
   在JS中引用字符串需要使用引号引起来
   使用双引号或单引号都可以，但是不要混着用
   引号不能嵌套，双引号中不能放双引号，单引号中不能放单引号
   例子：str=‘我说:“今天天气真不错！” ’
   在字符串中我们可以使用\作为转义字符， 当表示一些特殊符号时可以使用\进行转义.
   例子：str=“我说:斜杠"今天天气真不错斜杠”"
   总结：
   斜杠" 表示"
   斜杠’ 表示’
   斜杠n 表示换行 表示：str=“我说:斜杠"今天天气斜杠n真不错斜杠”"
   斜杠t 制表符
   打印斜杠:可以写成’'斜杠斜杠",先转义后打印出
   3. number
   可以使用一个运算符typeof来检查一个变量的类型
   例子：var a=123;
   console.log(typeof a);
   如果使用Number表示的数字超过了最大值，则会返回一个Infinity(正无穷)，-Infinity(负无穷)
   NaN是一个特殊的数字，表示Not A Number,
   var a=NaN;
   console.log(typeof a);//返回的是number

   4. 布尔值

   5. Null和Undefined
   null类型的值只有一个，就是null
   null这个值专门用来表示一个为空的对象
   使用typeof检查一个null值时，会返回object
   例子：
   var a=null;
   console.log(typeof a);//返回object
   undefined类型的值只有一个，就undefined
   当声明一个变量，但是并不给变量赋值时，它的值就是undefined
   当变量为undefined的时候，返回的类型也是undefined
   var b=undefined;
   console.log(typeof b）//返回的是undefined

   6. 总结
   在JS中最基本的6种数据类型
   String 字符串
   Number 数值
   Boolean 布尔值
   Null 空值
   Undefined 未定义
   object 对象

第二章

1. 强制类型转换-String
方式一：
-调用被转换数据类型的toString()方法
-该方法不会影响到原变量， 它会将转换的结果返回
-但是注意:null和undefined这两个值没有toString(),如果调用他们的方法，会报错
var a=123;
var b=a.toString();
console.log(typeof b);//返回类型是String
方式二：
-调用String()函数
var a=123;
var b=String(a);
console.log( typeof b);//返回类型是String
a=null;
a=String(a);
console.log(typeof a);//返回类型是null
console.log(a);//返回"null"
a=undefined
a=String(a);
console.log(typeof a);//返回类型是undefined
console.log(a);//返回"undefined"

2. 强制类型转换-Number
方式一：
使用Number()函数
字符串—>数字
1.如果是存数字的字符串，则直接将其转换为数字
2.如果字符串中由非数字的内容，则将其转换为NaN
3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
var a=“123”
var b=Number(a);
console.log(b);//返回的是123
var a=“123av”
var b=Number(a);
console.log(b);//返回的是NaN
var a=" "
var b=Number(a);
console.log(b);//返回的是0
布尔量—>数字
var a=false;
a=Number(a);
console.log(a);//返回的是0;
var a=true;
a=Number(a);
console.log(a);//返回的是1;
Null—>数字//返回的是0；
undefined -->数字//返回的是NaN
方式二：
-parseInt()//把字符串转换为一个整数
-parseFloat()//把一个字符串转换为一个浮点数
var a=“123px”;
a=parseInt(a)//返回123
console.log(a)//返回的是123
console.log(typeof a);//返回的是number
var a=“1234a567px”;
a=parseInt(a);
console.log(a);//返回的是1234，只取有效部位
console.log(typeof a);//返回的是Number
var a=true;
a=parseInt(a);
console.log(a);//返回NaN
console.log(typeof a);//返回的是number
同理parseFloat()

3. 其他进制的数字
var a=0x123;//16进制数字
var b=0123//8进制数字
var c=0b10;//二进制数字
var a=“070”;
a=parseInt(a,10);//可以在parseInt()中传递一个第二参数，来指定数字的进制

4. 转换为Boolean
var a=123;或var a=-123;
a=Boolean(a);
console.log(typeof a);//返回boolean
console.log(a);//返回true
其他情况：
a=0;//false
a=Infinity;//true
a=NaN;//false
a=“true"或者a=“false”//返回true
a=“错误”//返回true
a=”"//返回false
a=" "//返回true
a=null;//返回false
a=undefined;//返回false

第三章

1. 算数运算符
result=true+1;//返回2
result=true+false;//返回1
result=2+null;//返回2
result=2+NaN;//返回NaN
result=“123”+“456”//返回"123456"
result=“123”+1//返回"1231"
result=“hello”+true;//返回"hellotrue"
//我们可以用以上的特点，将一个任意的数据类型转换为String
我们只需要为任意的数据类型+一个"“即可转换为String
var c=123;
c=c+”";
console.log(typeof c);//返回string
console.log©;//返回"123"
接下来：
result=100-true;//返回99
result=100-“1”;//返回99
result=2*‘8’;//返回16
result=2undefined;//返回NaN
result=2null;//返回0
result=3/2;//返回1.5
我们可以利用这一个特点做隐士的类型转换
可以通过为一个值-0或*1或/1来将其转换为Number
var d=“123”;
d=d-0;
console.log(typeof d);//返回number
console.log(d);//123

2. 自增和自减
无论a++ 还是++a 都会立即使原变量的值自增1
不同的是a++和++a的值不同
a++的值等于原变量的值(自增前的值)
例如：
var a=1;
var b=a++;
console.log(b)//返回1
console.log(a)//返回2
或
var a=1;
var b=++a；
console.log(a);//返回2
console.log(b);//返回2

3. 逻辑运算符
对于非布尔值进行与或运算时，会将其转换为布尔值，然后再运算，如果2个值都为true,返回后面一个;如果2个值都是false,则返回前面的一个。
var result=1&&2；//返回2；
var result=0&&2；//返回0；因为0是false
//true || true
//如果第一个值为true,则会返回第一个值
result=2 || 1；返回2
reuslt=2||NaN;返回2
//如果第一个值为false,则会返回第二个值
result=NaN|| 1;//返回1
result=NaN || 0;//返回0

4. 关系运算符
对于非数值进行比较时，会将其转换为数字然后进行比较
如果符号两侧的值都是字符串时， 不会将其转换为数字进行 比较，而会分别比较字符串中字符的Unicode编码
5. 相等运算符
console.log(104);//false
console.log(“1"1);//true
console.log(true"1”);//true
console.log(null0);//false
console.log(undefinednull);//true
//NaN不和任何值相等，包括本身
console.log(NaNNaN);//false
6. 条件运算符
条件运算符也叫三元运算符
语法：
条件表达式？语句1:语句2
var a=30;
var b=43;
var c=50;
var max=a>b?a:b;
console.log(“max=”+max);
注：如果条件的表达式的值是非布尔值，会将其转换为布尔值，然后进行条件的判断

第四章

1. Switch
例子：
var score=55;
switch(parseInt(score/10)){
case 10:
case 9:
case 8:
case 7:
case 6:
console.log(“合格”);
break;
default:
console.log(“不合格”);
break;
}

第五章

1. 对象的基本操作
var obj=new object();
obj.name=“孙悟空”;
obj.gender=“男”;
obj.age=18;
console.log(obj.name)//返回孙悟空
console.log(obj.gender)//返回男
console.log(obj.age)//返回18
//删除对象属性
delete obj.name;
console.log(obj.name);//返回"undefined"
//如果使用特殊的属性名，不能采用.的方式来操作
需要使用另一种方式，
语法:对象[“属性名”]=属性值
obj[“123”]=789;
console.log(obj[“123”]);//返回789
//函数也可以作为对象的属性值
obj.sayName=function(){
console.log(obj.name);
}
console.log(obj.sayName)//返回的是function(){…}
obj.sayName()//返回的是孙悟空
//枚举对象中所有属性
var obj={
name:“孙悟空”,
age:18,
gender:“男”,
address:“花果山”
}
for(var n in obj){
console.log(“属性名:”+n);
console.log(“值:”+obj[n]);
}
//使用工厂制作出不同的对象
function createPerson(name,age,gender){
var obj=new Object();
obj.name=name;
obj.age=age;
obj.gender=gender;
obj.sayName=function(){
alert(this.name);
};
return obj;
}
var obj2=createPerson(“猪八戒”，28，“男”);
var obj3=createPerson(“孙悟空”，28，“男”);
//构造函数(首字母大写，规范)
构造函数和普通函数的区别就是调用方式的不同
普通函数是直接调用的，而构造函数需要使用new关键字来调用
构造函数的执行流程：
1.立刻创建一个新的对象
2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
function Person(){
this.name=“孙悟空”;
this.age=18；
this.gender=“男”;
this.sayName=function(){
alert(this.name);
}
}
var per=new.Person();
console.log(per.name)//返回的就是孙悟空
//注意如上构造函数有个小bug,就是你每次调用一次sayName,都会创建出一个新的sayName方法，这样就会占用很大的空间
修改成如下：
function fun(){
alert(“hello”+this.name);
}
function Person(name,age,gender){
this.name=name;
this.age=age;
this.gender=gender;
this.sayName=fun;
}
var per=new Person(“孙悟空”,18,“男”);
var per2=new Person(“猪八戒”，28，“男”);
console.log(per.sayName=per2.sayName);//返回的是true;
//注意这样就会影响到全局作用域，在程序开发的时候，不同的程序员有可能会用同一个函数名，到时代码出错，所以使用原型对象，原型对象的讲解第2小节。
只需将上面的fun()函数修改即可
//向原型中添加sayName方法
Person.prototype.sayName=function(){
alert(“Hello大家好，我是:”+this.name);
};
//这样就不会影响到全局

2. 原型对象
原型prototype
我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象，这个对象就是我们所谓的原型对象
如果函数作为普通函数调用prototype没有任何作用
function MyClass(){

}
console.log(MyClass.prototype);
当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
function MyClass(){

}
var mc=new MyClass();
console.log(mc.proto);
console.log(MyClass.prototype==mc.proto)//返回的是true
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。
以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。
function MyClass(){

}
MyClass.prototype.a=123;
MyClass.prototype.sayHello=function(){
alert(“hello”);
}
var mc=new MyClass();
var mc2=new MyClass();
console.log(mc.a)//返回的是123
若mc.a=“1234”
console.log(mc.a)//返回的是1234
//注意不同的构造函数其访问原型对象是不一样的。

第六章

1. 立即执行函数
立即执行函数只会执行一次
（function(){
alert(“1212”);
})();//返回的结果是1212
//第二种方式
(function(a,b){
console.log(“a=”+a);
console.log(“b=”+b);
})(3,4);//返回的结果是a=3,b=4

第七章

1. this的使用

解析器在调用函数每次都会向函数内部传递进一个隐含的参数，
这个隐含的参数就是this,this指向的是一个对象，
这个对象我们称为函数执行的上下文对象
function fun(a,b){
console.log(“a=”+a+",b="+b);
}
fun(123,456)//返回的是a=123,b=456
//第二种
function fun(){
console.log(this);
}
fun()//返回的是[object window]
//第三种
根据函数的调用方式的不同，this会指向不同的对象
1.以函数的形式调用时，this永远都是window
2.以方法的形式调用时，this就是调用方法的那个对象
var obj={name:“孙悟空”,sayName:fun};
obj.sayName()//以方法的形式调用，返回的是[object object]=>{name:“孙悟空”,sayName:fun}
fun()//以函数的形式调用，返回的是[object window]
//第四种
function fun(){
console.log(this.name);
}
var obj={name:‘孙悟空’，sayName:fun}
var name=“1231122”；
fun()//返回的是1231122

第八章

1. 数组
var arr=new Array();//创建数组对象
arr[0]=10;
arr[1]=33;
var arr=[]//创建数组
//数组中的元素可以是任意的数据类型
var arr=[“hello”,1,true,null,undefined];
var obj={name:“孙悟空”};
arr[arr.length]=obj;
console.log(arr[5].name)//返回的就是孙悟空
//也可以是一个函数
arr=[function(){alert(1)},function{alert(2)}];
arr0;//返回的就是弹出框1

2. 数组的8个方法
var arr=[1,2,3,4];
//push()
-该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
可以将要添加的元素作为方法的参数传递，
这样这些元素将会自动添加到数组的末尾
该方法会将数组新的长度作为返回值返回
var result=arr.push(5,6,7,8);
console.log(arr);//返回的是1,2,3,4,5,6,7,8
console.log(“result=”+result);//返回的是8
//pop()
该方法可以删除数组的最后一个元素 ，并将删除的元素返回
result=arr.pop();
console.log(arr)//返回的是1,2,3,4,5,6,7
console.log(result)//返回的是8
//unshift()
该方法向数组开头添加一个或多个元素，并返回新的数组长度
//shift()
可以删除数组的第一个元素，并将被删除的元素作为返回值返回
//slice()
可以用来从数组提取指定元素
该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
参数：
1.截取开始的位置的 索引，包含开始索引
2.截取结束的位置的索引，不包含结束索引
第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
var arr=[1,2,3,4,5,6]
var result=arr.slice(1,4);
console.log(result);//返回的是2,3,4
//splice()
可以用于删除数组中的指定元素
使用splice()会影响到原数组，会将指定元素从原数组中删除
并将被删除的元素作为返回值返回
参数：
第一个，表示开始位置的索引
第二个，表示删除的数量
第三个及以后。。
可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
var result=arr.splice(0,2);
console.log(arr);//返回的是3,4,5,6
console.log(result);//返回的是1,2
第二种形式：
var arr=[1,2,3,4,5,6,7,8]
var result=arr.splice(1,1,9,10);
console.log(arrr);//返回的是1,9,10,3,4,5,6,7,8
//concat()
可以连接两个或多个数组，并将新的数组返回
该方法不会对原数组产生影响
var arr=[“1”,“2”,“3”];
var arr2=[“4”,“5”,“6”];
var result=arr.concat(arr,arr2,“7”,“8”);
console.log(result)//返回的是1,2,3,4,5,6,7,8
//join()
该方法可以将数组转换为一个字符串
该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
如果不指定连接符的话，则默认使用逗号作为连接符
result=arr.join();
console.log(result);//返回的是"1,2,3,4,5,6,7,8"
第二种形式,替换连接符:
arr=[“1”,“2”,“3”];
result=arr.join("");
console.log(result);//返回的是"123"
//reverse()
该方法直接修改原数组
//sort()
//可以对数组进行排序
也会影响到原数组,默认会按照Unicode编码进行排序（字母，数字）
我们可以自己指定排序的规则
var arr=[“b”,“d”,“e”,“a”,“c”];
arr.sort();
console.log(arr)//返回的是a,b,c,d,e
我们可以自己来指定排序的规则
我们可以在sort()添加一个回调函数，来指定排序规则
回调函数中需要定义两个形参，
游览器将会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
游览器会根据回调函数的返回值来决定元素的顺序，
如果返回一个大于0的值，则元素会交换位置
如果返回一个小于0的值，则元素位置不变
如果返回一个0，则认为两个元素相等，也不交换位置
arr=[5,4,3,1,2,7,8]
arr.sort(function(a,b){
console.log(“a=”+a);
console.log(“b=”+b);
})
最后返回的结果:a=5,b=4;a=4,b=3;a=3,b=1;a=1,b=2;a=2,b=7;a=7,b=8
第二种形式
arr=[5,4,2,1,3,6,8,7];
arr.sort(function(a,b){
//前边的大
if(a>b){
return 1;//return -1,则倒序
}else if(a<b){
return -1;//return 1,则倒序
}else{
return 0;
}
})
console.log(arr);//返回的是1,2,3,4,5,6,7,8
//有一个更加简便的方法
arr.sort(function(a,b){
return a-b;//正序
returin b-a;//倒序
})

3. Date对象
var myDate=new Date();//Date对象会自动把当前日期和时间保存为其初始值

var a=new Date()
a.setFullYear(1992)//能够改变
var b=a.setFullYear(1992)//返回的b是一串数字
setDate(),setYear()…同理

var my=“深度鸟”
my.charAt(2)//返回指定位置的字符，索引，返回鸟

indexOf
var str=“深度鸟”
str.indexOf(“深”)//返回0
str.indexOf(“鸟”，1）//返回2，就是说你可以指定位置

split:分割
var my=“86-010-854”
my.split(’-’)//返回86，010，854
my.split(’’,3)//返回8，6，-第二个参数是分割次数

substring()//提取字符串
var my=“深度鸟”
var word=my.substring(0,2)//返回深度

substr()//提取指定长度的字符串
var my=“深度鸟”
var word=my.substr(0,3)//返回深度鸟，第2个参数是指定其长度

4. Math对象
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

5.Window对象
1.var name=window.prompt(“您的姓名：”)//用户输入对话框
name能够获取输入的内容，则其可以进行判断
2.window.print()//打印当前窗口的内容，打印机
3.b=window.open(“URL”,"_blank(新窗口)/_parent(父窗口)"，“width=100,height=100”)
b.focus()//聚焦到这个新的窗口，你要对窗口进行操作，肯定先要进行聚焦（关注）
4.b.resizeTo(宽度，高度)
b.resizeBy(宽度，高度)
可以调整浏览器窗口的大小，resizeTo:接收浏览器新宽度和新高度，resizeBy:接收浏览器新窗口与原窗口的宽度和高度之差，比如说：调整到100100，b.resizeTo(100,100),调整到200150，b.resizeBy(100,50)

第九章

1. 正则表达式
正则表达式用于定义一些字符串的规则，
计算机可以根据正则表达式，来检查一个字符串是否符合规则，
获取将字符串中符合规则的内容提取出来
创建正则表达式的对象
语法：
var 变量=new RegExp(“正则表达式”,“匹配模式”);
在构造函数中可以传递一个匹配模式作为第二个参数,
可以是
i 忽略大小写
g 全局匹配模式
/*******************
***正则表达式的方法:
test()
使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
如果符合则返回true,否则返回false
var reg=new RegExp(“a”);
var str=“a”;
var result=reg.test(str);
console.log(result);//返回的是true
//第二种形式：
var reg=new RegExp(“a”,“i”);
var str=“a”;
var result=reg.test(str);
console.log(reg.test(“Abcbc”));//返回的是true

2. 正则的语法
/*******************
使用字面量来创建正则表达式
语法： var 变量=/正则表达式/匹配模式
使用字面量的方式创建更加简单
使用构造函数创建更加灵活
var reg=new RegExp(“a”,“i”);
reg=/a/i;//固定死了
//创建一个正则表达式，检查一个字符串中是否有a或b
使用|表示或者的意思
reg=/a|b/;
//[]里的内容也是或的关系
[ab]==a|b
[a-z]任意小写字母
[A-Z]任意大写字母
[A-z]任意字母
//检查一个字符串中是否含有abc或adc或aec
reg=/a[bde]c/
//[^]除了里面的东西，还包含其他东西返回true,否则返回false
reg=/[^ab]/;
console.log(reg.test(“abc”))//返回true
console.log(reg.test(“ab”))//返回false

3. 字符串和正则相关的方法
var str=“1a2b3c4d5e6f7”;
/*************
//split()
可以将一个字符串拆分为一个数组
方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
var result=str.split(/[A-z]/);
console.log(result);//返回的是1,2,3,4,5,6,7
//search()
可以搜索字符串中是否含有指定内容
如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
str=“hello hello adc”
result=str.search(/a[bef]c/);
console.log(result);//返回的是false
//match()
可以根据正则表达式，从一个字符串中将符合条件的内容提取出来。
默认情况下我们的match只会 找到第一个符合要求的内容，找到以后就停止检索
我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
可以为一个正则表达式设置多个匹配模式，且顺序无所谓
match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
str=“1a2b3c4d5e6f7A8B9C”;
result=str.match(/[a-z]/ig);
console.log(result);//返回的是a,b,c,d,e,f,A,B,C
//replace()
可以将字符串中指定内容替换为新的内容
参数：
1.被替换的内容，可以接受一个正则表达式作为参数
2.新的内容
默认只会替换第一个
不会影响到原字符串
str=“1a2b3c4d5e6f7A8B9C”;
result=str.replace(/[a-z]/gi,“1”);
console.log(result);//返回的是112b3c4d5e6f718B9C

4. 正则表达式语法
创建一个正则表达式检查一个字符串中是否含有aaa
//量词
-通过量词可以设置一个内容出现的次数
-{n}正好出现n次
-{m,n}出现m-n次
-{m,}出现m次以上
-+至少一个，相当于{1,}
-*0个或多个，相当于{0,}
-?0个或1个，相当于{0,1}
var reg=/a{3}/;//aaa
var reg=/(ab){3}/;//ababab
var reg=/b{3}/;//bbb
var reg=/ab{1,3}c/;//abc或abbc或abbbc
var reg=/ab{3,}c/;//abbbc或abbbbc或abbbbbc…
var reg=/ab+c/;//至少1个b

//检查一个字符串中是否以a开头
reg=/^a/
console.log(reg.test(“abc”))//返回true
//检查一个字符串中是否以a结尾
reg=/aKaTeX parse error: Expected group after '^' at position 61: …/如果在正则表达式中同时使用 ^̲则要求字符串必须完全符合正则表达式
reg=/^a$/;//只能是一个a
console.log(reg.test(“a”))//返回的是true
console.log(reg.test(“aa”))//返回的是false

手机号的规则:
1 3 567890123(11位)
1.以1开头
2.第二位3-9任意数字
3.三位以后任意数字9个
var phoneStr=“13013013013”
var phoneReg=/^1[3-9][0-9]{9}$/
console.log(phoneReg.test(phoneStr));//返回的是true
如果正则表达式变成
var phoneReg=/1[3-9][0-9]{9}/
var phoneStr=“a13013013013a”
console.log(phoneReg.test(phoneStr));//返回的是true

//检查一个字符串中是否含有.
.表示任意字符
在正则表达式中使\作为转义字符
.来表示.
\表示
注意:使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\来代替
var reg=/./;
reg=/\/;
reg=new RegExp("\.");
reg=new RegExp("\\");
console.log(reg.test("!..!.."));

\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/
//创建一个正则表达式检查一个字符串中是否含有单词child
reg=/\bchild\b/
console.log(reg.test(“hello child ren students”))
//例子
var str=" he llo “;
console.log(str);
//去除字符串中的前后的空格
//去除空格就是使用”“来替换空格
//去除开头的空格
str=str.replace(/^\s*/,”")
//去除结尾的空格
str=str.replace(/\s*$/,"")

str=str.replace(/^\s*|\s*$/g/,"");//去除前面和后面的空格

第十章

1. js基础_dom增删改
window.οnlοad=function(){
myClick(“btn01”,function(){
var li=document.createElement(“li”);
var gzText=document.createTextNode(“广州”);
li.appendChild(gzText);
var city=document.getElementById(“city”);
city.appendChild(li);
})
}

function myClick(idStr,fun){
var btn=document.getElementById(idStr);
btn.οnclick=fun;
}
//insertBefore()
可以指定的子节点前插入新的子节点
语法：
父节点.insertBefore(新节点，旧节点)
//replaceChild()
可以使用指定的子节点替换已有的子节点
语法：父节点.replaceChild(新节点，旧节点)
//removeChild()
可以删除一个节点
父节点.removeChild(子节点)=子节点.parentNode.removeChild(子节点)

//推荐使用如下方式：
var li=document.createElement(“li”);
li.innerHTML=“广州”;
city.appendChild(li);

2. 添加删除记录-删除
注意：点击超链接以后，超链接会跳转页面，这个超链接默认行为，但是此时我们不希望出现默认行为，可以通过响应函数的最后return false来取消默认行为

3. history
window.οnlοad=function(){
var btn=document.getElementById(“btn”);
btn.οnclick=function(){
location=“http://www.baidu.com”
或
location=“01.html”
}
}

3. dom查询
//得到属性
getAttribute（‘属性名’）
//设置属性
setAttribute(‘属性名’，值)
//节点属性

要注意的是：节点与节点之间存在空白符，空白符的形式为文本节点，每个节点都是上面这3个属性（nodeType,nodeName,nodeValue）
childNodes:表示当前节点的所有子节点
firstChild:表示当前节点的一个子节点
lastChild:表示当前节点的最后一个子节点
parentNode:表示当前节点的父节点
previousSibling:表示当前节点的前一个兄弟节点
nextSibling:表示当前节点的后一个兄弟节点
insertBefore(newNode,old)
创建文本节点createTextNode

var a=document.createElement('div')
var b=document.createTextNode("hello world")
a.appendChild(b)
document.body.appendChild(a)//直接添加到body

**4.scrollWidth,clientWidth,offsetWidth区别 **
1.元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。
scrollWidth=clientWidth，两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度

情况2：
元素的内容超过可视区，滚动条出现和可用的情况下。
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。
在不同浏览器都实用的javascript方案：
var w=document.documentElement.clientWidth || document.body.clientWidth
var h=document.documentElement.clientHeight || document.body.clientHeight