js用来实现页面的动态效果。
js的特点：1、是客户端语言，客户端进行解释执行。
2、是一种脚本语言
3、是一种基于对象的语言，不用定义类和实例化对象，直接使用类即可
4、js前端和后端都可以做
js基础
1、变量
变量用var声明，没用var声明的为全局变量。
2、一些规范注意
语法格式跟c语言类似，用{}来封装代码块，/* */ //注释，语句结束加分号，不加分号，换行表示一句结束。
3、循环、选择等控制语句和c语言的一样。
4、基本数据类型
js有5种基本数据类型，number、string、Boolean、null、undefined。
number：表示任意类型的数，整数浮点数；
string：表示字符串
Boolean：1，0。console.log(1+true)为2
null：用于对象，表示对象没有值的情况
undefined：两种情况出现undefined
1、x只声明，没有定义的时候var x;console.log(x);2、函数没有返回值的时候function f(){}console.log(f())
数据类型之间的转换
console.log(123+“hello”)//"123hello"console.log(123+true)//124console.log("hello"+true)//"hellotrue" 强制类型转换：
parseInt("hello")=NaNparseInt("123")=123parseInt("123hello")=123parseInt("hello123")=NaNparseInt("123hello123")=123 parseFloat("1.23")=1.23eval,跟python一样，对字符串求值 掌握3种对象：内置对象、bom对象，dom对象。
11种内置对象：
1、string
两种创建方法。
var a="hello";//typeof为stringvar a = new String("hello");//typeof方法为object 字符串对象的属性和方法：
length，格式编排方法：
console.log(a.length); console.log(a.anchor()); console.log(a.bold()); console.log(a.italics());输出：5hellohellohello
大小写转换：
console.log(a.toUpperCase());//转换为大写 console.log(a.toLowerCase());//转换为小写
获取字符，用得不多：
console.log(a.charAt(1));//e console.log(a.charCodeAt(1));//101
查询字符：第一个可有两个参数，指从哪个位置开始查询，查到就返回，第二个从后面开始查询。
console.log(a.indexOf("e"));//获取下标 console.log(a.lastIndexOf("e")); 子字符串的处理，这个用得较多。
连接字符串var b=a.concat("abc");//a还是原来的值，b在a的基础上增加。和“+”的效果一样 截取字符串，原字符串不变。a.substr(1,2)；//参数，起始位置，截取长度a.substring(1,4)；//参数，起始位置，结束位置，前闭后开a.slice(-3,-1)；//参数，起始位置，结束位置，前闭后开，和python的切片差不多a.slice(0,3)；
替换字符串a.replace("hell","haha")//a不变var b=a.replace("hell","haha")分割字符串 var x = "1,2,3,4,5,6"; var y = x.split(",");//x不变 console.log(x); console.log(y);
2.数组对象
数组的创建
var a = [1,2,3,4]; var a = new Array();//个数不限 var a = new Array(5);//个数为5个 var a = new Array(1,"hello",7);//直接用元素创建
二维数组的创建：
数组的属性和方法：
属性有length，和上述一样。
方法：
join，在python中join是字符串的方法。"".join(["1","2"])，列表里面元素需要为字符串，而在js中，join是数组的方法，数组中的元素可以为数字。
var a = new Array(1,"hello",7); var b = a.join("*"); console.log(b); //1*hello*7 在js中所有内置对象都继承于object对象，因此所有对象都有方法，toString()
concat
var a = [1,2,3,4]; var b = a.concat([5,6]); console.log(b);//6个，concat中的值，不是作为整体连接的 console.log(a);//4个，a的值没有改变
reverse
var a = [1,2,3,4]; var b = a.reverse(); console.log(b);//b为4,3,2,1 console.log(a);//a也为4,3,2,1
sort
js中的sort和python中不一样，js中的先按照高位排序，高位相同再依次比较低位，没有的比0 小。
var a = [35,100,354,79,10]; var b = a.sort(); console.log(b);//[10,100,35,354,79] console.log(a);//[10,100,35,354,79]
如果需要按照正常的排序需要些一个函数作为参数传入到sort中。
var a = [35,100,354,79,10]; var b = a.sort(); console.log(b);//[10,100,35,354,79] console.log(a);//[10,100,35,354,79] function func(a,b) { if(a>b){ return 1; } else if (a slice
数组中slice和字符串中slice一样。
splice
删除，插入操作
var a = [1,2,3,4,5,6]; a.splice(0,3)//删除，从0位置开始删除3个 console.log(a) a.splice(1,0,7,8,9)//插入，从1位置插入7,8,9 console.log(a);//[4, 7, 8, 9, 5, 6]
进出栈操作：
push，pop
var a = [1,2,3,4,5,6]; a.push([6,7]);//将[6,7]作为整体一次性放入栈中 console.log(a);//[1,2,3,4,5,6,[6,7]] a.push(9,"hello");//分别依次放入 console.log(a);//[1,2,3,4,5,6,[6,7],9,"hello"] a.pop(); console.log(a);//[1,2,3,4,5,6,[6,7],9]
unshift,shift
var a = [1,2,3,4,5,6]; a.unshift([6,7]);//将[6,7]作为整体一次性放入栈中 console.log(a);//[[6,7],1,2,3,4,5,6] a.unshift(true,"hello");//作为整体放入，但是整体为两个值 console.log(a);//[true,"hello",[6,7],1,2,3,4,5,6] a.shift(); console.log(a);//["hello",[6,7],1,2,3,4,5,6]
3、函数对象
创建函数有两种方式，1、正常的，2、用new创建，不用，了解 这种创建方式。var func = new Function（“参数1”，......“参数n”，“函数体”）。
在python中，函数调用不可以在函数定义之前。python读取一行执行一行，先读到执行那儿找不到定义，报错
在js中，函数调用可以写在函数定义之前。页面加载时，先加载所有定义的函数再执行，因此写在前面也能找到。
function func(a,b) { return a+b } console.log(func.length)//表示函数期望的参数个数 function func(a,b) { return a+b } console.log(func.length);//表示函数期望的参数个数 console.log(func(1));//NaN console.log(func());//NaN console.log(func(1,2));//3 console.log(func(1,2,3));//3 function func() { console.log(arguments);//arguments是存储传入参数的对象 var sum = 0; for(var num in arguments){//num表示下标 sum +=arguments[num]; } console.log(sum) } func(1,2,3); //匿名函数1，和标准函数不一样，先去掉函数的名字，再赋值给一个变量。再函数赋值给变量前执行会报错，func不能调用 var func = function () { alert(123) }; func(); //匿名函数2 (function () { alert(456) })()
BOM对象有：window对象、history对象、location对象
所有浏览器都支持window对象，window对象，一个html文档就是一个window对象、window对象用于控制浏览器窗口的，window对象不用创建课直接使用。常用的alert（）就是window对象。有alert（），confirm（），prompt（），open（），close(),.......
BOM对象就是浏览器对象，功能为：使js有能力和浏览器“对话”。
window对象，1、一个html文档就是一个window对象；2、window对象就是浏览器的一个窗口；3该对象不用创建，可以直接使用，对象的方法也可直接使用，window对象为全局变量。
一：
alert():窗口弹出一个弹出框，提示用户
confirm():
var flag = window.confirm("是否确定删除");//点击确定，返回true；点击取消，返回false console.log(flag); prompt():
var content = window.prompt("请输入内容：");//与上不同在于，有一个框提阿尼额输入内容，点击确定返回输入内容，点击取消返回null console.log(content); 二：
open():打开一个新的浏览器窗口
close():关闭一个浏览器窗口
三：
var clock = window.setInterval(func,1000);//相当于设定定时器 function func() { console.log("hello"); } window.clearInterval(clock);//关闭定时器 var t = window.setTimeout(func,1000);//与上述区别在于只执行一次，1秒钟之后 function func() { console.log("hello"); } window.clearTimeout(t);//关闭 history对象：
history对象是window对象的一个子对象，用于实现窗口的前进后退。
function func_back() { window.history.back();//后退，相当于浏览器上的后退 window.history.go(-1);//表示后退几步 } function func_forward() { window.history.forward();//前进 window.history.go(1); window.history.go(2);//表示前进几步 } location对象：
function func() { window.location.reload();//刷新页面 window.location.assign("http://www.baidu.com");//链接到百度，可后退 window.location.replace("http://wwww.baidu.com");//将当前窗口替换为百度窗口，不可后退 } DOM对象
DOM是关于html文档和xml的访问标准，DOM主要完成两件事情，1、找；2、操作。DOM对象有两个主要的对象，document对象和element对象。也称为节点。
1、找；
找到文档中的具体某一标签对象
hello p
hello hello
点击
var ele = document.getElementsByTagName("a")[0]; var ele1 = document.getElementsByName("pp")[0]; var ele2 = document.getElementById("div_a"); var ele3 = document.getElementsByClassName("content")[0]; console.log(ele); console.log(ele1); console.log(ele2); console.log(ele3); 直接找到标签就用上面的4种方法。在element对象中也可以进行局部查找它里面的标签，但是只能用ByTagName，ByClassName；林外两个使用拿不到结果。
还可以利用节点的导航属性找到其他的标签对象。
var ele = document.getElementsByTagName("a")[0]; var ele1 = document.getElementsByName("pp")[0]; var ele2 = document.getElementById("div_a"); var ele3 = document.getElementsByClassName("content")[0]; // console.log(ele); // console.log(ele1); // console.log(ele2); // console.log(ele3); var ele4 = ele.parentElement;//拿到该标签的父元素 console.log(ele4); var ele5 = ele2.children;//拿到该标签的所有子元素 console.log(ele5); var ele6 = ele2.firstElementChild;//拿到该标签的第一个子元素 console.log(ele6); var ele7 = ele2.lastElementChild;//拿到该标签的最后一个子元素 console.log(ele7); var ele8 = ele3.nextElementSibling;//拿到该标签的下一个兄弟标签 console.log(ele8); var ele9 = ele.previousElementSibling;//拿到该标签的上一个兄弟标签 console.log(ele9);
节点属性：
自身属性：
innerHTML
导航属性：
DOM，事件、绑定方式，this。
两种绑定事件的方式
1、直接写在标签上
2、写在js中
js中的事件有
onclick 当用户点击某个对象时调用的事件句柄。ondblclick 当用户双击某个对象时调用的事件句柄。onfocus 元素获得焦点。 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.onkeypress 某个键盘按键被按下并松开。onkeyup 某个键盘按键被松开。onload 一张页面或一幅图像完成加载。onmousedown 鼠标按钮被按下。onmousemove 鼠标被移动。onmouseout 鼠标从某元素移开。onmouseover 鼠标移到某元素之上。onmouseleave 鼠标从元素离开onselect 文本被选中。onsubmit 确认按钮被点击。
window.οnlοad=function(){}；或者在body标签上添加上onload事件绑定。表示页面加载完成后再执行函数内的内容。 增删改查操作： 增:
createElement(name)创建元素appendChild();将元素添加
删:
获得要删除的元素获得它的父元素使用removeChild()方法删除
改:
第一种方式:
使用上面增和删结合完成修改
第二中方式:
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容
- 改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML ，innerText。
- 改变 CSS 样式
| 1 2 | <p id= "p2" >Hello world!</p> document.getElementById( "p2" ).style.color= "blue" ;<br data-filtered= "filtered" > .style.fontSize=48px |
- 改变 HTML 属性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
- 创建新的 HTML 元素
createElement(name)
- 删除已有的 HTML 元素
elementNode.removeChild(node)
- 关于class的操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove