PART3-JavaScript

Share

JavaScript学习笔记

完整的JavaScript是由ECMAScript(语法)、Browser Objects(DOM、BOM)(特性)组成的。
DOM提供访问和操作网页内容的方法和接口，BOM提供与浏览器交互的方法和接口。
ECMAScript中的变量，函数名，操作符都区分大小写

JavaScript语法

注释与分号
单行注释：//
多行注释：/**/
语句结束使用分号，如果省略，则由解析器确定语句的结尾

标识符
标识符：变量、函数、属性的名字或者函数参数
命名规则：
1.由字母，数字下划线或美元符号组成
2.不能以数字开头
3.不能使用关键字，保留字等作为标识符

变量
ECMAScript的变量是松散类型 [可以用来保存任何类型的数据]
即变量是没有类型的，变量的类型由变量值决定，可以保存任何类型的数据。变量只是一个用于保存值的占位符。

变量的声明：使用var操作符 var 变量名
变量的赋值：声明的同时赋值 var 变量名=值

1
2
3
4
5
6
7
8
9
10
    //声明保存用户名的变量
    var name_01;
    name_01="marry";
    //声明保存年龄的变量
    var age=18; //声明的同时赋值
    //声明保存邮箱的变量
    var email="";
    //一次声明多个变量 用，隔开
    var name_01="",age=18,email="",address;
</script>

说明：省略var声明的变量是全局变量(不推荐)

JavaScript的数据类型

ECMAScript中包含两种数据类型：
简单数据类型(基本数据类型)：Undefined、Null、Boolean、Number、String
复杂数据类型：Object

操作符 typeof
功能：检测变量类型
语法：typeof 变量 / typeof(变量)
返回值：string类型，值有可能是:String,number,boolean,object,undefined,function

1
2
3
4
5
6
    //声明保存用户名的变量
    var name_01;
    name_01="marry";
    console.log(name_01) //在控制台打印(在开发者工具中的console中查看)
    console.log(typeof name_01)//在控制台打印name_01的数据类型
</script>

说明：1.省略var声明的变量是全局变量 2.不推荐省略var操作符来定义全局变量

数据类型：undefined null number string boolean

  • undefined(没有定义)
    undefined类型只有一个值，即特殊的 undefined

说明：一般而言，不存在需要显式地把一个变量设置为undefined值的情况，当一个变量没有被赋值和类型时，则检测的变量类型为undefined

  • null

1.null值表示一个空对象指针
2.如果定义的变量准备在将来用于保存对象，那么最好将改变量初始化为null而不是其他值

说明：undefined值是派生自null值的，所以undefined==null的返回结果是true

  • number

1.number表示整数和浮点数
2.特殊类型NaN(not a number)：即非数值，是一个特殊的数值 [本来应该返回一个数值，但无法显示为数值就会显示为NaN]
3.NaN也属于number类型
4.isNaN()
语法：isNaN(n)
功能：检测n是否是”非数值”
返回值：Boolean（true/false）

说明：任何涉及NaN的操作(如NaN/10)都会返回NaN，NaN与任何值都不相等，包括NaN本身
isNaN()对接收的数值，先尝试转换为数值，再检测是否为非数值

  • String
    String类型用于表示由零个或多个16位Unicode字符组成的字符序列，即字符串,可以由 “ 或 ‘ 表示

  • Boolean
    用于表示真假的类型，true表示真，false表示假
    类型转换：

1.除0之外的所有数字，转换为布尔型都为true
2.除” “[空]之外的所有字符，转换为布尔型都为true
3.null和undefined转换为布尔型位false

数据转换
有3个函数可以把非数值转换为数值：Number() parseInt() parseFloat()

Number()可以用于任何数据类型
parseInt()和parseFloat()则专门用于把字符串转换为数值

1
2
3
4
5
6
7
8
9
10
```

Number()：将一个数值强制转换为数字类型，遇到字符串转换为NaN

parseInt()：会忽略字符串前面的空格直至找到第一个非空格字符

1. parseInt()转换空字符串返回NaN[必须是数字开头，否则返回NaN]
2. parseInt()这个函数提供第二个参数：转换时使用的基数(即进制)

```console.log(parseInt("0xf",16))

parseFloat():：从第一个字符开始解析每个字符，直至遇见一个无效的浮点数字符为止
除了第一个小数点有效外，parseFloat()与parseInt()的第二个区别在于它始终都会忽略前导的0

1
2
3
4
5
6
7
8
9
10
11
12
    var id="16";
    var name_01="marry";
    id=Number(id);//把id强制转换为数字类型
    name_01=Number(name_01);
    console.log(typeof id);
    console.log(name);//打印结果为NaN

    var topval=parseInt("28px");
    var c="abc58"
    console.log(topval);
    console.log(parseInt(c));//打印结果为NaN，因为parseInt操作的参数必须以数字开头，否则会转换为NaN
</script>

toString()与String()
语法：str.toString()
功能：将str转换为字符串
返回值：str的一个副本
参数：str是要转换的内容，可以是数值、布尔值 、对象和字符串
在不知道要转换的值是不是null或undefined的情况下，还可以使用String()函数，它能够将任何类型的值转换为字符串

ids
1
2
3
var idstr=ids.toString();
或
console.log(String(ids));

表达式:将同类型的数据(如常量、变量、函数等)用运算符号按一定的规则连接起来的，有意义的式子称为表达式。

操作符
分类：算数操作符、逻辑操作符、赋值操作符、比较操作符、三元操作符

  • 算数操作符：+ - * / %
    递增：++a与a++都是对a进行递增操作
    区别：++a先返回递增之后的a的值，++a先返回a的原值，再返回递增后的值
    递减同理
  • 赋值操作符：简单赋值：= 复合赋值：+=、-=、*=、/=、%=
    a+=5相当于a=a+5 str+=”world”相当于str=str+”world” 其他同理
  • 比较操作符：>、<、>=、== 、=== 、!=、!==
    == ：相等，只比较值是否相等 === ：相等，比较值的同时比较数据类型是否相等
    !=：不想等，比较值是否不想等 !==：不相等，比较值的同时比较数据类型是否不相等
    返回值：boolean型
  • 三元操作符
    语法：条件?执行代码1:执行代码2
    可代替简单的if语句，如果条件成立执行代码1，否则执行代码2
result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
```

* 逻辑操作符：
①&&与：
只要有一个条件不成立，返回false
在有一个操作数不是布尔值的情况下，逻辑与操作就不一定返回值
遵循规则：
1.如果第一个操作数隐式类型转换后为true，则返回最后一个操作数
2.如果第二个操作数隐式类型转换后为false，则返回第一个操作数(操作数隐式类型参考布尔型类型转换)
3.如果有一个操作数是null/NaN/undefined，则返回null/NaN/undefined
/
②||或：
只要有一个条件成立，返回true
遵循规则：
1.如果第一个操作数隐式类型转换后为true，则返回第一个操作数
2.如果第二个操作数隐式类型转换后为false，则依次往后判断返回操作数
3.如果有一个操作数是null/NaN/undefined，则返回null/NaN/undefined
/
③!非：
说明：1.无论操作数是什么类型，逻辑非都会返回一个布尔值
2.!!同时使用两个逻辑非操作符时：
-第一个逻辑非操作会基于无论什么操作数返回一个布尔值
-第二个逻辑非则对该布尔值求反

```console.log(!!" ");//false
console.log(!!"blue");//true

JavaScript流程控制语句

JavaScript条件语句：分支语句，循环语句

if语句
语法一：if(条件){statement1;}
如果条件不是Boolean值，ECMAScript会用Boolean方法强制转为布尔型
语法二：if(条件){statement1;}else{statement2;}
语法三：if(条件){statement1;}else if{statement2;}else{statement3;}

if语句嵌套

1
2
3
4
5
6
7
8
9
10
var password=prompt("设置密码");
if(password.length!=6){
    alert("请输入6位数字密码");
}else{
    if(isNaN(password)){
        alter("密码必须是数字");
    }else{
        alter("密码设置正确");
    }
}

length 语法：String.length:获取String字符串长度，返回值number
NaN与任何值都不相等，包括NaN本身,所以if(num==NaN)不成立

alert()：弹出警告对话框

prompt()：弹出输入框 返回值：点击确定，返回输入内容。点击取消，返回null

获取星期
语法：new Date.getDay()
功能：获取星期
返回值：number(0-6) 0为星期日

week
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
```

**switch语句**：多条件判断(超过3种)
语法：switch(表达式){case value:statement1;break;……default:statement;}

```var week=new Date().getDay();
switch(week){
    case 0:
    document.write("今天是星期日");
    break;
    case 1:
    document.write("今天是星期一");
    break;
    case 2:
    document.write("今天是星期二");
    break;
    case 3:
    document.write("今天是星期三");
    break;
    case 4:
    document.write("今天是星期四");
    break;
    case 5:
    document.write("今天是星期五");
    break;
    default:document.write("今天是星期六")
}

输出：语法：document.write(“内容”) 功能：向浏览器输出内容(在页面内)

代码优化

weekstr
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
switch(week){
    case 0:
    weekstr="日";
    break;
    case 1:
    weekstr="一";
    break;
    case 2:
    weekstr="二";
    break;
    case 3:
    weekstr="三";
    break;
    case 4:
    weekstr="四";
    break;
    case 5:
    weekstr="五";
    break;
    weekstr="六";
}
document.write("今天是星期"+weekstr);

循环语句：for for-in while do…while

  • for语句
    语法：for(语句1;语句2;语句3){被执行代码块;}
    语句1在循环开始前执行，语句2定义运行循环的条件，语句3在循环已被执行之后执行
    循环与循环嵌套 遵循规则：

1.外层为假时内层不执行 2.先执行外层再执行内层，直到内层的条件为假时再返回外层去执行

  • while语句
    语法：while(条件){需要执行的代码;}
  • do…while语句
    语法：do{需要执行的代码;}while(条件)
    这种语法的循环至少要被执行一次[先执行再判断条件]
  • for与while的区别：for适合已知循环次数的循环体，while适合未知循环次数的循环体
  • break语句：立即退出循环 continue语句：结束本次循环，继续开始下一次
num
1
2
3
4
5
6
for(var i=1;i<10;i++){
    if(i%5==0){
        break;//输出1234
        continue；//输出12346789
    }
}

JavaScript函数

函数的作用：通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行
函数的定义：函数使用function声明，后跟一组参数以及函数体
把需要反复调用的代码封装在function里

functionName([arg0,arg1,…]参数){statement;}
1
2
3
4
5
6
7
8
9
10
11
```

> 说明：1.functionName是要定义的函数名，属于标识符(命名规则)
    2.[]中的arg为函数的参数 3.[]说明里面的内容不是必须的，它不是语法

函数的调用： 语法：函数名[arg1,…]

```function myFun(){
    alert("我是一个函数");
}
myFun();

函数的返回值：任何函数通过return语句，后面跟着返回的值来实现返回值

add(num1,num2){var sum
1
2
console.log(add(3,5));alert(add(99,789));
var s=add(-1,-9);console.log(s);document.write('-1+-9='+s);

说明：1.函数会在执行完return语句之后停止并立即退出
2.return语句也可以不带有任何返回值，用于提前停止函数执行又不需要返回值的情况

JavaScript中的参数
arguments：ECMAScript中的参数在内部用一个数组来表示，在函数体内通过argument对象来访问这个数组参数

说明：1.arguments对象只是与数组类似，并不是array的实例
2.[]语法访问它的每一个元素
3.length属性确定传递参数个数

inner(){
1
2
3
4
5
6
7
8
9
    console.log(arguments.length);
    console.log(arguments[1]);//打印5
}
inner(0,5);
function add(num1,num2){
    argument[0]=99;
    console.log(num1);//打印99
}
add(55,88)
1
2
3
4
5
6
7
8
9
function getAvg(){
    var sum=0,len=arguments,length,i;
    for(i=0;i<len;i++){
        sum+=arguments[i];
    }
    return sum/len;
}
var avg=getAvg();
console.log(avg);

JavaScript内置对象

ECMAScript中的Array数组：每一项可以保存任何类型的数据大小，可以动态调整

创建数组
1.使用Array构造函数 语法：new Array()

说明：1.预先知道数组要保存的项目数量 var num=new Array(3);
2.向Array构造函数中传递数组应包含的var num=new Array(1,3,6,9);

2.使用数组字面量表示法 var num=[“1”,”2”,”3”];
由一对包含数组项的方括号[]表示，多个数组项之间以逗号隔开
var info=[6,”marry”,true]

数组元素的读写：读取和设置值时，使用方括号[]并提供相应的索引，索引是从0开始的正整数

数组长度：
语法：array.length
功能：获取数组array的长度
返回值：number

说明：1.通过设置length可以从数组的末尾移除项或向数组中添加新项
var arr=[“a”,”b”,”c”,”d”]; arr.length=3;console.log(arr);//打印[“a”,”b”,”c”]
2.把一个值放在超出当前数组大小的位置上时，会重新计算数数组长度值，长度值等于最后一项索引+1
arr[99]=”z”;console.log(arr.length);//打印100

掌握数组的栈方法 push unshift pop shift

  • push()
    语法：arrayObject.push()
    功能：把它的参数顺序添加到arrayObject的尾部
    返回值：把指定的值添加到数组后的新长度(number)
  • unshift()
    语法：arrayObject.unshift()
    功能：把它的参数顺序添加到arrayObject的头部
    返回值：把指定的值添加到数组后的新长度(number)
num
1
2
console.log(size);//打印6，数组长度
console.log(num);//打印[9,6,2,7,8]
  • pop()
    语法：arrayObject.pop()
    功能：删除arrayObject的最后一个元素
    返回值：被删除的那个元素
  • shift()
    语法：arrayObject.shift()
    功能：删除arrayObject的第一个元素
    返回值：被删除的那个元素

数组的转换方法
join()
语法：arrayObject.join(分隔符)
功能：用于把数组中的所有元素放入一个字符串
返回值：字符串

nums
1
2
3
4
var str=nums.join();//打印2，4，5
2，4，5字符串类型 默认用，隔开
var word=["border","left","color"];var wordstr=word.join("-");
console.log(wordstr);//打印border-left-color

数组的重排序方法：reverse sort concat slice

  • reverse() [反序]
    语法：stringObject.reverse()
    功能：用于颠倒数组中元素的顺序
    返回值：数组
nums
1
2
var strs=["a","b","c","d"]; var newstr=strs.reverse().join("")
console.log(newstr)//返回dcba字符串
  • sort() [排序]
    语法：arrayObject.sort(sortby)
    功能：用于对数组的元素进行排序
    返回值：数组

说明：1.即使数组中的每一项都是数值，sort()方法比较的也是字符串
2.sort()方法可以接收一个比较函数作为参数

arr
1
2
3
4
//降序return参数1<参数2
arr.sort(function(a,b){return a<b});
//升序return参数1>参数2
arr.sort(function(a,b){return a>b});

concat()
语法：arrayObject.concat()
功能：用于连接两个或多个数组
返回值：数组

arr1
1
arr3=arr1.concat(arr2,["m",9,8]);//打印["a","b","c","d",1,3,"m",9,8]

slice()
语法：arrayObject.slice(start,end)
功能：从已有的数组中返回选定的元素
参数：start(必需)：规定从何处开始选取，如是负数，从数组尾部开始算起
end(可选)：规定从何处结束选取，是数组片段结束处的数组下标
返回值：数组

说明：1.如果没有指定end，切分的数组包含从start到数组结束的所有元素
2.如slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置

colors
1
2
var newColors=colors.slice(2,4);//["yellow","black"]
var newColors=colors.slice(-4,3);//5+(-4)=1,所以是1，3

splice()：

  • 删除
    语法：arrayObject.splice(index,count)
    功能：删除从index处开始的0个或多个元素
    返回值：含有被删除元素的数组

说明：count是要删除的项目数量，如果设置为0，则不会删除项，且如果不设置，则删除从index开始的所有值。
var arr=[“a”,”b”,”c”,”d”]; var delArr=arr.splice(2,2);[“a”,”b”]

  • 插入
    语法：arrayObject.splice(index,0,item1,item2…)
    功能：在指定位置插入值
    参数：index：起始位置 0：要删除的项数 item：插入的项
    返回值：数组
insertArr
1
2
3
4
5
6
7
8
9
10
11
```

* 替换
语法：arrayObject.splice(index,count,item1…)
功能：在指定位置插入值，且同时删除任意数量的项
参数：index：起始位置 count：要删除的项数 item：插入的项
返回值：从原始数组中删除的项(如果没有删除任何项，则返回空数组)

```var arr=["a","b","c","d"];
var replaceArr=arr.splice(1,2,"x","y","z");
console.log(replaceArr);//["a","x","y","z""d"]

为数组实例添加的两个位置方法：indexOf lastindexOf

  • indexOf()
    语法：arrayObject.indexOf(searchvalue,startIndex)
    功能：从数组的开头(位置0)开始向后查找
    参数：searchvalue：必需，要查找的项 startIndex：可选，起点位置的索引
    返回值：number 查找的项在数组中的位置，没有找到的情况下返回-1
nums
1
2
var pos=nums.indexof(7);//打印1，第一个7出现的位置
var pos=nums.indexof(7,3);//从起始位置为3时出现的，打印3
  • lastIndexOf()
    语法：arrayObject.lastIndexOf(searchvalue,startIndex)
    功能：从数组的末尾开始向前查找
    参数：searchvalue：必需，要查找的项 startIndex：可选，起点位置的索引
    返回值：number 查找的项在数组中的位置，没有找到的情况下返回-1

两个方法的说明：1.在比较第一个参数与数组中每一项时，会使用全等操作符，即要求查找的项必须严格相等(数据类型) 2.数组的位置方法是ECMAScript5为数组实例新增的，所以支持的浏览器只有：IE9+ FireFox2+ Safari3+ Opera9.5和chrome

1
2
3
4
5
6
7
8
9
function ArrayIndexOf (arr,value){
    for(var i=0;i<array.length;i++){
        if(arr[i]===value){
            return i;
        }
    }
    return -1;
}
var pos2=ArrayIndexOf(nums,1);

JavaScript中的String

掌握字符串对象的方法：charAt chatCodeAt indexOf lastIndexOf replace toUpperCase toLowerCase

  • charAt与chatCodeAt()
    语法：stringObject.charAt(index)/charCodeAt(index)
    功能：返回stringObject中index位置的字符/字符的字符编码
    说明：ECMAScript5中可使用“方括号+字符索引”来访问字符串中特定的字符，但是IE7及更早的浏览器会返回undefined
str
1
console.log(str.charAt(4));打印o
  • indexOf()
    语法：stringObject.indexOf(“字符”)
    功能：从一个字符串中搜索给定的子字符串，返回子字符串的位置(第一个位置)
    返回值：数值
    说明：如果没有找到该字符串则返回1
email
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
```

* lastIndexOf()
语法：stringObject.lastIndexOf("字符")
功能：从一个字符串中搜索给定的子字符串，返回子字符串的位置(第一个位置)
返回值：数值
说明：(从后开始) 如果没有找到该字符串则返回-1

**掌握字符串对象的截取方法**slice substring substr splilt

* slice()
语法：stringObject.slice(start,end)
功能：截取子字符串
参数说明：1. start：必需，指定子字符串的开始位置
2.end：可选，表示子字符串到哪里结束，end本身不在截取范围之内，省略时截取至字符串的末尾
3.当参数为负时，会将传入的负值与字符串的长度相加
* substring()
功能与语法同slice()完全一样，区别在于：
1.当参数为负数时，自动将参数转换为0
2.substring()会将较小的数作为开始位置，将较大的数作为结束的位置
* substr()
语法：stringObject.substr(start,len)
功能：截取子字符串
参数说明：1. start：必需，指定子字符串的开始位置
2.len：可选，表示截取的字符总数，省略时截取到字符串末尾
3.当start为负数时，会将传入的负值与字符串的长度相加
4.当len为负数时，返回空字符串

```var str="hello world";
console.log(str.substr(6,3));//wor
console.log(str.substr(-5,4));//相当于(6,4)worl
console.log(str.substr(3,-4));//无
1
2
3
4
5
6
7
8
9
var url="http://baidu.com/index.txt";
function getFileFormat(url){
    var pos=url.lastIndexOf(".");
    return url.substr(pos);
}
var formatName=getFileFormat(url);
var picFormat=getFileFormat("1234.jpg");
console.log(formatName);//.txt
console.log(picFormat);//.jpg
  • split
    语法：stringObject.split(separator)
    功能：把一个子字符串分割成字符串数组
    返回值：Array
    参数说明：separator：必需，分隔符
str
1
2
3
4
5
6
7
8
9
10
11
```

* replace
语法：stringObject.replace(regexp/substr,replacement)
功能：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
返回值：string
参数说明：regexp：必需，规定子字符串或要替换的模式的regexp对象
replacement：必需，一个字符串值

```var tel="010-78978978,400-100-8789"
var newTel=tel.replace(","," ");//打印010-78978978 400-100-8789
  • toUpperCase()与toLowerCase()
    语法：stringObject.toUpperCase()/toLowerCase()
    功能：把字符串转换为大写/小写
1
2
3
4
5
6
7
8
9
10
11
function camelback(str){
    var arr=str.split("-"),newStr=arr[0];
    for(var i=1,len=arr.length;i<len;i++){
        var word=arr[i];
        newStr+=word.charAt(0).toUpperCase()+word.substr(1);
        console.log(newStr);
    }
    return newStr;
}
varcamdlFormat=camelback("border-left-color");
console.log(camelFormat);

JavaScript中的Math

  • Math.min/max()
    语法：Math.min/max()
    功能：求一组数中的最小值/最大值
    返回值：number
  • Math.ceil()
    语法：Math.ceil()
    功能：向上取整，即返回大于num的最小整数
    返回值：number
  • Math.floor()
    语法：Math.floor()
    功能：向下取整，即返回num的整数部分
    返回值：number
  • Math.round()
    语法：Math.round()
    功能：将数值四舍五入为最接近的整数
    返回值：number
  • Math.abs()
    语法：Math.abs()
    功能：返回num的绝对值
    返回值：number
  • Math.random()
    语法：Math.random()
    功能：返回大于等于0小于1的一个随机数
    返回值：number

说明：求n-m之间的随机整数的公式
random=Math.floor(Math.random()*(m-n+1)+n);
var random=Math.random();

1
2
3
4
5
var random=Math.random();console.log(random);
function getRandom(n,m){
    var choise=m-n+1;return Math.floor(Math.random())*choise+n);
}
var random=getRandom(1,100);console.log(random);

JavaScript中的data对象

创建日期对象：语法：new Date()
功能：创建一个日期对象
返回值：不传参的情况下，返回当前的日期对象，如果项根据特定的日期和时间创建日期对象，必须传入表示该日期的毫秒或者是一组用，隔开的表示年月日时分秒的参数

getFullYear()/Month()/Date()/Day()/Hours()/Minutes()/Seconds()/Time()
返回4位数年份/日期中的月份，返回值为0-11/月份中的天数/星期，返回值为0-6/小时/分/秒/表示日期的毫秒数

Date对象获取的方法
setFullYear(year)/Month(mon)/Date()/Day()/Hours()/Minutes()/Seconds()/Time()
设置日期中的月份，从0开始，0表示一月，设置日期中的星期，从0开始，0表示星期日，以毫秒设置日期，会改变整个日期

JavaScript DOM基础

DOM是可扩展置标语言的标准编程接口，与平台和语言无关的应用程序接口
DOM查找方法

  • 语法：document.getElementById(“id”)
    功能：返回对拥有指定ID的第一个对象的引用
    返回值：DOM对象
    说明:id为DOM元素上id属性的值
class
1
2
3
4
<script>
var box=document.getElementById("box");
console.log(box);//打印整个div代码
</script>
  • 语法：document.getElementsByTagName(“tag”)
    功能：返回一个对所有tag标签引用的合集
    返回值：数组
    说明:tag为要获取的标签名称

设置元素样式.

  • 语法：ele.style.styleName=styleValue
    功能：设置ele元素的css样式
    说明:1.ele为要设置样式的DOM对象
    2.styleName为要设置的样式名称
    ①不能使用“-”连字符font-size ②使用驼峰命名形式fontSize
    3.style Value为设置的样式值
lis
1
2
3
for(var i=0;len=lis.length;i<len;i++){
    lis[i].style.color="#00f";
}

通过style给其设置样式必须是DOM对象，不能是数组

  • innerHTML
    语法：ele.innerHTML
    功能：返回ele元素开始和结束标签之间的HTML和文本
    语法：ele.innerHTML=”html”
    功能：返回ele元素开始和结束标签之间的HTML内容为html
  • className
    语法：ele.className
    功能：返回ele元素的class属性
    语法：ele.className=”cls”
    功能：返回ele元素的class属性为cls
    如果元素有两个以上的class属性值，那么获取这个元素的className属性时会将它的class属性值都打出来

获取html上的属性
语法：ele.getAttribute(“attribute”)
功能：获取ele元素的attribute属性
说明：1.ele是要操作的dom对象 2.attribute是要获取的html属性
获取标签属性语法
DOM对象.属性(如p、id，不能写class)只能获取标准的标签的自定义属性用getAttribute

id
1
2
var p=document.getElementById("text");
console.log(p.getAttribute("data-type"));

设置属性
语法：ele.setAttribute(“attribute”,value)
1.setAttribute方法必须要有两个参数
2.如果value是字符串需加引号
3.setAttribute()有兼容性问题
功能：在ele元上设置属性

说明：1.ele是要操作的dom对象
2.attribute为要设置的属性名称
3.value为设置的attribute属性的值

删除属性
语法：ele.removeAttribute(“attribute”)
功能：删除ele上的attribute属性

说明：1.ele是要操作的dom对象
2.attribute是要删除的属性名称

JavaScript DOM事件

什么是事件：事件就是文档或浏览器窗中发生的一些特定的交互瞬间

HTML事件：直接在HTML元素标签内添加事件，执行脚本
语法：

事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
功能：在HTML元素上绑定事件
说明：执行脚本可以是一个函数的调用

**鼠标事件**
-onload：页面加载时触发 -onlick：鼠标点击时触发 -onmouseover：鼠标滑过时触发 -onmouseout：鼠标离开时触发 -onfoucs：获得焦点时触发 -onblur：失去焦点时触发 -onchange：域内容改变时发生

```<input type="button" value="弹 出" onclick="alert('我是按钮')">
<!--鼠标划过按钮时调用mouseoverFn的函数-->
<div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">开始</div>
<div class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">结束</div>
<script>
    function mouseoverFn(btn,bgColor){// 鼠标划过按钮时，按钮的背景变为红色
        btn.style.background=bgColor;
    }
    function mouseoutFn(btn,bgColor){
        btn.style.background=bgColor;
    }
</script>

关于this指向：在事件触发的函数中，this是对该DOM对象的引用

DOM 0级事件
1.通过DOM获取HTML元素 2.(获取HTML元素).事件=执行脚本
语法：ele事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

不建议使用HTML事件的原因：
1.多元素绑定相同事件时效率低
2.不建议在HTML元素中写JavaScript代码

class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
        // 获取按钮
        var btn=document.getElementById("btn");
        function clickBtn(){
           alert("我是按钮");
        }
        // 点击按钮调用clickBtn这个函数
        btn.onclick=clickBtn;
        // 给按钮绑定事件,this是对该DOM元素的引用
        /*btn.onclick=function(){
           // 判断如果按钮是锁定，则显示为解锁，变为灰色，否则显示为锁定，变为蓝色
           if(this.className=="lock"){
               this.className="unlock";
               this.innerHTML="解锁";
           }else{
               this.className="lock";
               this.innerHTML="锁定";
           }
           if(this.innerHTML=="锁定"){
               this.className="unlock";
               this.innerHTML="解锁";
           }else{
               this.className="lock";
               this.innerHTML="锁定";
           }
        }*/
</script>

自定义函数：function dickBtn(){alert(“ “);} btn.onclick=clickBtn;//不能加()
onfoucs事件用于：-input标签type为text.password -textarea标签

class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="left">
<input type="text" id="phone" placeholder="请输入手机号码">
</div>
<div class="tip" id="tip">
    请输入有效的手机号码
</div>
</div>
<script>
       window.onload=function(){
         // 获取文本框和提示框
         var phone=document.getElementById("phone"),
              tip=document.getElementById("tip");
          // 给文本框绑定激活的事件
          phone.onfocus=function(){
         // 让tip显示出来
         tip.style.display='block';
          }
          // 给文本框绑定失去焦点的事件
          phone.onblur=function(){
             // 获取文本框的值,value用于获取表单元素的值
             var phoneVal=this.value;
             // 判断手机号码是否是11位的数字
             // 如果输入正确，则显示对号图标，否则显示错号图标
             if(phoneVal.length==11 && isNaN(phoneVal)==false){
                tip.innerHTML='<img src="img/right.png">';
             }else{
            tip.innerHTML='<img src="img/error.png">';
             }
          }
       }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
       // 页面加载
       window.onload=init;
       // 初始化
       function init(){
          // 获取下拉菜单
          var menu=document.getElementById("menu");
          // 给菜单绑定change事件,一般作用域select或checkbox或radio
          menu.onchange=function(){
             // 获取当前选中的值
             //var bgcolor=this.value;
             var bgcolor=menu.options[menu.selectedIndex].value;
             // 如果bgcolor为空，则下面的脚本将不执行
             // if(bgcolor=="")return;
             // 设置body的背景色
             // 如果bgcolor为空，则将背景色设为白色，否则是选择的颜色
             if(bgcolor==""){
                document.body.style.background="#fff";
             }else{
            document.body.style.background=bgcolor;
             }
          }
       }
</script>

鼠标事件
-onsubmit(onsubmit事件不是加在按钮上而是表单上)：表单中的确认按钮被点击时发生 -onmousedown：鼠标按钮在元素上按下时触发 -onmousemove：在鼠标指针移动时发生 -onmouseup：在元素上松开鼠标按钮时触发 -onresize：调整浏览器窗口大小时触发 -onscroll：拖动滚动条时触发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
       var box=document.getElementById("box");
       // 绑定按下的事件
       box.onmousedown=function(){
         console.log("我被按下了");
       }
       // 绑定移动的事件
       box.onmousemove=function(){
         console.log("我被移动了");
       }
       // 绑定松开的事件
       box.onmouseup=function(){
         console.log("我被松开了");
       }
       // 绑定点击的事件
       box.onclick=function(){
         console.log("我被点击了");
       }
       // 浏览器窗口尺寸发生改变时
       window.onresize=function(){
         console.log("我的尺寸被改变了");
       }
       // 拖动滚动条
       window.onscroll=function(){
         console.log("我被拖动了");
       }
       box.onscroll=function(){
         console.log("我是DIV的滚动条");
       }
</script>

键盘事件与keyCode属性
-onkeydown：在用户按下一个键盘按键时发生 -onkeypress：在键盘按键被松开时发生 -keycode：返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码或键的代码 [event代表事件的状态，如触发event对象的元素、鼠标的位置及状态]

1
document.onkeydown=function(event){console.log(event.keyCode);}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<p class="text">
<b id="showcount">您还可以输入</b>
<span id="totalbox"><em id="count">30</em>/30</span>
</p>
<div class="input">
<textarea name="" id="text" cols="70" rows="4"></textarea>
</div>
</div>
<script>
   // 获取文本框及其他元素
       var text=document.getElementById("text");
       var total=30;
       var count=document.getElementById("count");
       var showcount=document.getElementById("showcount");
       var totalbox=document.getElementById("totalbox");
   // 绑定键盘事件
   document.onkeyup=function(){
     // 获取文本框值的长度
     var len=text.value.length;
     // 计算可输入的剩余字符
     var allow=total-len;
     var overflow=len-total;
     // 如果allow小于0
     if(allow<0){
              showcount.innerHTML="您已超出"+overflow;
              totalbox.innerHTML='';
     }else{
      showcount.innerHTML='您还可以输入';
      totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
     }
   }
</script>

JavaScript BOM基础

BOM(browser object model)浏览器对象模型
BOM对象有：window navigator screenhistory cocation document event

window
widow是浏览器的一个实例，在浏览器中，window对象有双重角色。它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象(Global-全局对象)

全局变量：脚本任何一个地方都能调用的变量 全局方法：脚本任何一个地方都能调用的方法

全局变量
window声明：window.变量名=值
关键字声明：var 变量名=值

全局函数
window声明：window.函数名=function(){}
关键字声明：function 函数名(){}

所有的全局变量和全局方法都被归在window上

window对象的方法.

  • 语法：window.alert(“content”)
    功能：显示带有一段消息和一个确认按钮的警告框
  • 语法：window.confirm(“message”)
    功能：显示一个带有指定消息和OK及取消按钮的对话框
    返回值：如果用户点击确定按钮，则confirm()返回true，如果用户点击取消按钮，则confirm()返回false
  • 语法：window.prompt(“text,defaultText”)
    参数说明：text：要在对话框中显示的纯文本(不是HTML格式的文本)
    defaultText：默认的输入文本
    返回值：如果用户单击提示框的取消按钮，则返回null
    如果用户单击提示框的确认按钮，则返回输入字段当前显示的文本
  • 语法：window.open(pageURL,name,parameters)
    功能：打开一个新的浏览器窗口或查找一个已命名的窗口
    参数说明：pageURL：子窗口路径 name：子窗口句柄(name声明了新窗口的名称，方便后期通过name对子窗口进行引用) parameters：窗口参数(各参数用，隔开)
    width：窗口宽度 height：窗口高度 left：窗口x轴坐标 top：窗口y轴坐标 toolbar：是否显示浏览器的工具 menubar：是否显示菜单栏 scrollbars：是否显示滚动条 location：是否显示地址字段 status：是否添加状态栏
  • 语法：window.close()
type
1
2
3
4
5
6
7
8
9
10
11
<script>
       window.onload = function(){
         // 打开子窗口，显示newwindow.html
         window.open("newwindow.html","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
         var quit = document.getElementById("quit");
         // 点击关闭当前窗口
         quit.onclick = function(){
         window.close();
         }
       }
</script>

window对象方法-定时器
JavaScript是单线程语言，单线程就是所执行的代码必须按照顺序

  • 超时调用
    语法：setTimeout(code,millisec)
    功能：在指定的毫秒数后调用函数或计算表达式
    参数：code：要调用的函数或要执行的JavaScript代码串
    millisec：在执行代码前需等待的毫秒数

说明：setTimeout()只执行code一次。如果要多次调用，可以让code自身再次调用setTimeout()

1
2
3
4
5
6
7
8
9
10
       //setTimeout("alert('hello')",4000);
       var fnCall=function(){
      alert("world");
       }
       var timeout1=setTimeout(function(){
          alert("hello");
       },2000)
       clearTimeout(timeout1);
       //setTimeout(fnCall,5000);
</script>

setTimeout方法返回一个ID值通过它取消超时调用

  • 清除超时调用
    语法：cleanTimeout(id_of_settimeout)
    功能：取消由setTimeout()方法设置的timeout
    参数：id_of_settimeout：由setTimeout()返回的ID值，该值标识要取消的延迟执行代码块

  • 间歇调用
    语法：setInterval(code,millisec)
    功能：每隔指定的时间执行一次代码
    参数：1.code：要调用的函数或要执行的代码串

2.millisec：周期性执行或调用code之间的时间间隔，以毫秒计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
       /* var intervalId=setInterval(function(){
           console.log("您好");
        },1000)
        // 10秒之后停止打印
        setTimeout(function(){
            clearInterval(intervalId);
        },10000);*/
        var num=1,
            max=10,
            timer=null;
       // 每隔1秒针num递增一次，直到num的值等于max清除
      /* timer=setInterval(function(){
           console.log(num);
           num++;
           if(num>max){
              clearInterval(timer);
           }
       },1000)*/
       // 使用超时调用实现
       function inCreamentNum(){
           console.log(num);   // 1 2 3 10
           num++;
           if(num<=max){
              setTimeout(inCreamentNum,1000);
           }else{
          clearTimeout(timer);
           }
       }
       timer=setTimeout(inCreamentNum,1000);
</script>

location对象：location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性

常用属性

  • 语法：location.herf
    功能：返回当前加载页面的完整URL
    location.herf与window.location.herf等价
  • 语法：location.hash
    功能：返回URL中的hash(#号后跟0或多个字符)，如果不包含则返回空字符串
class
1
2
3
4
5
6
7
8
9
10
11
<div class="box2"></div>
<input type="button" id="btn" value="返回顶部">
<script>
       //console.log(location.href);
       //console.log(location.hash);
       var btn=document.getElementById("btn");
       btn.onclick=function(){
          location.hash="#top";
       }
       console.log(location.pathname);
</script>
  • 语法：location.host
    功能：返回服务器名称和端口号(如果有)
  • 语法：location.hostname
    功能：返回不带端口号的服务器名称
  • 语法：location.pathname
    功能：返回URL中的目录和/或文件名
  • 语法：location.port
    功能：返回URL中指定的端口号，如果没有，返回空字符串
  • 语法：location.protocol
    功能：返回页面使用的协议
  • 语法：location.search
    功能：URL的查询字符串，这个字符串以问号开头

位置操作.
改变浏览器位置的方法：location.herf属性
location对象其他属性也可以改变URL：location.hash location.search

  • location.replace()
    语法：location.replace(url)
    功能：重新定向URL

说明：使用location.replace不会在历史记录中生成新纪录

  • location.reload()
    语法：location.reload(url)
    功能：重新加载当前呈现的页面

说明：location.reload()有可能从缓存中加载 location.reload(true)从服务器重新加载

type
1
2
3
4
5
6
7
8
9
10
<script>
      /*  setTimeout(function(){
            //location.href='index6.html';
            // window.location='index6.html';
            location.replace("index6.html");
        },1000)*/
         document.getElementById("reload").onclick=function(){
         location.reload(true);
         }
</script>

BOM中的history对象
history对象保存了用户在浏览器中访问页面的历史记录

History对历史象
语法：history.back()
功能：回到历史记录的上一步
说明：相当于使用了history.go(-1)
语法：location.forword()
功能：回到历史记录的下一步
说明：相当于使用了history.go(1)
语法：history.go(-n)
功能：回到历史记录的前n步
语法：history.go(n)
功能：回到历史记录的后n步

screen对象
screen对象包含有关客户端显示屏幕的信息

screen对象属性：
语法：screen.availwidth
功能：返回可用的屏幕宽度
语法：screen.availheight
功能：返回可用的屏幕高度

-获取窗口文档显示区的高度和宽度，可以使用innerHeight和innerWidth
-获取显示屏幕显示区的高度和宽度，可以使用availHidth和availWidth

Navigator对象
UserAgent：用来识别浏览器名称、版本、引擎以及操作系统等信息的识别
var explorer=navigator.userAgent; alert(explorer);
indexof()方法返回某个指定的字符串值在字符串中首次出现的位置，如果没有出现过，返回1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getBrowser(){
           //获取userAgent属性
           var explorer = navigator.userAgent,browser;
           if(explorer.indexOf("MSIE")>-1){
              browser = "IE";
           }else if(explorer.indexOf("Chrome")>-1){
              browser = "Chrome";
           }else if(explorer.indexOf("Opera")>-1){
              browser = "Opera";
           }else if(explorer.indexOf("Safari")>-1){
              browser = "Safari";
           }
           return browser;
       }
       var browser = getBrowser();
       console.log("您当前使用的浏览器是："+browser);