目录
1.基础知识
1.基础
-
<script type="text/javascript"></script>一般写在头文件中，一种弱语言，可以写多个，变量赋值后不要改变类型，关键字区分大小写，顾名思义，不能以数字开头。
-
alert("hello world!");警告框显示
-
document.write("hello world");打印
-
<script type="text/javascript" src="demo.js">引入外部语句
2.自动数据类型
var temp="1"+1;
alert(temp);
var tmp=1-"2";//-1
var tmp=1-"2a";//NaN
alert(tmp);
-
运算符：算术、关系、逻辑、自增、自减、赋值；
-
自动类型转换：任何类型的数据和字符串相加，其他数据类型自动转换为字符串，表示字符串拼接；
-
查看语法错误：谷歌浏览器：chome控制台F12；
3.表达式和赋值
代码规范
1.注意层级缩进；tab=4空格；
2.； ，后面跟空格 运算符=+前后空格；
3.每条语句加；
看表达式：
1.功能；
2.表达式值，比如100, 2+3；
3.细分：算术表达式；
赋值运算符：= 复合赋值运算：+=
4.强制数据类型
1.除了相加操作，任何数据类型与数字做运算，其他类型都会自动转换为数字在运算；
2.通过Boolean()强制转换为布尔型，数字0转成布尔为false，非0均为true；空字符串转为false，否则为true；特殊转为false；
3.Number（）将别的数字类型转为数字；非数字字符串转为NaN; 1.特殊：null：0；underined：NaN
4.parseInt()取整 20a转为20
5.parseFloat() 取浮点数
6.分母可以取0；
5.运算符
5.1 一元运算符
只能操作一个值的运算符；a++，a--；--a；++a
5.2 关系运算符
1. 比较字符创编码值，字符以二进制方式存储，可以转换为十进制进行比较，ASCII码表 ；
2.逐位比较；
3.两个操作数有一个是数值，则将另外一个转为数值；
在等于和不等于比较上，非数值：
1.一个操作数为布尔值，则比较前转为数值；
2.一个操作数为字符串，比较前转为数值；
3.一个为NaN,则==转为false，！=为true；
全等和全不等上====，！==，判断值相等，数据类型也必须相等
5.3 逻辑运算符
&&，||，！
6.流程语句
选择语句：
if(){
}else if(){
}
else{
}
}
switch和三目：
// switch(){
// case 常量1：
// break;
// case 常量2；
// break;
// default:
// break;
// }
/*
三目：表达式1？表达式2：表达式3；
*/
循环语句：
1.while
2.dowhile
3.for
4.break,continue;
2.数组与字符串
1.数组定义
var arr=[1,true,"hello"];
alert(arr);
alert(arr[0]);
2.属性和遍历
var arr=[1,true,"hello"];
alert(arr.length);//属性
var srr=[10,20,30,40];
alert(srr[1+2]);
var arr=[];
for(var i=0;i<10;i++)
{
arr[i]=Math.random();//随机数
}
alert(arr);
for (var i in arr)//效率高
{
document.write(arr[i]+"<br />");
}
3.栈方法和队列方法
<script type="text/javascript">
var arr=["a","b","c"];
var srr= arr.push("c","d");//返回值是长度
alert(arr);//a,b,c,c,d
alert(srr);//5
var trr=arr.pop();//返回值是去除的元素，先进后出
alert(arr);//a,b,c,c
//队列
var trr=arr.shift();//先进先出，b,c,c
alert(arr);
var srr=arr.unshift("ff");//头部插入，返回值是长度
alert(arr);//ff,b,c,c
</script>
4.方法
<script type="text/javascript">
var arr=["a","b","c"];
var arr2=["vv","ss"];
var ner=arr.concat(arr2);//合并a,b,c,vv,ss
alert(ner);
var ner=arr.slice(1,2);//截取，不包括右端
alert(ner);//b
arr.splice(1,1) //1.删除:start,长度，替换的元素
alert(arr);//a,c
arr.splice(1,0,"dd"); //2.插入
alert(arr);//a,dd,c
//替换就是先删除后插入
</script>
5.二维数组
在数组元素中元素还为数组
var arr=[[] [] []]
6.字符串
概念
var str="hello";//创建
alert(str.length);//属性
alert(str[1]);//访问
字符串.方法()
3.函数
1.函数分类
1.无参 function 函数名（）{
函数体
}
function print(){
for(var i=0;i<10;i++){
document.write("hello world! <br/>");
}
}
2.有参函数
function print(n){
for(var i=0;i<n;i++){
document.write("hello world! <br/>");
}
}
print(5);
2.内置函数：alert()······
3.自定义函数：函数名为标识符
4.arguments数组
function sum(){
for(var i=0;i<arguments.length;i++){
sum += arguments[i];
}
alert(sum);
}
sum(3,4,5,6);
2.返回值
function add(num1,num2){
return num1+num2;
}
var result=add(3,4);
alert(result);
3.作用域
var a=10;
function sum(){
var a=5;
alert(a);
}
alert(a);//10
sum();//5
alert(a);//10
4.递归
-
面试会用，但是工作一般禁止，如sum（100）=sum(99)+100;
function sum(n){
if(n==1){
return 1;
}
return sum(n-1)+n;
}
alert(sum(100));
5.事件驱动函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){//页面加载完毕才执行
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
alert(oBtn);
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn" >
</body>
</html>
4.对象
1.创建
常用：var person={}；
日期对象：var d=new Date();
2.定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
var i=0;
window.onload=function(){
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){//点击后显示
var timer=setInterval(function(){//匿名函数
document.write(i++ +"<br />");
if (i==5){
clearInterval(timer);
}
},1000);//函数，毫秒数
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="按钮" >
</body>
</html>
5.BOM:浏览器对象模型
1.对话框
var res= confirm("请选择确定和取消");
alert(res);
var aee=prompt("请输入一个数",9);
2.open
<script type="text/javascript">
function init(){
var oBtn =document.getElementById("btn");
oBtn.onclick=function(){
open("http://www.baidu.com","百度");
}
}
</script>
3.history对象
<script type="text/javascript">
//保存用户上网记录
//history.length,.back()后退，.forward(),前进，.go():0,重载。正数前进，负数后退
window.onload=function(){
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
alert(history.length);
}
var oForward=document.getElementById("forward");
oForward.onclick=function(){
history.forward();
}
var oBack=document.getElementById("back");
oBack.onclick=function(){
history.back();
}
var oGo=document.getElementById("go");
oGo.onclick=function(){
history.go(2);
}
}
</script>
4.字符串实例
?id=5&search=ok
获取url中search，通过传入对应的key，返回key对应的value
例子：传入id，返回5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
/*?id=5&search=ok
获取url中search，通过传入对应的key，返回key对应的value
例子：传入id，返回5
*/
function getValue(search,key){
var start=search.indexOf(key);//返回第一次出现的位置，找不到就返回-1
if(start == -1){
return;
}else{
var end=search.indexOf("&",start);//第2个参数是查找的起始位置,O要大写
if(end==-1){
end=search.length;
}
}
var str=search.substring(start,end);//提取子字符串
// alert(str)
var arr=str.split("=");
return arr[1];
}
var search = "?id=5&search=ok";
alert(getValue(search,"id"));
alert(getValue(search,"search"));
</script>
</head>
<body>
</body>
</html>
6.DOM：文档对象模型
1.元素节点
innerHTML 获取元素节点标签间的内容
id； className ；tagName 获取元素节点的标签名；name
1.1Id节点
document.getElementById("div1");
1.2 TagName节点
document.getElementByTagName
参数：标签名
功能：获取当前页面上所有符合该标签名标准的元素节点
返回值：数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName("li");
alert(oDiv);//[object HTMLCollection]
alert(oDiv.length);//8
var oli=document.getElementById("ul1");
var oLi=oli.getElementsByTagName("li");
alert(oLi.length);//4
for(var i=0;i<oLi.length;i++){
alert(oLi[i].innerHTML);// 1111 333 444 555
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>11111</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<ol>
<li>11111</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ol>
</body>
</html>
1.3 Name节点
document.getElementsByName()
参数：name的值
返回值：数组
只有文本输入框的元素节点才有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByName("hello");
alert(oDiv.length);
}
</script>
</head>
<body>
<div name="hello">
</div>
<span name="hello"></span>
<input name="hello">
</body>
</html>
1.4 ClassName节点
document.getElementsByClassName()
参数：calss
返回值：数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByClassName("box");
alert(oDiv.length);
}
</script>
</head>
<body>
<ul id="ul1">
<li>11111</li>
<li class="box">333</li>
<li>444</li>
<li>555</li>
</ul>
<ol>
<li>11111</li>
<li class="box">333</li>
<li>444</li>
<li class="box">555</li>
</ol>
</body>
</html>
1.5 封装函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <style>
#div1{
background-color: red;
width:300px;
}
</style> -->
<script type="text/javascript">
//封装函数简化操作，css选择器,id,.className,tagName,name=xxx,
function $(vArg){
switch(vArg[0]){
case "#"://id
return document.getElementById(vArg.substring(1));
break;
case "."://className
return document.getElementsByClassName(vArg.substring(1));
break;
default:
var str=vArg.substring(0,5);
if(str=="name="){
return document.getElementsByName(vArg.substring(5));
}else{
return document.getElementsByTagName(vArg);
}
break;
}
}
window.onload=function(){
alert($("#div1").innerHTML);
alert($(".box").length);
alert($("div").length);
alert($("name=hello").length);
}
</script>
</head>
<body>
<div id="div1">11111</div>
<div class="box">222</div>
<div class="box">3333</div>
<div name="hello">4444</div>
</body>
</html>
2.获取当前样式
getComputedStyle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1{
background-color: red;
width:300px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
// alert(oDiv.stytle.width);
//获取当前有效样式
alert(getComputedStyle(oDiv)["width"]);
}
</script>
</head>
<body>
<div id="div1" ></div>
</body>
</html>
3.操作当前节点元素
setAttribute，removeAttribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
set/getAttribute()
removeArribute()
操作当前元素节点中某个属性
-->
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.setAttribute("title","xxx");
oDiv.removeAttribute("name");
}
</script>
</head>
<body>
<div id="div1" title="hello" name="world" class="box">11111</div>
</body>
</html>