JavaScript 总结_function n() { try { var l, c, a, _, e, p, t, o, n


NaN:当字符串转化为数字失败时,就是 NaN,属于 Number 类型。  
 NaN 在表达式中(!=除外),结果一定为 false。


**函数parseFloat**: 强制转换成浮点数



parseFloat(“6.12”)=6.12


**函数eval**:将字符串强制转换为表达式并返回结果



eval(“1+1”)=2 ;
eval(“1<2”)=true


**类型查询函数(typeof)**  
 ECMAScript 提供了 typeof 运算符来判断一个值是否在某种类型的范围内。可以用这种运算符判断一个值是否表示一种原始类型:如果它是原始类型,还可以判断它表示哪种原始类型。  
 函数 typeof :查询数值当前类型  
 (string / number / boolean / object )



typeof(“test”+3) // “string”
typeof(null) // "object "
typeof(true+1) // “number”
typeof(true-false) // “number”


#### **算数运算符**


加(+)、 减(-)、 乘(*) 、除(/) 、余数(% )  
 加、减、乘、除、余数和数学中的运算方法一样 例如:9/2=4.5,4*5=20,9%2=1


另外:  
 `-` 除了可以表示减号还可以表示负号 例如:x=-y  
 `+` 除了可以表示加法运算还可以用于字符串的连接 例如:“abc”+“def”=“abcdef”


**递增(++) 、递减(--)**  
 假如x=2,那么 x++ 表达式执行后的值为 3,x-- 表达式执行后的值为 1  
 i++ 相当于 i=i+1,i-- 相当于 i=i-1  
 递增和递减运算符可以放在变量前也可以放在变量后:–i


注意:  
 先赋值,后加减



var a = 1;
var b = a++;
alert(b); // b = 1
alert(a); // a = 2


先加减,后赋值



var a = 1;
var b = ++ a;
alert(b);
alert(a);


例题:



var x = 1;
alert(x++); //1
alert(++x); // 3
alert(–x); // 2
alert(x–); // 2
alert(x); // 1


**一元加减法:**



var a=1;
var b=1;
a=-a; //a=-1
var c=“10”;
alert(typeof ©); //string
c=+c; //类型转换
alert(typeof ©); //number

var d=“yuan”;
d=+d;
alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
alert(typeof(d));//Number


#### 逻辑运算符


等于 ( == ) 、不等于( != ) 、 大于( > ) 、 小于( < )  
 大于等于(>=) 、小于等于(<=)  
 与 (&&) 、或(||) 、非(!)


**逻辑 AND 运算符(&&)**  
 逻辑 AND 运算的运算数可以是任何类型的,不止是 Boolean 值。  
 如果某个运算数不是原始的 Boolean 型值,逻辑 AND 运算并不一定返回 Boolean 值:  
 如果某个运算数是 null,返回 null。  
 如果某个运算数是 NaN,返回 NaN。  
 如果某个运算数是 undefined,返回 undefined。


#### 赋值运算符


`=` 代表赋值  
 `==` 表示判断是否相等(类型不同,值相同也会 true, 例如 “1”==1)  
 `===` 表示全等(类型相同,值相同才为 true)



alert(2==‘2’) // true
alert(2===‘2’) //false //全等运算符不做任何转换


**ECMAScript等性运算符**  
 执行类型转换的规则如下:  
 a. 如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。  
 b. 如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。  
 c. 如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。  
 d. 如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。


在比较时,该运算符还遵守下列规则:  
 a. 值 null 和 undefined 相等。  
 b. 在检查相等性时,不能把 null 和 undefined 转换成其他值。  
 c. 如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。  
 d. 如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。


**ECMAScript 关系运算符**



var a = “Blue” < “alpha”;
alert(a); //输出 true


在上面的例子中,字符串 “Blue” 小于 “alpha”,因为字母 B 的字符代码是 66,字母 a 的字符代码是 97。


比较数字和字符串:  
 a. 比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.  
 b. 比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较. 例如:



alert(‘25’<‘3’) //true


### 控制语句


#### if 控制语句



if-else 基本格式:

if (表达式){
语句1;

}else{
语句2;

}


功能说明  
 如果表达式的值为 true 则执行语句 1,  
 否则执行语句 2


#### switch 选择控制语句



switch (表达式) {
case 值1:语句1;break;
case 值2:语句2;break;
case 值3:语句3;break;
default:语句4;
}


#### for 循环控制语句



for (初始化;条件;增量){
语句1;

}


功能说明  
 实现条件循环,当条件成立时,执行语句 1,否则跳出循环体



for (var i=1;i<10;i++){
console.log(i)
}


#### while 循环控制语句



while (条件){
语句1;

}


功能说明  
 运行功能和for类似,当条件成立循环执行语句花括号{}内的语句,否则跳出循环


### 异常处理



try {
//这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
//e是一个局部变量,用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
}


### 对象


ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。  
 var o = new Object();


**对象的概念与分类:**


1. 由 ECMAScript 定义的本地对象,独立于宿主环境的 ECMAScript 实现提供的对象.(native object)
2. ECMAScript 实现提供的、独立于宿主环境的所有对象,在 ECMAScript 程序开始执行时出现。这意味着开发者不必明确实例化内置对象,它已被实例化了。ECMA-262 只定义了两个内置对象,即 Global 和 Math (它们也是本地对象,根据定义,每个内置对象都是本地对象)。(built-in object)
3. 所有非本地对象都是宿主对象(host object),即由 ECMAScript 实现的宿主环境提供的对象。所有 BOM 和 DOM 对象都是宿主对象。


**object对象**:ECMAScript 中的所有对象都由这个对象继承而来;


* Object 对象中的所有属性和方法都会出现在其他对象中
* ToString() : 返回对象的原始字符串表示。
* ValueOf() : 返回最适合该对象的原始值。对于许多对象,该方法返回的值都与 ToString() 的返回值相同。


11种内置对象:  
 **Array ,String , Date, Math, Boolean, Number, Function, Global, Error, RegExp , Object**


**创建对象:**




![在这里插入图片描述](https://img-blog.csdnimg.cn/20190620080549128.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bWF0Y2g=,size_16,color_FFFFFF,t_70)


#### String 对象


**自动创建字符串对象:**



var str1 = “hello world”;
alert(str1.length); // 15
alert(str1.substr(1,5)); // ello


**手工创建字符串对象:**



var str1 = new String(“hello word”);
alert(str1.length); //10
alert(str1.substr(1,3)); //ell


**String 对象的属性**  
 获取字符串长度:length


**String 对象的方法**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d3e6a1f7647544ac948e7fd23939cc65.png)


**String 对象的方法(1) —— 格式编排方法**  
 String 对象提供了一组针对HTML格式的方法,例如:



x.anchor()返回锚定义字符串x,
x.bold()返回粗体表示字符串x
x.sup()返回上标格式字符串x


例如:



var x=“yuan”;
var y=“x.italics():” + x.italics();
document.write(y.fontsize(10));


**String 对象的方法(2)—— 大小写转换**



var str1=“AbcdEfgh”;
var str2=str1.toLowerCase();
var str3=str1.toUpperCase();
alert(str2); //结果为"abcdefgh"
alert(str3); //结果为"ABCDEFGH"


**String 对象的方法(3) —— 获取指定字符**  
 书写格式



x.charAt(index)
x.charCodeAt(index)

// 使用注解
x 代表字符串对象
index 代表字符位置
index 从0开始编号
charAt 返回 index 位置的字符
charCodeAt 返回 index 位置的 Unicode 编码



var str1=“welcome to the world of JS! 苑昊”;
var str2=str1.charAt(28);
var str3=str1.charCodeAt(28);
alert(str2); // 苑
alert(str3); // 33489


**String 对象的方法(4)—— 查询字符串**  
 书写格式  
 x.indexOf(findstr,index)  
 x.lastIndexOf(findstr)



var str1=“welcome to the world of JS!”;
var str2=str1.indexOf(“l”);
var str3=str1.lastIndexOf(“l”);
alert(str2); //结果为 2
alert(str3); //结果为 18


**使用正则表达式:**  
 书写格式  
 x.match(regexp)  
 x.search(regexp)


使用注解:  
 x代表字符串对象  
 regexp代表正则表达式或字符串  
 match返回匹配字符串的数组,如果没有匹配则返回null  
 search返回匹配字符串的首字符位置索引



var str1 = “welcome to the world of JS!”;
var str2 = str1.match(“world”);
var str3 = str1.search(“world”);
alert(str2[0]); // world
alert(str3); // 15


**String 对象的方法(5) ——子字符串处理**


**截取子字符串**  
 书写格式  
 x.substr(start, length)  
 x.substring(start, end)


使用注解:  
 x代表字符串对象  
 start表示开始位置  
 length表示截取长度  
 end是结束位置加1  
 第一个字符位置为0



var str1 = “abcdefgh”;
var str2 = str1.substr(2,4); // 4:截取长度
var str3 = str1.substring(2,4); //4:截取位置加 1
alert(str2); //结果为"cdef"
alert(str3); //结果为"cd"


x.slice(start, end)



var str1 = “abcdefgh”;
var str2 = str1.slice(2,4);
var str3 = str1.slice(4);
var str4 = str1.slice(2,-1);
var str5 = str1.slice(-3,-1);
alert(str2); //结果为"cd"
alert(str3); //结果为"efgh"
alert(str4); //结果为"cdefg"
alert(str5); //结果为"fg"


**替换子字符串**  
 x.replace(findstr,tostr)



var str1 = “abcdefgh”;
var str2 = str1.replace(“cd”,“aaa”);
alert(str2); //结果为"abaaaefgh"


**分割字符串**



var str1 = “一,二,三,四,五,六,日”;
var strArray = str1.split(“,”);
alert(strArray[1]); //结果为"二"


**连接字符串**  
 y=x.concat(addstr)


使用注解:  
 x代表字符串对象  
 addstr为添加字符串  
 返回x+addstr字符串



var str1 = “abcd”;
var str2 = str1.concat(“efgh”);
alert(str2); //结果为"abcdefgh"


#### Array(数组)对象


**创建数组对象**  
 Array 对象用于在单个的变量中存储多个值。


创建方式1:



var a=[1,2,3];


创建方式2:



new Array(); // 创建数组时允许指定元素个数也可以不指定元素个数。
new Array(size); // 如果只有1个参数且为数字,即代表长度,而不是内容


初始化数组对象方式1:



var cnweek=new Array(7);
cnweek[0]=“星期日”;
cnweek[1]=“星期一”;

cnweek[6]=“星期六”;


初始化数组对象方式2:  
 直接在建立对象时初始化数组元素,元素类型允许不同



new Array(element0, element1, …, elementn)

new Array(100,“a”,true,(1,2)); //元素类型允许不同


注意:如果只有 1 个参数且为数字,即代表长度,而不是内容,并且数组是可变长的。


**Array对象的属性**  
 获取数组元素的个数:length


**Array对象的方法**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/dd11315e07264534a2947eb2b485e7ad.png)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/12116b666a0f4a3cad37b0a5ad4f28a3.png)


**连接数组 join 方法**  
 书写格式  
 x.join(bystr)


使用注解  
 x代表数组对象  
 bystr作为连接数组中元素的字符串  
 返回拼接后的字符串  
 与字符串的split功能刚好相反



var arr1 = [1, 2, 3, 4, 5, 6, 7];
var str1 = arr1.join(“-”);
alert(str1); //结果为"1-2-3-4-5-6-7"


**连接数组 concat 方法**  
 x.concat(value,…)



var a = [1,2,3];
var b = a.concat(4,5) ;
alert(a.toString());//返回结果为1,2,3
alert(b.toString());//返回结果为1,2,3,4,5


**数组排序 reverse /sort**  
 x.reverse() 颠倒数组元素  
 x.sort() 排序数组元素,当做字符串排序



var arr1 = [ 1,5,2,100];
arr1.reverse();
alert(arr1.toString()); //结果为100,2,5,1
arr1.sort();
alert(arr1.toString()); //结果为1,100,2,5


**数组切片 slice**  
 x.slice(start, end)  
 使用注解:  
 x代表数组对象  
 start表示开始位置索引  
 end是结束位置下一数组元素的索引  
 第一个数组元素索引为0   
 start、end可为负数,-1代表最后一个数组元素  
 end省略则相当于从start位置截取以后所有数组元素



var arr1 = [‘a’,‘b’,‘c’,‘d’,‘e’,‘f’,‘g’,‘h’];
var arr2 = arr1.slice(2,4);
var arr3 = arr1.slice(4);
var arr4 = arr1.slice(2,-1);

alert(arr2.toString()); //结果为"c,d"
alert(arr3.toString()); //结果为"e,f,g,h"
alert(arr4.toString()); //结果为"c,d,e,f,g


**删除子数组**  
 x. splice(start, deleteCount, value, …) // 对数组指定位置进行删除和插入


使用注解  
 x代表数组对象  
 start表示开始位置索引  
 deleteCount删除数组元素的个数  
 value表示在删除位置插入的数组元素(可省略)



var a = [1,2,3,4,5,6,7,8];
a.splice(1,2); //a变为 [1,4,5,6,7,8]
alert(a.toString());
a.splice(1,1); //a变为[1,5,6,7,8]
alert(a.toString());
a.splice(1,0,2,3); //a变为[1,2,3,5,6,7,8]
alert(a.toString());


队列:先进先出 栈:先进后出  
 **数组的进出栈操作**  
 push pop 这两个方法模拟的是一个栈操作  
 x.push(value) 压栈,将 value 值添加到数组 x 的结尾  
 x.pop() 弹栈,删除数组的最后一个元素,并将其返回  
 x.unshift(value) 将 value 值插入到数组 x 的开始  
 x.shift() 将数组 x 的第一个元素删除


使用注解:  
 x 代表数组对象  
 value 可以为字符串、数字、数组等任何值



var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1); //结果为"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1); //结果为"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1); //结果为"1,2,3,4,5"



var arr1=[1,2,3];
arr1.unshift(4,5)
alert(arr1); //结果为"4,5,1,2,3"
arr1. unshift([6,7])
alert(arr1); //结果为"6,7,4,5,1,2,3"
arr1.shift()
alert(arr1); //结果为"4,5,1,2,3"


总结 js 的数组特性:


* js 中的数组可以装任意类型,没有任何限制.
* js 中的数组,长度是随着下标变化的,用到多长就有多长。


#### Date 对象


**创建Date对象**  
 方法1:不指定参数,实例出当前时间



var nowd1 = new Date(); // 实例出当前时间
alert(nowd1.toLocaleString( )); // 2019/6/19 上午9:00:33


方法2:参数为日期字符串,实例出某一具体时间



var nowd2 = new Date(“2004/3/20 11:12”);
alert(nowd2.toLocaleString( )); // 2004/3/20 上午11:12:00



var nowd3 = new Date(“04/03/20 11:12”);
alert(nowd3.toLocaleString( )); // 2020/4/3 上午11:12:00


方法3:参数为毫秒数



var nowd3 = new Date(5000);
alert(nowd3.toLocaleString( )); // 1970/1/1 上午8:00:05
alert(nowd3.toUTCString()); // Thu, 01 Jan 1970 00:00:05 GMT


方法4:参数为年月日小时分钟秒毫秒



var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( )); // 2004/3/20 上午11:12:00


毫秒并不直接显示


**Date对象的方法—获取日期和时间**


getDate() 获取日  
 getDay () 获取星期(不是日)  
 getMonth () 获取月(0-11)  
 getFullYear () 获取完整年份  
 getYear () 获取年  
 getHours () 获取小时  
 getMinutes () 获取分钟  
 getSeconds () 获取秒  
 getMilliseconds () 获取毫秒  
 getTime () 返回累计毫秒数(从1970/1/1午夜)


**Date对象的方法—设置日期和时间**


setDate(day\_of\_month) 设置日  
 setMonth (month) 设置月  
 setFullYear (year) 设置年  
 setHours (hour) 设置小时  
 setMinutes (minute) 设置分钟  
 setSeconds (second) 设置秒  
 setMillliseconds (ms) 设置毫秒(0-999)  
 setTime (allms) 设置累计毫秒(从1970/1/1午夜)



var x=new Date();
x.setFullYear (1997); //设置年1997
x.setMonth(7); //设置月7
x.setDate(1); //设置日1
x.setHours(5); //设置小时5
x.setMinutes(12); //设置分钟12
x.setSeconds(54); //设置秒54
x.setMilliseconds(230); //设置毫秒230
document.write(x.toLocaleString( )+“
”); // 1997/8/1 上午5:12:54



var x=new Date();
x.setTime(870409430000); //设置累计毫秒数
document.write(x.toLocaleString( )+“
”); // 1997/8/1 下午12:23:50


**Date对象的方法—日期和时间的转换**


getTimezoneOffset():8个时区×15度×4分/度=480; 返回本地时间与GMT的时间差,以分钟为单位  
 toUTCString() 返回国际标准时间字符串  
 toLocalString() 返回本地格式时间字符串  
 Date.parse(x) 返回累计毫秒数(从1970/1/1午夜到本地时间)  
 Date.UTC(x) 返回累计毫秒数(从1970/1/1午夜到国际时间)


#### RegExp(正则)对象


RegExp 对象  
 在表单验证时使用该对象验证用户填入的字符串是否符合规则.


创建方式1



var reg1 = new RegExp(“1[a-zA-Z0-9_]{5,11}$”,“g”);


验证字符串



var str = “bc123”;
alert(reg1.test(str)); // true


创建方式2  
 /填写正则表达式/匹配模式



var reg2 = /2[a-zA-Z0-9_]{5,11}$/g;
alert(reg2.test(str)); // true


**正则对象的方法**  
 test 方法 ==> 测试一个字符串是否复合 正则规则. 返回值是true 和false.


String 中与正则结合的 4 个方法  
 macth、search、split、replace



var str = “hello world”;
alert(str.match(/o/g)); //查找字符串中符合正则的内容.
alert(str.search(/h/g)); // 查找字符串中符合正则表达式的内容位置
alert(str.split(/o/g)); // 按照正则表达式对字符串进行切割. 返回数组;
alert(str.replace(/o/g, “s”)); // hells wsrld 对字符串按照正则进行替换.


#### Math对象


Math对象  
 该对象中的属性方法和数学有关.  
 Math是内置对象 , 不需要实例化,直接使用。在调用时 需要打出 "Math."前缀.


Math 属性:  
 alert(Math.PI);


Math 方法:  
 alert(Math.random()); // 获得随机数 0~1 不包括1.  
 alert(Math.round(1.5)); //2 四舍五入  
 alert(Math.max(1,2));// 2  
 alert(Math.min(1,2));// 1  
 alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方.


练习:获取1-100的随机整数,包括1和100



var num = Math.random();
num = num*10;
num = Math.round(num);
alert(num)


**Math其他方法:**


* abs(x) 返回数的绝对值。
* exp(x) 返回 e 的指数。
* floor(x) 对数进行下舍入。
* log(x) 返回数的自然对数(底为e)。
* max(x,y) 返回 x 和 y 中的最高值。
* min(x,y) 返回 x 和 y 中的最低值。
* pow(x,y) 返回 x 的 y 次幂。
* random() 返回 0 ~ 1 之间的随机数。
* round(x) 把数四舍五入为最接近的整数。
* sin(x) 返回数的正弦。
* sqrt(x) 返回数的平方根。
* tan(x) 返回角的正切。


#### Function 对象(重点)


函数的定义:



function 函数名 (参数){

函数体;

return 返回值;

}


**功能说明:**


* 可以使用变量、常量或表达式作为函数调用的参数
* 函数由关键字 function 定义
* 函数名的定义规则与标识符一致,大小写是敏感的
* 返回值必须使用 return
* Function 类可以表示开发者定义的任何函数。


用 Function 类直接创建函数的语法如下:  
 方式一(推荐):



function 函数名 (参数){

函数体;

return 返回值;

}


方式二(说明函数是一个对象):



var 函数名 = new Function(“参数1”,“参数n”,“函数体”);


实例:



function func1(){
alert(‘hello yuan!’);
return 8
}

ret = func1(); // ‘hello yuan’
alert(ret) // 8


注意:js 的函数加载执行与 python 不同,它是整体加载完才会执行,所以执行函数放在函数声明上面或下面都可以。


**Function 对象的 length 属性**  
 属性 length 声明了函数期望的参数的个数。



alert(func1.length) // 返回函数的参数的个数


Function 对象的方法  
 Function 对象也有与所有对象共享的 valueOf() 方法和 toString() 方法。这两个方法返回的都是函数的源代码,在调试时尤其有用。


运算符void()作用:拦截方法的返回值



alert(void(fun1(1,2)))


**函数的调用**



function func1(a,b){
alert(a+b);
}

func1(1,2); //3
func1(1,2,3); //3
func1(1); //NaN
func1(); //NaN

//只要函数名写对即可,参数怎么填都不报错


-------------------面试题-----------------



function a(a,b){ // a是一个变量,指向函数体的地址
alert(a+b);
}

var a = 1; // 重新给a赋值为1,指针不再指向函数
var b = 2;
a(a,b) // 报错:a is not a function


**函数的内置对象 arguments(参数)**



function add(a,b){
console.log(a+b); //3
console.log(arguments.length); //2
console.log(arguments); // (1,2)
}
add(1,2)


------------------arguments的用处1 ------------------



function nxAdd(){
var result=0;
for (var i in arguments){
result+=arguments[i]
}
alert(result)
}

nxAdd(1,2,3,4,5) // 15


------------------arguments的用处2 ------------------



function f(a,b,c){
if (arguments.length!=3){
throw new Error(“function f called with “+arguments.length+” arguments,but it just need 3 arguments”)
}
else {
alert(“success!”)
}
}

f(1,2,3,4,5)


### BOM对象


BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作。  
 使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 JavaScript 有能力与浏览器“对话”。


#### Window 对象


window 对象,所有浏览器都支持 window 对象。


* 概念上讲:一个 html 文档对应一个 window 对象.
* 功能上讲: 控制浏览器窗口的.
* 使用上讲: window对象不需要创建对象,直接使用即可.


Window 对象方法


* alert() 显示带有一段消息和一个确认按钮的警告框。
* confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* prompt() 显示可提示用户输入的对话框。
* open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
* close() 关闭浏览器窗口。
* setInterval() 每过几秒钟执行一次。
* clearInterval() 取消由 setInterval() 设置的 timeout。
* setTimeout() 每过几秒后执行一次。
* clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
* scrollTo() 把内容滚动到指定的坐标。


**交互方法:**  
 方法讲解: alert/ confirm/ prompt/ open/ close


**alert**



alert(‘111’);


![在这里插入图片描述](https://img-blog.csdnimg.cn/20190621090613395.png)  
 只有一个*确定*按钮


**confirm**



var result = confirm(“您确定要删除吗?”);
alert(result);


![在这里插入图片描述](https://img-blog.csdnimg.cn/20190621090713716.png)


点击*确定*,返回 true  
 点击*取消*,返回 false


**prompt**  
 参数1 : 提示信息.  
 参数2 : 输入框的默认值. 返回值是用户输入的内容.



var result = prompt(“请输入一个数字!”,“haha”);
alert(result);


![在这里插入图片描述](https://img-blog.csdnimg.cn/20190621090802412.png)  
 输入内容(默认参数2),点击确定,返回输入的内容。


**open**  
 打开和一个新的窗口,并进入指定网址.  
 调用方式1:


* 参数1 : 网址.



open(“http://www.baidu.com”);


调用方式2:


* 参数1:什么都不填 就是打开一个新窗口.
* 参数2.填入新窗口的名字(一般可以不填).
* 参数3: 新打开窗口的参数.



open(‘’,‘’,‘width=200,resizable=no,height=100’); //新打开一个宽为200 高为100的窗口


**close**  
 将当前文档窗口关闭.



close();


**History 对象**


History 对象包含用户(在浏览器窗口中)访问过的 URL。  
 History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。


History 对象属性  
 length 返回浏览器历史列表中的 URL 数量。


History 对象方法


* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(number/url) 加载 history 列表中的某个具体页面。


参数url使用的是要访问的url,或 url 的子串。  
 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。



前进
后退
某页面


**Location 对象**  
 Location 对象包含有关当前 URL 的信息。  
 Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。


Location 对象方法


* location.assign(URL)// 加载一个新的URL
* location.reload() //重载,刷新
* location.replace(newURL)//注意与assign的区别
* location.href =‘http://www….’ //跳转到某网页


### DOM对象(DHTML)


什么是 DOM?  
 DOM 是 W3C(万维网联盟)的标准。DOM 定义了访问 HTML 和 XML 文档的标准:  
 “W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”


W3C DOM 标准被分为 3 个不同的部分:


* 核心 DOM - 针对任何结构化文档的标准模型
* XML DOM - 针对 XML 文档的标准模型
* HTML DOM - 针对 HTML 文档的标准模型


什么是 XML DOM?  
 XML DOM 定义了所有 XML 元素的对象和属性,以及访问它们的方法。


什么是 HTML DOM?  
 HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。


DOM 节点  
 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点(NODE):


* 整个文档是一个文档节点(document 对象)
* 每个 HTML 元素(包括标签)是元素节点(element 对象)
* HTML 元素内的文本是文本节点(text 对象)
* 每个 HTML 属性是属性节点(attribute 对象)
* 注释是注释节点(comment 对象)


![在这里插入图片描述](https://img-blog.csdnimg.cn/2019062109134966.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bWF0Y2g=,size_16,color_FFFFFF,t_70)


节点(自身)属性:


* attributes - 节点(元素)的属性节点
* nodeType – 节点类型
* nodeValue – 节点值
* nodeName – 节点名称
* innerHTML - 节点(元素)的文本值


导航属性(推荐):


* parentNode - 节点(元素)的父节点 (推荐)
* firstChild – 节点下第一个子元素
* lastChild – 节点下最后一个子元素
* childNodes - 节点(元素)的子节点
* parentElement // 父节点标签元素
* children // 所有子标签
* firstElementChild // 第一个子标签元素
* lastElementChild // 最后一个子标签元素
* nextElementtSibling // 下一个兄弟标签元素
* previousElementSibling // 上一个兄弟标签元素


节点树中的节点彼此拥有层级关系。  
 父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。


* 在节点树中,顶端节点被称为根(root)
* 每个节点都有父节点、除了根(它没有父节点)
* 一个节点可拥有任意数量的子节点
* 同胞是拥有相同父节点的节点


下面的图片展示了节点树的一部分,以及节点之间的关系:  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2019062109170730.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bWF0Y2g=,size_16,color_FFFFFF,t_70)  
 访问 HTML 元素(节点),访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素:  
 全局查找:


* 通过使用 getElementById() 方法 element,id唯一性
* 通过使用 getElementsByTagName() 方法 elements
* 通过使用 getElementsByClassName() 方法
* 通过使用 getElementsByName() 方法



i am div2
i am div2
i am div2

hello p


局部查找:


* 通过使用 getElementById() 方法
* 通过使用 getElementsByTagName() 方法
* 通过使用 getElementsByClassName() 方法



i am div2
i am div2
i am div2

hello p

支持
// var ele= div1.getElementsByTagName(“p”);
// alert(ele.length);
支持
// var ele2=div1.getElementsByClassName(“div2”);
// alert(ele2.length);
不支持
// var ele3=div1.getElementById(“div3”);
// alert(ele3.length);
不支持
// var ele4=div1.getElementsByName(“yuan”);
// alert(ele4.length)


**HTML DOM Event(事件)**  
 当用户点击某个 HTML 元素时触发启动一段 JavaScript。


事件属性:可插入 HTML 标签来定义事件动作。


* onclick 当用户点击某个对象时调用的事件句柄。
* ondblclick 当用户双击某个对象时调用的事件句柄。
* onfocus 元素获得焦点。 (应用场景:输入框)
* onblur 元素失去焦点。(应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.)
* onchange 域的内容被改变。 (应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动))
* onkeydown 某个键盘按键被按下。 (应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.)
* onkeypress 某个键盘按键被按下并松开。
* onkeyup 某个键盘按键被松开。
* onload 一张页面或一幅图像完成加载。
* onmousedown 鼠标按钮被按下。
* onmousemove 鼠标被移动。
* onmouseout 鼠标从某元素移开。
* onmouseover 鼠标移到某元素之上。
* onmouseleave 鼠标从元素离开
* onselect 文本被选中。
* onsubmit 确认按钮被点击。(应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应  
 该阻止表单的提交.)


两种为元素附加事件属性的方式  
 方式一:



点我呀

试一试!


鼠标点击 ''点我呀" 时,网页弹出 ‘123’


方式二:




#### Event 对象


Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。


事件通常与函数结合使用,函数不会在事件发生前被执行!event 对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数,我们获得仅仅需要接收一下即可。  
 比如 onkeydown,我们想知道哪个键被按下了,需要问下 event 对象的属性,这里就是 KeyCode;


**节点的增删改查**  
 增:  
 找到父类,添加子类。



var ele = document.getElementById(“div1”);
var son = document. createElement(“p”);


删:  
 找到父类,找到子类,删除子类。



var ele = document.getElementById(“div1”);
var son = ele.lastElementChild;
ele.removeChild(son);


改:   
 第一种方式:



  1. a-zA-Z ↩︎

  2. a-zA-Z ↩︎

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值