#JS:JavaScript
特点 是一种网页编程技术，用来向HTML页面添加交互行为直接潜入HTML页面 由浏览器解释执行代码，逐行执行，不进行预编译作用 客户的数据计算 客户端表单合法性验证 浏览器事件的触发 服务器的异步数据提交操作对象 其操作的目标是HTML和CSS事件 事件就是触发调用JS的时机。如：单击(onclick)，双击(ondblclick) JS通常是通过事件触发的，因此需要先定义事件再写JSjs=ECMAScript+BOM+DOM.#js的使用方式 1.事件定义式:在元素上定义事件时直接写js
<input type="button" value="按钮1" onclick="alert('hi');">2.嵌入式:在script标签里书写js.该标签可以写在head里,也可以写在body中任意位置.
<script> //js单行注释 /*js多行注释*/ //1)js的函数都是公有的 //2)js的函数有返回值,但不用声明其类型 function f2() { //js中单引号和双引号一样 alert("How are you?"); } </script>注意：此处书写js有2种方式:
将js代码封装到函数里,该函数在页面加载完, //用户点击按钮时被调用.直接在此处书写js,则这些代码在页面加载时 //立刻被浏览器调用,其调用时机甚至比body还早.3.文件调用式:在独立的js文件内书写js.该标签不能既引入js又书写js.
<script src="my.js"></script>js中：语法规范，标识符与变量，运算符，表达式和流程控制语句很多和java类似，但仍有很多值得注意的点。
#概述
由于js是一门弱类型语言，所有变量都用var来定义 变量没有类型,但是变量所引用的数据有类型。这会带来一些不一样的特性。
##js数据类型：
javascript有6种数据类型,其中5种基本类型原始类型/基本类型：简单的数据段引用类型：可能由多个值构成的对象 注意：在很多语言中，字符串以对象的形式来表示，因此是引用的，但是ECMAScript放弃了这一传统。##数据类型隐式转换 字符串等级最高，任何类型和字符串相+都为字符串 boolean在+时会变为1/0 boolean在和字符串+时会变成true/false字符串 强制转换和函数 借助一些函数可以实现强转
console.log(parseInt("abc")); console.log(parseInt(""));//NaN console.log(typeof("11")); //typeof是操作符 typeof null //Object console.log(isNaN(""));//false##运算符
===是全等于，包括类型匹配NaN和任何都不相等5/2=2.5;0.1+0.2=0.300000000000000004; //浮点数的舍入误差关于&& 和||的巧用：2&&1=12||1&=2##条件表达式
js中可以用任意类型的数据做条件, 当用非布尔值做条件时,有如下原则: 所有的非空值都相当于true; 空值:undefined,NaN,0,null,"" 该原则是为了简化条件表达式
var k = null; if(k) { console.log("ok"); }#js对象
js对象是js中非常重要的内容。
分类内置对象：外部对象 windowdom 自定义对象#内置对象 ##常用分类
StringNumberBooleanArrayMathDateRegExpFuction这里的String，Number，Boolean是基本包装类
由于一些对象的方法和java类似就不做介绍了，具体可以查看w3c手册。 ##String
js中字符串直接量用单引号和双引号都可以。
属性：length x.charCodeAt(index):返回指定位置字符的unicode编码。 ##Number toFixed(num):转换为字符串，四舍五入保留小数点后num位，不够用0补充。 ##Array
js中的数组都是Object数组
1)如何创建数组
//已知要存的数据 var a1 = ["zhangsan",25,false]; console.log(a1[0]); //不知要存的数据 var a2 = new Array(); a2.push("lisi"); a2.push(28); a2.push(true); console.log(a2[0]);2)数组倒转
var arr = [5,12,8,1,6,4,2]; arr.reverse(); console.log(arr);3)数组排序
arr.sort(); console.log(arr);//默认方式 arr.sort(function(a,b){ //自定义函数比较 return a-b; }); console.log(arr);##Date 1)创建Date
var d1 = new Date(); var d2 = new Date("2017/09/01 09:09:09"); console.log(d1); console.log(d2);2)转换为本地格式的字符串
console.log(d1.toLocaleDateString()); console.log(d1.toLocaleTimeString());3)读取时间分量
var y = d1.getFullYear(); //月份从0开始 var m = d1.getMonth()+1; var d = d1.getDate(); var today = y + "年" + m + "月" + d + "日"; console.log(today);##RegExp var str = “You can you up,no can no bb.”; 1)如何创建正则对象
直接量语法 /pattern/attributes 属性：i:忽略大小写，g:全局匹配创建 RegExp 对象的语法： new RegExp(pattern, attributes); var reg = /no/;2)test()：检测字符串中是否包含与正则匹配的子串
console.log(reg.test(str));3)exec()
//普通模式下 //从字符串中检测出与正则匹配的第1个子串 console.log(reg.exec(str)); console.log(reg.exec(str)); //全局模式下 //第1次调用,则从字符串中检测出与正则匹配的第1个子串 //第n次调用,则从字符串中检测出与正则匹配的第n个子串 reg = /no/g; console.log(reg.exec(str)); console.log(reg.exec(str)); console.log(reg.exec(str)); console.log(reg.exec(str));##Function
函数是按值传递的每个参数都会赋值给函数中的arguments数组 function sum() { var s = 0; if(arguments.length) { for(var i=0;i<arguments.length;i++) { s += arguments[i]; } } return s; } //页面加载时立刻调用函数 console.log(sum(1,2)); console.log(sum(3,4,5,6));##window对象
调用window对象的属性或方法,可以省略"window.",因此有些全局函数 ##全局函数
弹出框的三种类型 function f1() { alert("你好"); } function f2() { var b = confirm("你吃了吗?"); console.log(b); } function f3() { var v = prompt("你吃的啥?"); console.log(v); } 周期性定时器 function f4() { //启动定时器,让浏览器每1000毫秒调用一次函数. //该方法返回定时器的ID,此ID用于停止此定时器. var n = 5; var id = setInterval(function(){ console.log(n--); if(n<0) { clearInterval(id); console.log("DUANG"); } },1000); //启动定时器就相当于启动了一个支线程, //而当前方法f4相当于主线程,2个线程是 //并发执行的,不互相等待.因此f4方法在 //启动了定时器后,立刻执行输出BOOM的代码, //而定时器却是在1000毫秒后才执行第一次. console.log("BOOM"); } 一次性定时器 var id; function f5() { //启动定时器,让浏览器在10000毫秒后调用该函数. //浏览器调用函数后,该定时器会自动停止. id = setTimeout(function(){ console.log("叮叮叮叮叮"); },10000); }#外部对象 ##BOM
浏览器对象模型
function f1() { var b = confirm("您确定要离开本页吗?"); if(b) { location.href = "http://www.tmooc.cn"; } } function f2() { location.reload(); } function f3() { history.forward(); } console.log(screen.width); console.log(screen.height); console.log(navigator.userAgent);##DOM 文档对象模型
###读写节点
//onload是页面加载事件,在页面加载完成时, //由浏览器自动触发,触发时调用对应的函数. window.onload = function(){ //1.读取节点的名称和类型 var p1 = document.getElementById("p1"); console.log(p1.nodeName); console.log(p1.nodeType); //2.读写节点的内容 //内容:双标签中间的文本,如<a>内容</a> //innerHTML(包含标签) console.log(p1.innerHTML); p1.innerHTML = "1.DOM操作可以<u>读写</u>节点"; //innerText(不含标签) var p2 = document.getElementById("p2"); console.log(p2.innerText); p2.innerText = "2.DOM操作可以<u>查询</u>节点"; //3.读写节点的值 //值:表单控件中的数据(label除外) var b1 = document.getElementById("b1"); console.log(b1.value); b1.value = "BBB"; //4.读写节点的属性 //1)调用方法 var i1 = document.getElementById("i1"); console.log(i1.getAttribute("src")); i1.setAttribute("src","../images/02.jpg"); i1.removeAttribute("src"); //2)调用属性名 //id,style,className var a1 = document.getElementById("a1"); console.log(a1.style); console.log(a1.style.color); a1.style.color = "blue";###查询节点
window.onload = function(){ //1.根据id查询节点 //2.根据标签名查询节点 //3.根据name查询节点 var radios = document.getElementsByName("sex"); console.log(radios); //4.根据层次(关系)查询节点 //即查询某节点的亲戚 //1)父亲 var gz = document.getElementById("gz"); var ul = gz.parentNode; console.log(ul); //2)孩子 //带回车/空格,用的少 console.log(ul.childNodes); //只要元素,常用 var lis = ul.getElementsByTagName("li"); console.log(lis); //3)兄弟 //节点.父亲.孩子们[i] var sh = gz.parentNode.getElementsByTagName("li")[1]; console.log(sh); }###增删节点 利用父节点进行增删
function f1() { //创建新节点 var li = document.createElement("li"); li.innerHTML = "天津"; //追加新节点 var ul = document.getElementById("city"); ul.appendChild(li); } function f2() { //创建新节点 var li = document.createElement("li"); li.innerHTML = "武汉"; //插入新节点 var ul = document.getElementById("city"); var gz = document.getElementById("gz"); ul.insertBefore(li,gz); } function f3() { var ul = document.getElementById("city"); var gz = document.getElementById("gz"); //删除子节点 ul.removeChild(gz); }#自定义对象
##采用直接量的方式创建对象
function f1() { var student = { "name":"zhangsan", "age":25, "work":function(){ alert("我学Java"); } }; alert(student.name); alert(student.age); student.work(); }##采用内置构造器创建对象
function f2() { var teacher = new Object(); teacher.name = "cang"; teacher.age = 18; teacher.work = function(){ alert("我教Java"); } alert(teacher.name); alert(teacher.age); teacher.work(); }##采用自定义构造器的方式创建对象
function Coder(name,age,work) { //将参数存在对象上 this.name = name; this.age = age; //this指代当前对象 //this.job是给此对象增加job属性 //=work是给这个属性赋值 this.job = work; } function f3() { var coder = new Coder( "Lisi", 28, function(){ alert("我写Java"); } ); alert(coder.name); alert(coder.age); coder.job(); }#js事件
onfocus 元素获得焦点，光标进入文本框onblur 元素失去焦点，鼠标从文本框中离开onchange 用户改变域的内容，下拉选切换内容onclick 鼠标点击某个对象onload 某个页面或图像被完成加载 window.onloadhtml 加载完 onmouseover 鼠标被移到某元素之上onmouseout 鼠标从某元素移开onreset 重置按钮被点击 ##事件定义的方法在html属性中添加事件，调用函数在js代码中动态生成 btn.οnclick=function(){}; 取消btn.οnclick=“return false;”event是一个关键字 ##事件具有冒泡机制 取消冒泡的方法：
e.stopPropagation();e.cancelBubble; ##获取事件源e.srcElement()e.target之所以上两个标题不同方法有相同作用，正是因为IE恶心之处。 jQuery则提供了统一方法方法，并在后面的版本中直接取消了对IE的支持。
#修改样式
在css中使用类选择器预置不同样式同过JS修改元素的class属性，以改变其样式