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对象: 某次事件触发时所有的状态信息