2. 技术
    3. 03-javaWeb-js2

    03-javaWeb-js2

    技术2022-07-10  163

    目录

    JS获取设置元素

     JS修改样式

     Window加载省略

    案例1-定时弹出广告

    bom(浏览器对象模型)

    window对象详解

    location:定位信息    

    history:历史

    事件总结

    常见的事件

    所有事件案列

    扩展——this使用

    案例2-表单校验plus

    了解阻止事件

    逻辑运算符   

    列表操作

     案例3-隔行换色

    dom(文档对象模型)——节点操作

     案例4-全选或者全不选

    html dom的操作

    案例5-左右选中

    数组

    案例6-省市联动

    引用类型总结

    总结

    JS获取设置元素

            获取元素:

                    var obj=document.getElementById("id值");

     

            获取元素的value属性

                    var val=document.getElementById("id值").value;

            设置元素的value属性        

                    document.getElementById("id值").value="sdfsdf";

     

            获取元素的标签体 

                    var ht=document.getElementById("id值").innerHTML;

            设置元素的标签体

                    document.getElementById("id值").innerHTML="ssss";

     JS修改样式

            操作元素:

                    document.getElementById("")

            操作css属性

                    document.getElementById("id").style.属性="值"

                    属性:就是css中属性 css属性有"-" 例如:backgroud-color                         若有"-" 只需要将"-"删除,后面第一个字母变大写即可

                            obj.style.backgroundColor="#ff0";

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> //点击按钮之后,给id为divid0的元素添加 边框 背景色 宽高 function btnCli(){ //1.获取元素 var obj=document.getElementById("divid0"); //alert(obj) //2.操作元素 //添加背景色 obj.style.backgroundColor="#ff0"; //添加边框 obj.style.border="1px solid red"; //添加宽和高 obj.style.width="100px"; obj.style.height="100px"; } </script> <body> <input type="button" value="将div加上样式" onclick="btnCli()"/> <div id="divid0"></div> </body> </html>

     

     Window加载省略

           window省略:

                    只要是window对象的属性和方法,可以把window省略

                            window.onload 等价于 onload                         window.setInterval() 等价于 setInterval()

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> //window.onload == onload //window.setInterval()== setInterval() /*window.onload=function(){ alert(1) }*/ onload=function(){ alert(1) } </script> <body> </body> </html>

     

    案例1-定时弹出广告

    需求:

        打开页面后4秒,展示广告,2秒之后,该广告隐藏.再停2秒,继续展示.

    技术分析:

        定时器         定时器(BOM-window对象)             setInterval(code,毫秒数):周期执行             setTimeout(code,毫秒数):延迟多长事件后 只执行一次.          清除定时器         clearInterval(id):         clearTimeout(id):

    步骤分析:    

        1.html页面,先把广告隐藏     2.页面加载成功事件 onload     3.编写函数

            定时器:

            操作元素:

                document.getElementById("")

            操作css属性

                document.getElementById("id").style.属性="值"             属性:就是css中属性 css属性有"-" 例如:backgroud-color                 若有"-" 只需要将"-"删除,后面第一个字母变大写即可

    <body> <div id="ad" style="width:100%;display: none;"> <img src="../img/ad_.jpg" width="100%" /> </div> </body> <script> //记录次数 var i=0; //定时器id var timer; onload=function(){ //设置定时器 间隔4秒后展示图片 timer=setInterval(showAd,4000); } //展示广告方法 展示2秒之后隐藏 function showAd(){ //展示的次数加1 i++; //若i=3 清空由setinterval设置的定时器 if(i==3){ clearInterval(timer); } //1.获取广告 var divObj=document.getElementById("ad"); //2.修改广告的样式 将其显示 divObj.style.display="block"; //3.2秒之后隐藏 只执行一次 setTimeout(hideAd,2000); } //隐藏广告 function hideAd(){ //1.获取广告 var divObj=document.getElementById("ad"); //2.修改样式 将其隐藏 divObj.style.display="none"; } </script>

    bom(浏览器对象模型)

     

            所有的浏览器都有5个对象，主要使用3个

                    window:窗口                 location:定位信息 (地址栏)                 history:历史

    window对象详解

            如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，         并为每个框架创建一个额外的 window 对象。

            常用的属性:

                    通过window可以获取其他的四个对象

                            window.location 等价于 location                         window.history 等价于 history                         ...

            常用的方法1                消息框

                            alert("...."):警告框                         confirm("你确定要删除吗?"):确定框 返回值:boolean                         prompt("请输入您的姓名"):输入框 返回值:你输入的内容

    <script> //alert("234"); //确认框 //var flag=confirm("你确定要删除吗?"); //alert(flag) //输入框 var res=prompt("请输入您的姓名"); alert(res); </script>

     

    2                定时器

                            设置定时器

                                    setInterval(code,毫秒数):周期执行                                 setTimeout(code,毫秒数):延迟多长事件后 只执行一次.                                                                  例如:                                         setInterval(showAd,4000);                                         serInterval("showAd()",4000);                         

                            清除定时器

                                    clearInterval(id):                                 clearTimeout(id):

    3                打开和关闭

                            open(url):打开                         close():关闭

    <body> <input type="button" value="open" onclick="openA()"/> </body> <script> function openA(){ //打开a页面 open("a.html"); } </script> <body> 我是a页面 <input type="button" value="close" onclick="close1()" /> </body> <script> function close1(){ close(); } </script>

     

    location:定位信息    

               常用属性:

                    href:获取或者设置当前页面的url(定位信息)                                  location.href; 获取url                 location.href="...";设置url 相当于 a标签

    <head> <meta charset="UTF-8"> <title></title> <script> //获取url //var u=window.location.href; //alert(u); //设置url function setUrl(){ location.href="../window/a.html"; } </script> </head> <body> <input type="button" value="设置url" onclick="setUrl()"> </body>

     

    history:历史

            back();后退

            forward():向前

            ★go(int)

                    go(-1) 相当于 back()                 go(1) 相当于 forward()

    <body> 我是a页面<br /> <a href="b.html">b.html</a><br> <input type="button" value="前进" onclick="forw()" /> </body> <script> //前进 function forw(){ history.go(1) } </script> <body> 我是b页面<br /> <input type="button" value="后退" onclick="goBack()"> </body> <script> function goBack(){ //history对象的go(-1) window.history.go(-1); } </script>

     

    事件总结

    常见的事件

                    焦点事件:★

                            onfocus                         onblur

    <body> 用户名:<input name="" value="tom" onfocus="getFocus()" onblur="loseFocus()" id="username"/><br /> <span id="spanid"></span> </body> <script> //得到焦点 function getFocus(){ //获取元素 var user=document.getElementById("username"); //alert(user.value); //给span填写内容 文本框的内容 document.getElementById("spanid").innerHTML=user.value; } //失去焦点的时候将他的内容弹出来 function loseFocus(){ //获取元素 var user=document.getElementById("username"); alert(user.value); } </script>

     

                    表单事件:★

                            onsubmit                         onchange 改变

                    页面加载事件:★

                            onload

                    鼠标事件(掌握)

                            onclick

                    鼠标事件(了解)

                            ondblclick:双击                         onmousedown:按下                         onmouserup:弹起                         onmousemove:移动                         onmouserover:悬停                         onmouserout:移出

                    键盘事件(理解) 

                            onkeydown:按下                         onkeyup:弹起                         onkeypress:按住

    所有事件案列

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> #e02, #e022 { border: 1px solid #000000; height: 200px; width: 200px; } </style> <script type="text/javascript"> //页面卸载前 window.onbeforeunload = function(){ return "在玩一会吧？"; } // 页面加载事件：当整个html页面加载成功调用 window.onload = function(){ // 文本框事件 var e01 = document.getElementById("e01"); e01.onfocus = function(){ html("textMsg","文本框获得焦点：focus"); } e01.onblur = function(){ html("textMsg","文本框失去焦点：blur"); } e01.onkeydown = function(){ html("textMsg","键盘按下：keydown；"); } e01.onkeypress = function(event){ var event = event || window.event; append("textMsg","键盘按：keypress ("+ String.fromCharCode(event.keyCode)+")；"); } e01.onkeyup = function(){ append("textMsg","键盘弹起：keyup；"); } // 鼠标事件 var e02 = document.getElementById("e02"); e02.onmouseover = function(){ html("divMsg","鼠标移上：mouseover"); } e02.onmouseout = function(){ html("divMsg","鼠标移出：mouseout"); } e02.onmousedown = function(){ html("divMsg","鼠标按下：mousedown"); } e02.onmouseup = function(){ html("divMsg","鼠标弹起：mouseup"); } var e022 = document.getElementById("e022"); e022.onmousemove = function(){ var event = event || window.event; html("divMsg2","鼠标移动：onmousemove"); }; // 按钮事件 var e03 = document.getElementById("e03"); e03.onclick = function () { html("buttonMsg","单击：click"); }; e03.ondblclick= function () { html("buttonMsg","双击：dblclick"); }; }; /** * 指定位置显示指定信息 * @param objId ，元素的id属性值 * @param text，需要显示文本信息 */ function html(objId,text){ document.getElementById(objId).innerHTML = text; } /** * 指定位置追加指定信息 * @param objId ，元素的id属性值 * @param text，需要显示文本信息 */ function append(objId,text){ document.getElementById(objId).innerHTML += text; } </script> </head> <body> <input id="e01" type="text" /><span id="textMsg"></span> <hr/> <div id="e02" ></div><span id="divMsg"></span> <hr/> <div id="e022" ></div><span id="divMsg2"></span> <hr/> <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> </body> </html>

     

    扩展——this使用

            在方法中(function()) this指代的是当前的元素(当前dom对象) 例如:         <input type="text" name="username" id="username" οnblur="loseFocus(this.value)">         方法:                 function loseFocus(obj){                         alert(obj);                 }  

    案例2-表单校验plus

    需求:

        提示信息不用弹出框,将信息追加在文本框后面

    技术分析:

        确定事件 表单提交的时候 onsubmit             文本框失去焦点的时候 onblur     编写函数     获取元素

            document.getElementById("id值");

        操作元素(获取元素的值,操作标签体,操作标签value属性)

            username_msgObj.innerHTML

    步骤分析:

        1.表单     2.表单提交的时候 确定事件 onsubmit()     3.校验用户名和密码     4.获取用户名和密码的对象及值     5.判断内容,当为空的时候,获取响应的span元素         往span元素中显示错误信息 

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> function checkForm(){ var flag = true; //1.获取用户名和密码里面输入的内容 var usernameValue=document.getElementById("username").value; var passwordValue=document.getElementById("password").value; //alert(usernameValue+"---"+passwordValue); //2.校验数据 if(usernameValue == null || usernameValue== ""){ //若为空 在span中添加错误信息 //a.获取span var username_msgObj=document.getElementById("username_msg"); //b.设置错误信息 //username_msgObj.innerHTML="用户名不能为空"; username_msgObj.innerHTML="<font color='red'>用户名不能为空</font>"; //将flag置为false; flag=false; }else{ //a.获取span var username_msgObj=document.getElementById("username_msg"); //b.设置错误信息 username_msgObj.innerHTML=""; } //3.校验密码 if(passwordValue == null || passwordValue== ""){ //若为空 在span中添加错误信息 //a.获取span var password_msgObj=document.getElementById("password_msg"); //b.设置错误信息 password_msgObj.innerHTML="密码不能为空"; password_msgObj.style.color="red"; //将flag置为false; flag=false; } return flag; } //方式1: /*function loseFocus(){ //1.获取input标签内容 var usernameValue=document.getElementById("username").value; //2,判断值 若不满足 给相应的span设置内容 if(usernameValue==""){ document.getElementById("username_msg").innerHTML="用户名不能为空"; }else{ document.getElementById("username_msg").innerHTML=""; } }*/ /*function loseFocus(obj){ alert(obj.value); }*/ function loseFocus(obj){ alert(obj); } </script> <body> <form action="#" method="get" onsubmit="return checkForm()"> <table width="60%" height="60%" align="center" bgcolor="#ffffff"> <tr> <td colspan="3">会员注册USER REGISTER</td> </tr> <tr> <td width="20%">用户名:</td> <td width="40%"><input type="text" name="username" id="username" onblur="loseFocus(this.value)"></td> <td width="40%"><span id="username_msg"></span></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="password" id="password"></td> <td><span id="password_msg"></span></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="repassword" id="repassword"></td> <td><span id="repassword_msg"></span></td> </tr> </table> </form> </body> </html>

    了解阻止事件

            有兼容性问题                阻止默认事件的发生

                    var event = event || window.event;                 //阻止默认事件的发生                 event.preventDefault();

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="https://www.baidu.com/" onclick="one()">1</a><br/> <a href="https://www.baidu.com/" onclick="two()">2</a><br/> <script type="text/javascript"> function one(){ alert("我之后，1网继续访问"); } function two(event){ alert("我之后，2网不再访问"); var event = event || window.event; //阻止默认事件的发生 event.preventDefault(); } </script> </body> </html>         阻止事件传播

                    var event = event || window.event;                //阻止传播                 event.stopPropagation();

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="e1" style="width:200px ; height: 200px; background-color: #f00;"> <div id="e2" style="width:100px ; height: 100px; background-color: #0f0;"></div> </div> <hr /> <div id="e3" style="width:200px ; height: 200px; background-color: #f00;"> <div id="e4" style="width:100px ; height: 100px; background-color: #0f0;"></div> </div> <script type="text/javascript"> var e1 = document.getElementById("e1"); var e2 = document.getElementById("e2"); var e3 = document.getElementById("e3"); var e4 = document.getElementById("e4"); e1.onclick = function(){ alert("我是外边的div:儿子,我感受到你被点了."); } e2.onclick = function(){ alert("我是里面的div:我被点了,爹爹,你感觉咋样?"); } e3.onclick = function(){ alert("........."); } e4.onclick = function(event){ alert("我是里面的div:我又被点了,爹爹,你还能感觉到吗?"); var event = event || window.event; //阻止传播 event.stopPropagation(); } </script> </body> </html>

     

    逻辑运算符   

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //alert( true || false);//true //alert(true||"abc")//true //alert(false||"abc") //alert(true&&false)//false //alert(true&&"abc") //alert(false&&"abc") alert(null&&"abc"); //将null转化为Boolean，为false，所以由null确定结果，值为null //alert(Boolean(null)) </script> </head> <body> </body> </html>

    列表操作

    获取元素:

            document.getElementById("id"):通过id获取一个元素         document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)返回一个数组

    Array:

            常用属性:                 length:数组的长度

     案例3-隔行换色

    需求:

        一个表格,隔一行换一个色

    技术分析:

        事件:onload      获取元素:dom操作

    步骤分析:

        1.html表格一加载的时候 确定事件 onload     2.编写函数        a.获取元素(所有的tr元素)

                       document.getElementsByTagName("tr");

            b.操作(若当前行是偶数的话加一个样式,若是奇数的话,加另一个样式)

                        arr[i].style.backgroundColor="#FFFFCC";

    <script> //页面加载成功 onload=function(){ //1.获取所有的tr var arr=document.getElementsByTagName("tr"); //alert(arr); //alert(arr.length); //2.判断奇偶数 添加不同的样式 遍历数组 for(var i=1;i<arr.length;i++){ if(i%2==0){ arr[i].style.backgroundColor="#FFFFCC"; }else{ arr[i].style.backgroundColor="#BCD68D"; } } } </script>

    dom(文档对象模型)——节点操作

            当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)

            节点(Node)

                    文档节点 document                 元素节点 element                 属性节点 attribute                 文本节点 text

            获取节点:                通过document可以获取其他节点:

                            常用方法:                                 document.getElementById("id值"):获取一个特定的元素                                 document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)                                 document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)                                 document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)

                    设置获取获取节点的value属性

                            dom对象.value;获取                         dom对象.value="";设置

                    设置或者获取节点的标签体

                            dom对象.innerHTML;获取                         dom对象.innerHTML="";设置

                    获取或者设置style属性

                            dom对象.style.属性;获取                         dom对象.style.属性="";设置

                    获取或者设置属性

                            dom对象.属性

     案例4-全选或者全不选

    步骤分析:

        1.确定事件 最上面那个复选框的单击事件 onclick

    οnclick="selectAll(this)"

        2.编写函数:让所有的复选框和最上面的复选框状态保持一致         a.获取最上面这个复选框选中状态 通过checkbox的checked属性即可         b.获取其他的复选框,设置他们的checked属性即可             可以通过以下两种方案获取元素                 document.getElementsByClassName():需要给下面所有的复选框添加class属性

                     document.getElementsByClassName("itemSelect")

                    document.getElementsByName():需要给下面所有的复选框添加name属性

    <script> function selectAll(obj){ //获取当前复选框的选中状态 var flag=obj.checked; //获取所有的复选框 var arr=document.getElementsByClassName("itemSelect"); //遍历数组,将所有的复选框和flag相同 for(var i=0;i<arr.length;i++){ arr[i].checked=flag; } } </script> <tr> <th><input type="checkbox" onclick="selectAll(this)" ></th> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>1</td> <td>手机数码</td> <td>手机数码类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>2</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr>

     

    html dom的操作

    对于htmldom的操作若在js或者htmldom 查找不到 去查找xml dom         关于文档的操作 在 xml dom 的document中         关于元素的操作 在 xml dom 的element中                 appendChild(dom对象):在一个元素下添加孩子

    案例5-左右选中

    技术分析:

    1.确定事件,按钮的单击事件

    2.编写函数:

        点击移动单|多个的:         a.获取左边选中的选项  select对象.options--数组             遍历数组 判断是否选中 option对象.selected         b.将其追加到右边的下拉选中             rightSelect对象.appendChild(option);     点击移动所有的         a.获取左边的所有的选项         b.一个个的追加过去 

    <script> onload = function() { //给单移按钮派发事件 document.getElementById("toRight1").onclick = function() { //获取左边所有的option var arr = document.getElementById("left").options; //alert(arr); //alert(arr.length); //遍历数组 判断是否选中 for (var i = 0; i < arr.length; i++) { //判断是否选中 若选中 则追加(移动)到右边的select中 if (arr[i].selected) { document.getElementById("right").appendChild(arr[i]); break; } } } //给多移动按钮派发事件 document.getElementById("toRight2").onclick = function() { //获取左边所有的option var arr = document.getElementById("left").options; //alert(arr); //alert(arr.length); //遍历数组 判断是否选中 for (var i = 0; i < arr.length; i++) { //判断是否选中 若选中 则追加(移动)到右边的select中 if (arr[i].selected) { document.getElementById("right").appendChild(arr[i]); //注意:长度变化 i--; } } } //给全部移动按钮派发事件 document.getElementById("toRight3").onclick = function() { //获取左边所有的option var arr = document.getElementById("left").options; //遍历数组 判断是否选中 for (var i = 0; i < arr.length;) { //相当于永远把第一个选项移动过去 document.getElementById("right").appendChild(arr[i]); //注意:长度变化 } } } </script> <body> <table> <tr> <td> <select id="left" multiple="true" style="width:100px" size="10"> <option>環</option> <option>芈</option> <option>琅</option> <option>琊</option> <option>爨</option> <option>甄</option> <option>槑</option> <option>夔</option> </select> </td> <td> <input type="button" value=">" id="toRight1"><br> <input type="button" value=">>" id="toRight2"><br> <input type="button" value=">>>" id="toRight3"><br><br> <input type="button" value="<" id="toLeft1"><br> <input type="button" value="<<" id="toLeft2"><br> <input type="button" value="<<<" id="toLeft3"> </td> <td> <select id="right" multiple="true" style="width:100px" size="10"> </select> </td> </tr> </table> </body>

     

    数组

            语法:

                    new Array();//长度为0                 new Array(size);//指定长度的                 new Array(e1,e2..);//指定元素                 非官方                         var arr4=["aa","bb"];

            常用属性:

                    length

            注意:

                    数组是可变的                 数组可以存放任意值

            常用方法:(了解)

                    存放值:对内容的操作                         pop():弹        最后一个                         push():插入 到最后                                                  shift():删除第一个                         unshift():插入到首位

                    打印数组:

                            join(分隔符):将数组里的元素按照指定的分隔符打印

                    拼接数组:

                            concat():连接两个或更多的数组，并返回结果。

                    对结构的操作:

                            sort();排序                         reverse();反转

    案例6-省市联动

    需求:

        选中省的时候,动态的查询当前省下的所有市,然后展示在市的下拉选中 

    步骤分析:

        1.省的下拉选 的选项中添加value属性 当成数组的索引     2.初始化市     3.选择省的时候,onchange事件     4.编写函数,         通过获取的索引获取对象的市的数组 this.value         遍历数组,将数组里面的每个值组装option 添加到select中即可

    籍贯: <select name="pro" onchange="selCity(this.value)"> <option >-请选择-</option> <option value="0">黑龙江</option> <option value="1">吉林</option> <option value="2">辽宁</option> <option value="3">河南</option> </select> <select name="city"> <option >-请选择-</option> </select> <br> <script> function selCity(index){ //alert(index); var cities=arr[index]; //获取市的下拉选 var citySelObj=document.getElementsByName("city")[0]; //先初始化 citySelObj.innerHTML="<option >-请选择-</option>"; //遍历数组 组装成option 追加到select for(var i=0;i<cities.length;i++){ citySelObj.innerHTML+=("<option>"+cities[i]+"</option>"); } } </script>

     

    引用类型总结

            原始类型中的String Number Boolean都是伪对象,可以调用相应的方法

            Array:数组        String:

                    语法:

                            new String(值|变量);//返回一个对象                         String(值|变量);//返回原始类型

    <script> var s="aa"; var s1=new String(true); //alert(typeof s1); var s2 =String(false); //alert(typeof s2); //alert(s2.length); alert(s.length); </script>

                    常用方法:

                            substring(start,end):[start,end)  包括 start 处的字符，但不包括 end 处的字符                         substr(start,size):从索引为指定的值开始向后截取几个                                                  charAt(index):返回在指定位置的字符。                         indexOf(""):返回字符串所在索引                                                  replace():替换                         split():切割                         

                    常用属性:length        

            Boolean:

                    语法:

                            new Boolean(值|变量);                         Boolean(值|变量);                         非0数字 非空字符串 非空对象 转成true

    <script> var f=new Boolean("");//非0数字 非空字符串 非空对象 转成true alert(f); </script>         Number

                    语法:

                            new Number(值|变量);                         Number(值|变量);

                    注意:                

                            null====>0                          fale====>0 true====>1                         字符串的数字=====>对应的数字                         其他的NaN

    <script> var i=Number("2"); i=Number(null);//0 i=Number(false);//0 i=Number(true);//1 i=Number("false");//NaN not a number alert(i) </script>         Date:

                    new Date();

                    常用方法:

                            toLocalString()

            RegExp:正则表达式

                    语法:

                            直接量语法  /正则表达式/参数                         直接量语法  /正则表达式/                                                  new RegExp("正则表达式")                         new RegExp("正则表达式","参数") 

                            参数:

                                    i:忽略大小写                                 g:全局

                            常用方法:

                                    test() :返回值为boolean

    <script> var r1=/^[0-9]$/; var i=1; //alert(r1.test(i)); var r2=/^[a-z0-9_-]{3,16}$/ var s="12"; //alert(r2.test(s));//false s="123" alert(r2.test(s));//true </script>         Math:

                    Math.常量|方法                 Math.PI                 Math.random()  [0,1)                 

            全局:

                    ★                 decodeURI() 解码某个编码的 URI。                  encodeURI() 把字符串编码为 URI。

                    Number():强制转换成数字                 String():转成字符串                                  parseInt():尝试转换成整数                 parseFloat():尝试转换成小数                                  eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。                  

    <script> var s="http://www.itheima.com/你好/ 1.html"; document.write(encodeURI(s)+"<hr/>") var s_="http://www.itheima.com/你好/ 1.html"; document.write(decodeURI(s_)) var i="9.9"; //alert(parseInt(i));//9 //alert(parseFloat(i));//9.9 i="9.9超市" //alert(parseInt(i));//9 //alert(parseFloat(i));//9.9 i="你好9"; //alert(parseInt(i));//NaN //alert(parseFloat(i));//NaN s="alert('hello')"; eval(s); </script>

     

    总结

    BOM(浏览器对象模型)        window对象:窗口

                    注意:                         若是window对象的属性和方法,调用的时候可以省略window                 常用属性:                         通过window可以获取其他的四个对象                                 window.location 等价于 location                          常用方法:                         消息框                                 alert() 警告框                                 confirm() 确认框 返回值:boolean                                 prompt()        输入框 返回值:输入的内容                         定时器                                 设置                                         setInterval(code,毫秒数):循环                                         setTimeout(code,毫秒数):延迟 只执行一次                                 清除                                         clearInterval(id):                                         clearTimeout(id):                         打开和关闭                                 open(url)                                 close()

            location对象:定位信息 地址栏

                    常用属性:                         href:获取或者设置当前页面的url                                 location.href:获取                                 location.href="url":设置 相当于超链接

            history对象:操作历史

                    常用方法:                         go()

    事件:

            焦点:★                 onfocus:获取焦点                 onblur:失去焦点         表单事件:★                 onsubmit: form表单里的                 onchange:改变(下拉选)         页面或者对象加载:★                 onload:         鼠标:★                 onclick:单击         键盘:                 onkeyup:

                    

    dom(★)

            获取元素的方法(4个) document         操作元素的属性  dom对象.属性;

    引用类型:

            array         string                 substring         全局:                 编码2个                 强制转化 Number String                 尝试  parseXxx                 eval() 解析字符串形式的js代码         Math random()                

     附件：相关代码和文档资料

    Processed: 0.012, SQL: 9