一.js的简介 1.什么是js js可以嵌套到HTML中（基于对象）和（事件触发）的脚本语言 特点 A.交互性 B.安全性 js不能直接访问本地磁盘 C.跨平台 浏览器只要具备js解析器 2.js能干嘛 1）js动态修改（新增、删除）HTML标签和CSS代码 2）js动态做校验数据 3）js的历史及组成 ECMAScript(js的基本语法和对象) BOM(浏览器对象模型) DOM(文档对象模型) 4）js的引用方式 A.内嵌脚本 <input type="button" value="button" οnclick="alert('XXX')"/> B.内部脚本 <input type="button" value="button"/> <script type="text/javascript"> alert('XXX'); </script> C.外部脚本 1.创建一个js文件 2.在HTML中引入js脚本 <input type="button" value="button"/> <script type="text/javascript" src="demo1.js"></script> 总结： 1.JS往哪儿放 在不影响HTML页面加载效果情况下，越晚加载越好 2.编程建议 <script>引入外部文件的时候 标签中不建议写脚本内容 二.js的基本语法 1)变量 var a=12; a="javascript"; a='哈哈'; var b=true; 2)原始数据类型(了解) 1)number:数字类型 2)string:字符串类型 3)boolean:布尔类型 4)null:空类型 5)undefined:未定义的 注意： number string boolean 伪对象 数据类型转换 number boolean 转 string toString() string boolean 转 number parseInt() parseFloat() boolean类型 parseInt() 不能转 number NaN string类型 parseInt()可以转 number '123哈哈456' 转'123' string number 转 boolean Boolean() number转 boolean 可以 非0为true 0为false string转boolean 可以 非空为true 空为false string boolean 转 number Number() boolean类型 Number() 可以转 number true 1 false 0 string类型 Number() 如果是数字可以转 如果 '123哈哈' 转换结果 NaN 3)引用数据类型 java:Object obj=new Object(); js: var obj=new Object(); 4)运算符 1.赋值运算符 = var a=5; 2.算术运算符 + - * / % ++ -- +:遇到字符串 连接符 拼接 -:遇到字符串 转为数字 Number() 再计算 *:遇到字符串 转为数字 Number() 再计算 /:遇到字符串 转为数字 Number() 再计算 7/2=3.5 number 3.逻辑运算符 && || 4.比较运算符 > < >= <= == != == ：忽略数据类型的 值比较 ===：全等 比较值与数据类型 5.三目运算符 3>2?"大于":"小于" 6.void运算符 <a href="javascript:void(0)">点击我吧</a> 7.类运算符 typeof() :判断数据类型 返回 数据的该类型 instanceof:判断类型 返回 布尔值 alert(typeof(obj));//object alert(obj instanceof Object);//true 5)逻辑语句 if:条件 number转 boolean 可以 非0为true 0为false string转boolean 可以 非空为true 空为false switch: jdk1.7 string for: for in ***** var arr=[1,2,3,"aa",true]; for(index in arr){ alert(arr[index]); }
三.js的内置对象 1.Number var myNum=new Number(value); var myNum=Number(value); 方法： toString 把数字转换为字符串，使用指定的基数。 valueOf 返回一个 Number 对象的基本数字值。 2.Boolean var flag=new Boolean(value); //构造函数 var flag=Boolean(value); //转换函数 方法： toString() 把逻辑值转换为字符串，并返回结果。 valueOf() 返回 Boolean 对象的原始值。 3.String new String(s); String(s); 方法 length 字符串的长度 charAt() 返回在指定位置的字符。 charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 indexOf() 检索字符串。 lastIndexOf() 从后向前搜索字符串。 split() 把字符串分割为字符串数组。 substring() 提取字符串中两个指定的索引号之间的字符。 substr() 从起始索引号提取字符串中指定数目的字符。 toUpperCase() 把字符串转换为大写 4.Array new Array(); new Array(size); new Array(element0, element1, ..., elementn); var arr=[]; var arr=[1,"aa"]; 属性： length 设置或返回数组中元素的数目。 方法： join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 pop() 删除并返回数组的最后一个元素 push() 向数组的末尾添加一个或更多元素，并返回新的长度。 reverse() 颠倒数组中元素的顺序。 sort() 对数组的元素进行排序 5.Date var myDate=new Date() 方法 getFullYear() 从 Date 对象以四位数字返回年份 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getTime() 返回 1970 年 1 月 1 日至今的毫秒数。 toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 **** 6.Math var pi_value=Math.PI; var sqrt_value=Math.sqrt(15); 注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()， 像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。 方法： PI 返回圆周率（约等于3.14159）。 abs(x) 返回数的绝对值。 ceil(x) 对数进行上舍入。 floor(x) 对数进行下舍入。 round(x) 把数四舍五入为最接近的整数。 sqrt(x) 返回数的平方根。 pow(x,y) 返回 x 的 y 次幂。 ** random() 返回 0 ~ 1 之间的随机数。 *** 7.RegExp var reg=new RegExp(pattern); 可选参数： attributes var reg=/^正则表达式$/ 属性方法： [0-9]:数字 [A-Z]:A-Z [a-z]:a-z [A-z]:所有字母（大小写字母） \d:代表数值 \D:非数值 \w:单词字符 \W:非单词字符 \s:查找的空白字符 \S：查找的非空白字符 n+:至少一次 n*:出现0次或多次 n?:出现0次或1次 {5}：出现5次 {2,8}:出现2~8次 方法 test 检索字符串中指定的值。返回 true 或 false 四.js的函数 1.js函数定义方式 A.普通函数 语法： function 函数名(参数列表){函数体} 实例： function method(){ alert("XXX"); } method(); B.匿名函数(闭包) 语法： var 函数名=function(){} 案例： var method=function (){ alert("XXX"); } method(); C.对象函数(了解) 语法： new Function(参数1,参数2，参数3); 注意点： 1.形参只能是string类型 ,最后一个只能是函数体 2.函数体也是string 案例： var fn=new Function("a","b","alert(a+b)"); fn(2,22); 2.函数中的参数问题 1.形参不用var来修饰 2.形参和是实参个数可以不一样(只多不少) 案例： function fn(a,b,c){ var sum=a+b+c; alert(sum); //arguments 数组内部对参数进行封装的对象 for(var i=0;i<arguments.length;i++){ alert(arguments[i]); } } fn(1,2,3,4,5); 3.函数中返回值问题 1.定义函数的时候不用定义返回值类型 var 2.返回值可以通过return体现 案例： function fn(a,b){ return a+b; } alert(fn(2,3)); 4.js中的全局函数 1）编码问题 decodeURI() 解码某个编码的 URI。 encodeURI() 把字符串编码为 URI。 decodeURIComponent() 解码一个编码的 URI 组件。 encodeURIComponent() 把字符串编码为 URI 组件。 unescape() 对由 escape() 编码的字符串进行解码。 escape() 对字符串进行编码。 2）强转 parseInt() parseFloat() 3) Number() Boolean() 4)***** eval(); 计算 javascript字符串 把它们作为脚本代码执行
五.js的事件**** 事件 事件源 响应行为 1)事件的绑定方式*** A.将事件与响应行为内嵌到HTML代码中 <input type="button" value="button" οnclick="alert('XXX')"/> B.将事件内嵌到HTML代码中，将响应行为封装成函数** <input type="button" value="button" οnclick="fn()"/> <script type="text/javascript"> function fn(){ alert('XXX'); } </script> C.事件与响应结果完全从HTML分离出来*** <input type="button" value="button123" id="btn"/> <script type="text/javascript"> var btn=document.getElementById("btn"); //alert(btn.value); btn.οnclick=function fn(){ alert('XXX'); } </script> 2)常用的事件 A.onclick()点击事件 B.onchange()用户改变域的内容 当用户改变域内容会触发该事件 实现二级菜单联动 案例： <body> <select id="city"> <option value="bj">北京</option> <option value="tj">天津</option> <option value="sh">上海</option> </select> <select id="area"> <option>昌平区</option> <option>海淀区</option> <option>朝阳区</option> </select> </body> <script type="text/javascript"> var city=document.getElementById("city"); city.οnchange=function(){ var option=city.value; // alert(option); switch(option){ case 'bj': var area= document.getElementById("area"); area.innerHTML="<option value='cp'>昌平区</option><option value='hd'>海淀区</option><option value='cy'>朝阳区</option>"; break; case 'tj': var area= document.getElementById("area"); area.innerHTML="<option value='tg'>塘沽区</option><option value='nk'>南开区</option>"; break; case 'sh': var area= document.getElementById("area"); area.innerHTML="<option value='pd'>浦东区</option>"; break; } } </script> C.onblur 元素失去焦点 onfocus 元素获得焦点 案例： <body> <label for="txt">用户名:</label> <input type="text" name="username" id="txt"/><span id="active"></span> </body> <script type="text/javascript"> var txt=document.getElementById("txt"); //元素获取焦点事件 txt.οnfοcus=function(){ //绑定友好提示 var span= document.getElementById("active"); span.innerHTML="用户名最少长度是六位";//动态绑定文字 span.style.color="green"; } //元素失去焦点事件 txt.οnblur=function(){ //绑定友好提示 var span= document.getElementById("active"); //alert(txt.value); if(txt.value.length<6){ span.innerHTML="对不起您的格式有误"; span.style.color="red"; }else{ span.innerHTML="√"; span.style.color="green"; } } </script> D.onmouseout 鼠标从某元素移开 onmouseover 鼠标被移到某元素之上 案例： <body> <div id="d1">div</div> </body> <script type="text/javascript"> var div=document.getElementById("d1"); div.οnmοuseοver=function(){ this.style.backgroundColor="green"; } div.οnmοuseοut=function(){ this.style.backgroundColor="red"; } </script> E. onload 某个页面或图像被完成加载 等待页面加载完成之后，在执行onload事件里面的代码 案例： <script type="text/javascript"> window.οnlοad=function(){ var span =document.getElementById("s"); span.innerHTML="HELLOJS"; } </script> </head> <body> <span id="s"></span> </body> 3)阻止事件的默认行为 IE:window.event.returnValue=false;(IE低版本) w3c:传递过来的事件对象.preventDefault(); 案例： <body> <!-- <a href="http://www.baidu.com">点击我吧</a> --> <!-- <a href="demo1.html" οnclick="fn(event)">点击我吧</a> --> <a href="demo1.html" οnclick="return false">点击我吧</a> </body> <script type="text/javascript"> function fn(e){ //IE:window.event.returnValue=false;(IE低版本) //w3c:传递过来的事件对象.preventDefault(); if(e&&e.preventDefault){ alert("w3c"); e.preventDefault();//return false; }else{ alert("ie"); window.event.returnValue=false; } } </script> 4）js中的冒泡事件 阻止事件传播 IE:window.event.cancelBubble=true;//IE低版本 w3c:传递过来的事件对象.stopPropagation(); 案例： <body> <div οnclick="fn1()" style="width: 100px; height: 100px; background-color: blue; padding: 50px;"> <div οnclick="fn2(event)" style="width: 100px; height: 100px; background-color: red;"> XXX </div> </div> </body> <script type="text/javascript"> function fn1(){ window.alert("fn1"); } function fn2(e){ //window.alert("fn2"); // IE:window.event.cancelBubble=true;//IE低版本 // w3c:传递过来的事件对象.stopPropagation(); if(e&&e.stopPropagation){ alert("w3c"); alert("fn2"); e.stopPropagation(); }else{ alert("ie"); alert("fn2"); window.event.cancelBubble=true; } } </script> 六.js的BOM BOM(浏览器对象模型) alert(); window.alert(); 1)window对象 弹框方式 提示弹框 alert(); 确认弹框 confirm(); 确认弹框有返回值：点击确定 true 点击取消（叉） false 输入弹框 prompt(); 输入框有返回值 ：点击确定返回输入框的值 点击取消 null "" open() 案例： window.open("../jsCode/demo1.html"); 定时器 A.setTimeout(函数,毫秒值); 过多少毫秒值后调用该函数 （只调用一次） 案例： window.setTimeout(function() { alert("XXX"); }, 3000); B. clearTimeout(参数); 案例： <body> <input type="button" value="button" οnclick="closer()"/> </body> <script type="text/javascript"> /* window.setTimeout(function() { alert("XXX"); }, 3000); */ var timer; var fn=function(){ alert("XXX"); timer=setTimeout(fn, 3000); } var closer=function(){ window.clearTimeout(timer); } fn(); </script> C.setInterval(函数，毫秒值);//过多少毫秒之后 重复调用该函数 clearInterval(参数);清除定时任务 案例： <body> <input type="button" value="button" οnclick="closer()"/> </body> <script type="text/javascript"> var timer=setInterval(function() { alert("nihao"); }, 3000); var closer=function(){ window.clearInterval(timer); } </script> 案例： 注册成功之后，5秒钟跳转到某个页面 <body> 恭喜您，终于注册成功了，<span id="s" style="color: red; font-size: 100px;">5</span>秒钟页面自动跳转，如果不跳转<a href="../jsCode/demo1.html">点击这里</a> </body> <script type="text/javascript"> var time=5; var timer; timer=window.setInterval(function() { var span=document.getElementById("s"); if(time>=1){ span.innerHTML=time; time--; }else{ //页面跳转 事件结束 window.clearInterval(timer); location.href="../jsCode/demo1.html"; } }, 1000); </script> 2.location对象 location.href="链接地址"; location对象不能省 window.location.reload();//页面重新刷新 3.history对象 历史记录 back() forward() go() 案例： <a href="demo8.html">后一页</a> <!-- <input type="button" value="上一页" οnclick="history.back()"/> <input type="button" value="下一页" οnclick="history.forward()"/> --> <input type="button" value="上一页" οnclick="history.go(-1)"/> <input type="button" value="下一页" οnclick="history.go(1)"/> 七.js中DOM DOM(文档对象模型)**** 文档对象模型：用来操作页面元素 DOM：document节点 作用：通过他对页面元素进行操作和定位 NODE操作 1.NODE的元素 A.元素类型 B.文本类型 C.文档类型 D.属性类型 E.注释类型 2.NODE的获取方式 1）通过元素获取 document.getElementById("elementid");****** document.getElementsByName("name");*** document.getElementsByTagName("input");*** document.getElementsByClassName("classname"); 2)通过NODE关系获取引用 document.parentNode;//获取该元素的父节点 document.childNode;//获取该元素的子节点 document.firstChild;//获取该元素的第一个子节点 document.lastChild;//获取该元素的最后一个子节点 document.nextSibling;//获取该元素的下一个兄弟节点 document.previousSibling;//获取该元素的上一个兄弟节点 3)NODE的属性 节点中文 nodeType nodeName nodeVale 元素 1 tagname null 属性 2 attr 属性值 文本 3 #text 文本值 注释 8 #comment 注释的文字 文档 9 #document null 4)NODE节点的增删改查 A.创建一个节点 1)创建一个元素的节点 document.createElement(); 2)创建属性节点：object.attr=val; object.setAttribute(sttr,value); 3)创建一个文本节点 object.innerTHML=val; object.createTextNode(); B.添加节点 1.parentNode.appendChild(newNode); 说明 ： 向节点子节点末尾追加一个新的子节点， 如果文档中存在新的节点 ，将其从文档中删除，重新插入新的节点 2.parentNode.insertBefore(newNode,exisingNode); 说明： 如果文档中存在新的节点 ，将其从文档中删除，重新插入新的节点 3.parentNode.replace(newNode,oldNode); 说明： 如果文档中存在新的节点 ，将其从文档中删除，重新插入新的节点 4.parentNode.removeChild(node); 说明： 找到 文档中存在 的节点，删除其子节点 ----------------------------------------------------------------------------------------------- 总结： 1.定位页面 <input type="text" name="uname" id="txt"/> document.getElementById("txt"); document.getElementsByName("uname"); document.getElementsByTagName("input"); 2.可以查看和修改属性 setAttribute(name,value); getAttribute(name); 3.空格换行的处理 使用层级关系访问节点 document.parentNode;//获取该元素的父节点 document.childNode;//获取该元素的子节点 document.firstChild;//获取该元素的第一个子节点 document.lastChild;//获取该元素的最后一个子节点 document.nextSibling;//获取该元素的下一个兄弟节点 document.previousSibling;//获取该元素的上一个兄弟节点 4.节点的操作 创建节点： createElement("节点名"); 元素前添加新的节点：insertBefore("新节点","旧节点"); 节点后拼接新节点：appendChild(新节点); 删除子节点：removeChild(节点); 克隆节点：cloneNode(deep); //false 只克隆该标签 true 克隆所有标签 替换节点：replaceChild(新,旧); 5.NODE操作表格 table对象中的属性和方法 属性：rows获取所有行 方法： insertRow(行下标); deleteRow(行下标); tableRow属性和方法 属性： cells获取所有单元格 rowIndex:获取行位置下标 方法： insertCell(单元格下标); deleteCell(单元格下标); tableCell属性和方法 属性： innerHTML:设置文本的HTML标签 innerText:设置文本内容（纯文本） className:类样式 小结： js可以修改CSS样式 1）元素对象 setAttribute("style","CSS样式"); 2）通过className绑定CSS样式
