Javascript:JS
基本语法：
变量： var name="aray", age=20
数据类型：
基本数据类型：number string boolean null undefined
引用数据类型：object
运算符：
++: 自加
--：自减
==：会自动转换
===：不会转换
流程控制：
顺序结构：
分支结构：
if (表达式) {
语句1;
} else{
...
}
if(表达式1){
语句1;
}else if (表达式2){
语句2;
}else if (表达式3){
语句3;
}else{
语句4;
}
switch(表达式){
case 值1：语句1;break;
case 值2: 语句2;break;
case 值3: 语句3;break;
default:语句4;
}
循环结构：
for：
for(初始表达式;条件表达式;自增and自减)
{
执行语句
....
}
for (变量 in 数据或对象)
{
执行语句
}
while:
while(条件){
语句1;
...
}
异常处理：
try{
}
catch(e){
}
finally{
}
对象：
dom--- document objent model
JS--1.对象：
创建方式：
1.var s=new string("hello") 类型：object
2.var s2="hello2" 类型：str
以上两种创建对象的结果是一样的
属性和方法：
var s="hello world";
console.log(s.length);
console.log(s.toUppercase()) 转大写
console.log(s.charAt(3)); 通过索引获取字符
console.log(3.indexOF("w")); 通过字符获取索引
console.log(s.substr(1,3)); 字符串截断 substr(起始位置,截断长度)
console.log(s.substring(1,3));字符串截断 substring(起始位置 结束位置)
切片：s.slice
var str1='abcde'
var str2=str1.slice(2,4)
分割：s.split
var ret = s.split(" ")
拼接：s.concat(addstr)
var
2.数组对象：
创建数组：
1.var arr=[1,2,3];
2.var test=new Array(100,"a",true);
3.var arrname = new Array(长度);
数据方法：
var arr=[11,22,33,44,"zxc",true]
console.log(arr[3])
join方法：
var ret=arr.join(" ");
console.log(ret)
反转：reverse
var s=[100,11,22,44,33];
console.log(s.reverse())
排序：sort
var s=[100,11,22,44,33];
console.log(s.sort()) 按照ASCII码排序 结果：[100,11,22,33,44]
自己定义：定义好之后传上去
function mysort(x,y){
return x-y
}
console.log(s.sort(mysort))
push: 将value值添加到数字x的结尾
var arr=[11,22,33];
arr.push(44,55,66);
console.log(arr);
pop:取值也是取最后一个
console.log(arr.pop())
console.log(arr);
unshift:插入值，放在首位置
arr.unshift(44);
console.log(arr);
shift: 移除值，先移首位置
arr.shift();
console.log(arr);
3.date对象：
创建date对象：
1.var date=new Date();
console.log(date)
console.log(type(date)) 类型：object
console.log(date.tolocalstring())
console.log(type(date)) 类型：string
2.var date2=new Date("2017/7/7 07:07")
console.log(date2)
3.var date2=new Date()
console.log(date2)
4.var date2=new Date()
console.log(date2)
三元运算符：
console.log(2>1?2:1)
转换：
var i=+"1"
console.log(i)
console.log(type(i))
math对象：
最大/小值：max/min
console.log(Math.max(11,22,33));
console.log(Math.min(11,22,33))
取整向上/向下：ceil/floor
console.log(Math.ceil(1.23))
console.log(Math.ceil(1.63))
console.log(Math.floor(1.23))
console.log(Math.floor(1.63))
2的3次方：
console.log(Math.pow(2,3))
4.function对象
函数的定义：
1.function foo(){
console.log("OK")
}
函数的调用：
var ret = foo()
console.log(ret)
函数的属性：
2.function add(x,y){
return x+y
}
var ret=add(2,5);
console.log(ret);
console.log(add,length) //2
function add2(x,y,x){
var sum=0;
for(var i=0;i<arguments.length;i++){
console.log(arguments[i])
sum+=arguments[i]
}
return sum
}
var ret = add2(2,5,7,8,9);
cosole.log(ret)
匿名函数：
(function foo(x) {
alert("OK")
}(3))
Bom对象：
1.window对象
window.alert(123); window全局对象,提醒功能
var ret=window.confirm(123); 有返回值。
console.log(ret)
var ret=window.prompt(123);
console.log(ret)
2.定时器
1.setInterval/cleartInterval
function foo(){
console.log(123)
}
var ID = setInterval(foo,1000);
clearInterval(ID) 取消
例子:
2.setTimeout/clearsetTimeout
function foo(){
console.log(123)
}
var ID=setTimeout(foo,1000)
clearTimeout(ID)
JS--1.dom对象：
介绍：
1.DOM --- document object model（文档对象模型）
2.定义了访问（查找）和操作html文档的标准方法。
3.dom 把 html 文档呈现为带有元素、属性和文本的树结构（节点树）作用：导航
2.dom 节点：
1.节点类型：
1.html 文档中的每个成分都是一个节点
2.规定：
整个文档是一个文档节点
每个html标签是一个元素节点
包含在html元素中的文本是文本节点
每一个html属性是一个属性节点
3.主要部分：document element text attribute
2.节点关系
1.父：parent 子:child 同胞：sibling
2.顶端节点叫：根 (root)
3.每个节点都有父节点、除了根。
4.一个节点可以拥有任意数量的子
5.同胞是拥有相同父节点的节点
3.节点查找
1.直接查找:直接定位
var ele=document.getElementById("d1"); 标签对象（唯一）
var ele_class=document.getElementsByClassName("c1"); 数组对象(复数)
var ele_p=document.getElementsByTagName("tagname")
var ele-aray=document.getElementsByName("zbk")
2.导航查找：通过某个标签定位某些标签
var ele_c3=document.getElementsByClassName("c3")[0]
ele_c3.parentElement 父标签
ele_c3.children 子标签
ele_c3.firstElementChild 第一子
ele_c3,lastElementChild 最后子
ele_c3.parentElement.children 父子
ele_c3.nextElementSibling 下一个
ele_c3.previousElementSibling 上一个
4.绑定事件的方式
1.<div onclick="foo()">div</div>
function foo() {
var ele=document.getElementsByTagName("div")[0];
ele.style.color="red";
}
2.<>
5.节点属性操作
文本操作：
1.ele.innerText 取值
ele.innerText="zxc" 赋值
2.ele.innerhtml
ele.innerhtml="<a href="">click</a>"
<div class="c" id="d1">div</div>
文本属性:
var ele=document.getElementsByClassName("c1")[0];
取属性值：
ele.id=d2;
console.log(ele.getAttribute("id"))
console.log(ele.id)
属性赋值：
ele.setAttribute("id","d2")
ele.id="d2"
ele.setAttrubute('href','http://www.baidu.com')
6.class属性值操作：
console.log(ele.ClassName)
ele.classList.add("hide") 隐藏
ele.classList.remoce("hide") 取消隐藏
js的操作
控制html页面的所有标签对象（document,element）
1.属性操作
1. element.
2.节点操作（增删改）
1.创建节点 document.createElement("标签名")
2.添加节点 ele_parent.appentChild(ele_child)
3.删除节点 ele_parent.removeChild(ele_child)
4.替换节点 ele_parent.removeChild(ele_child)
3.事件
event对象： 某次事件触发时所有的状态信息
