前端之JavaScript
一.JavaScript基础
1.引入方式
1 直接编写
<script>
alert('hello yuan')
</script>
2 导入文件
<script src="hello.js"></script>
2.数据类型
number ----- 数值
- 不区分整型数值和浮点型数值;
- 所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式
- 能表示的最大值是±1.7976931348623157 x 10308
- 能表示的最小值是±5 x 10 -324
整数：
在JavaScript中10进制的整数由数字的序列组成
精确表达的范围是
-9007199254740992 (-253) 到 9007199254740992 (253)
超出范围的整数，精确度将受影响
浮点数：
使用小数点记录数据
例如：3.4，5.6
使用指数记录数据
例如：4.3e23 = 4.3 x 1023
16进制和8进制数的表达:
16进制数据前面加上0x，八进制前面加0;16进制数是由0-9,A-F等16个字符组成;8进制数由0-7等8个数字组成
boolean ----- 布尔值
Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
string ----- 字符串
是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；JavaScript中没有字符类型；常用特殊字符在字符串中的表达；
字符串中部分特殊字符必须加上右划线\；常用的转义字符 \n:换行 \':单引号 \":双引号 \\:右划线
undefined ----- undefined
Undefined 类型只有一个值，即 undefined。
当声明的变量未初始化时，该变量的默认值是 undefined。
当函数无明确返回值时，返回的也是值 "undefined";
null ----- null
3.运算符
算术运算符：
+ - * / % ++ --
注意一：
a++相当于a+=1
var res = a++ \\先赋值再计算 var res = ++a \\先计算再赋值
注意二：
+还可以用于字符串的连接
-还可以表示负号
注意三：
比较运算符：
> >= < <= != == === !==
逻辑运算符：
&& || ！
赋值运算符：
= += -= *= /=
字符串运算符：
+ 连接，两边操作数有一个或两个是字符串就做连接运算
流程控制
分支控制
if (表达式1) { 语句1; }else if (表达式2){ 语句2; }else if (表达式3){ 语句3; } else{ 语句4; }
var mum=78; if (mum>90){ alert("lihai"); }else if (mum>80){ alert("haixing"); }else { alert("zhazha") }
switch (表达式) { case 值1:语句1;break; case 值2:语句2;break; case 值3:语句3;break; default:语句4; }
循环控制
for循环
for(初始表达式;条件表达式;自增或自减) { 执行语句 …… }
for( 变量 in 数组或对象) { 执行语句 …… }
while循环
while (条件){ 语句1； ... }
异常处理
try { //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 } catch (e) { // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 } finally { //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。 }
注：主动抛出异常 throw Error('xxxx')
二.JavaScript的对象
String对象
字符串创建(两种方式)
① 变量 = “字符串”
② 字串对象名称 = new String (字符串)
var s="hello world"; console.log(s.length); //长度 console.log(s.toUpperCase()) //大写 console.log(s.toLowerCase()) //小写 console.log(s.trim()) //去除空格 console.log(s.charAt(3)) //通过索引找字符 console.log(s.indexOf("w")) //通过字符找字符 // x.substr(start, length) －－－－start表示开始位置，length表示截取长度 // x.substring(start, end) －－－－end是结束位置 console.log(s.substr(2,2)) console.log(s.substring(2,4)) console.log(s.slice(2,4)) console.log(s.replace("world","hantao")) console.info(s.split(" ")) //切割
Array对象
var arr=[11,"hello",true]; console.log(arr,typeof arr) //join方法:字符串拼接 var s=["hello","world"]; var res=s.join("---"); console.log(res) //concat var a=[1,2,3]; var b=a.concat(4,5); alert(b) //tostring 转换为字符串 var c=['123','789']; console.log(c.toString()) //reverse 反转 //sort 排序 按首字母的ASCII比较 var arr=[12,34,56,78,01]; console.log(arr.reverse()); console.log(arr.sort()); //slice(start,end) var arr1=["a","b","c","d","e","f","g"]; console.log(arr1.slice(2,4)); //c,d console.log(arr1.slice(4)); //e,f,g console.log(arr1.slice(4,-1)); //e,f //push pop 添加&删除 var arr2=[11,22,33]; arr2.push(44); //arr2=[11,22,33,44] arr2.pop(); //arr2=[11,22,33]删最后一个，返回值是删除值 //unshift shift var arr3=[11,22,33]; arr3.unshift("44");//添加到最前 arr3.shift();//从前面开始删
Date对象
//Date var dat=new Date() console.log(dat) //Sat Dec 30 2017 09:47:00 GMT+0800 (中国标准时间) console.log(typeof dat) //object console.log(dat.toLocaleString()) //2017年12月30日 9:47:00 var dat2=new Date("2012/12/12") console.log(dat2) var dat3=new Date(5000) console.log(dat3)
获取日期和时间
getDate() 获取日
getDay () 获取星期
getMonth () 获取月（0-11）
getFullYear () 获取完整年份
getYear () 获取年
getHours () 获取小时
getMinutes () 获取分钟
getSeconds () 获取秒
getMilliseconds () 获取毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
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 foo() { alert(123); } foo(); function bar(x,y) { return x*y; } var ret=bar(2,4) console.log(ret) function foo1() { console.log(arguments); var s=0; for (var i=0;i<arguments.length;i++){ s+=arguments[i] } return s } var res=foo1(45,23,45); console.log(res)
//匿名函数 (function (x) { alert(x) })(123)
三.BOM
window对象
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
<script>
function begin() {
var stime=(new Date()).toLocaleString();
var ret=document.getElementById("clock");
ret.value=stime;
}
var tid;
function begin_click() {
if (tid==undefined){
begin();
tid=setInterval(begin,1000);
}
}
function End() {
clearInterval(tid);
tid=undefined;
}
</script>
history对象
forword,back,go,length
location对象
location.reload()
四.DOM
查找节点
直接查找
var ele_p=document.getElementById("p1"); console.log(ele_p); var ele_c1=document.getElementsByClassName("c2") console.log(ele_c1[0]); var ele_p1=document.getElementsByTagName("p")
导航查找
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
浙公网安备 33010602011771号