js基础汇总

来源：互联网发布：java不关闭流编辑：程序博客网时间：2024/06/07 08:17

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

一. script的引入方式

1. 头部引入

2. 外部引入（可以在头部可以在body）

3. body闭标签前引入（内部引入）一般写法

js的调试方式：

1. alert();

2. console.log();

3. document.write();

js的数据：

1. 常量

2. 变量（容器）

变量的定义：

var a = 0;

变量名命名规范：

1. 由字母数字下划线和$符组成，并且数字不能开头；

2. 不能与系统保留字重名，无二义性；

3. 变量名不能重复；

4. 见名知意。驼峰法：wangZheWei; 匈牙利命名法 aArray fnFunction oObject （一般用于元素命名）

数据类型：

1. Number数字类型

2. String

3. Boolean

4. Null

5. Object

6. Undefined

7. NAN alert(parseInt('Lee123Lee'));

8. [elementcollection] 元素集合

9. [nodelist] 节点列表

10.[Object Object]json

11.float 浮点数

12 int整数

类型转换：

显示类型转换：

Number();

String();

a.toString();

parseInt();

parseFloat();

隐式类型转换

+ 字符串连接符

+ 如果其中某一项是字符串，就把其他项转化为字符串再进行连接

- * / % 如果其中某一项是数字，就把其他项转化为数字类型再进行计算

运算符：

1.算数运算符 + - * / %；

2.赋值运算符 = （拷贝；

3.复合运算符 += -= *= /= %=

a += 3;

a = a + 3;

4. 自增运算符

a++， ++a, a--,--a

a7+++a8;

a7++ + a8;

5. 条件运算符

> , < , <=, >=,== , !=, ===,!==

与布尔值连用

== 与 === 的区别是否判断类型

!= !== 不全等

6. 逻辑运算符(连接多个条件)

&&, ||, !

&&：一假即假

||：一真即真

！：真真假假

注意短路情况。

7. 三目运算符(条件运算符)

条件 ? 表达式1 : 表达式2;

8. 表达式

由常量变量运算符组成的式子;

alert(a = 3); 返回值是3;

表达式都有返回值!!!

二、分支结构

满足某一条件，就执行某一段代码

1. if(条件) {

alert(1);

};alert(2);

如果。。。就。。。否则。。。

2. if(true) {} else{};

var a = 1;

级联式

3. if(a < 3) {

} else if(a < 5) {

}......

else{

};

switch...case

// 多分支结构

case后面的值和switch后面的条件绝定走哪个分支

注意break;

default; 可以不写

三.循环结构

满足某一条件就重复做某件事，帮助我们做重复的任务

1.while

while(循环条件){

循环体;

};

注意：while循环要控制好循环增量的变化（循环条件）

通常用于不知道循环次数。

2.do...while 循环

do{

循环体;

} while(循环条件);

与while循环的区别，不管满不满足条件，都执行一次循环体。

3. for循环

for (循环增量初始化; 循环条件控制循环次数; 循环增量的变化){

循环体;

}

4. 循环控制：

break; 跳出本层循环

continue; 跳出本次循环

循环嵌套：

// 冒泡排序

vararr = [2,7, 3, 4, 6];

// 外层循环控制趟数

for(var i = 0; i< 5; i++) {

// 内层循环控制交换次数

for(var j = 0; j< 5; j++) {

// 判断交换

if(arr[j]> arr[j + 1]){

vartemp = arr[j];

arr[j]= arr[j + 1];

arr[j+ 1] = temp;

}

} alert(arr);

四.数组

定义：能够保存多个数据(一组)的变量

var arr = new Array();

var arr = []; 字面量定义空数组

arr2 =[10]; // 是元素，而不是数组长度

遍历：

获取到数组中每一个元素

循环遍历(index 下标);

数组对象的方法

push();从尾部给数组添加元素

unshift();从头部给数组添加元素

shift();从尾部给数组添加元素

pop();从尾部删除元素

[1, 2, 3, 4, 4]

splice(1, 0, "4");[1, 4, 2, 3, 4, 4]

splice(起始位置,长度, 添加的元素);

arr.concat();数组拼接

.sort(); 数组排序默认是ASCII码排序

reverse(); 倒序

键值对 key-value;

var json1 = {a: 3, b:5, c: "hello"};

json1.a;

json1["a"];

json的遍历：

for(varkey in json1){

// key

key;

// value

json1[key];

}

五. 函数

具有一定动能的代码段。

从结构来分：

1. 无参数无返回值

2. 有参数无返回值

3. 无参数有返回值

4. 有参数有返回值

function fn1(num1,num2){

return(num1+ num2);

}

从命名上分为：

1.命名函数

2.匿名函数

应用1: 事件绑定

应用2. 让一个变量保存函数

定时器：

单次定时器：

var timer = setTimeout(function(){}, 事件);

clearTimeout(timer);

循环定时器：

var timer = setInterval(function(){}, 1000);

clearInterval(timer);

eval(string);函数

string 一定是可执行的js代码;

eval("var a = 2; var y = 3; document.write(a * b);");

// 生成一个不重复的数组

六. 对象

1. string对象

var myStr = new String("hello");

varstr = "hello";

str.length; 字符串长度

str.charAt(下标); 查询下标处的字符;

str.search(); 查询字符所在的下标，返回第一次出现的位置，如果找不到返回-1;

str.concat(); 数组拼接, 也可以用于字符串;

str.indexOf(); 类似于search，可用于数组;

str.lastIndex(); 从后向前检索，返回首次出现的下标

str.split(""); 通过所给的字符分割字符串，分割后生成一个数组

join(); 数组方法，把数组中的元素，用所给的字符串连接起来

str.substr(下标位置，范围); 取子字符串

str.substring(开始位置（包括），结束位置（不包括）);

str.slice(数字，起始下标位置, 数字，结束下标位置（不包括）); 数组方法

str.replace(string1, string2); 字符串替换，把string1替换成string2

a.toString(); 显式类型转换;

2. Date对象

记录时间的，时间对象

定义一个Date对象:

varnow = new Date();

年份获取:

varyear = now.getFullYear();

月份获取 0 ~11

varmonth = now.getMonth();

日获取

var day = now.getDate();

星期获取

var week = now.getDay();

小时获取

var hour = now.getHours();

分钟获取

var minute = now.getMinutes();

秒获取

var second = now.getSeconds();

毫秒获取

var millsecond = now.getMilliseconds();

从1970年1月1日到现在的毫秒数

时间戳

var time = now.getTime();

获取到指定时间

var future = new Date(1949, 9, 1, 8, 30, 00);

七、DOM:

1.获取元素

document.getElementById();

document.getElementsByTagName();

document.querySelector();

通过CSS获取一个

document.querySelectorAll();

通过CSS获取多个

2. oDiv.style.backgroundColor= "red";

注意给属性赋值时，是字符串

反转：oInput.checked = !oInput.checked;

3. className;

可以通过js动态的改变元素的class属性

4. this 这个

通常情况下我们用于循环事件绑定，this指代被绑定的对象

</script>

</body>

</html>

0 0