day03 js

Array:

创建:

(1)

var arr0= new Array();
alert(arr0.length);

(2)

var arr1= new Array(3);    
alert(arr1.length);

(3)

var arr2= new Array(1,2,3,4);
for(var i=0;i<arr2.length;i++){
    alert(arr2[i]);

(4)(常用)

var arr3 = [1,2,3,4];
alert(arr3.length);

(5)

var arr4 = new Array(4);
arr4[100] = 19;
alert(arr4.length);

常用方法:

(1)concat()

(2)push()

(3)pop()

(4)shift()

(5)unshift()

(6)reverse()

(7)sort()

(8)toString()   (typeof(arr.toString()))

var arr= ["a","b","c","d"];    
var arr1 = [1,2,3];
alert(arr.concat(arr1)); //连接数组,返回arr
alert(arr.push("last")); //在数组最后添加一个元素,返回新数组长度
alert(arr);
alert(arr.pop()); //删除最后一个元素,返回删除的元素
alert(arr);
alert(arr.shift());//删除第一个元素,返回删除元素    
alert(arr);    
alert(arr.unshift("first"));//数组的起始位置添加新元素,返回新数组长度    
alert(arr);    
alert(arr.reverse());//数组反转    
alert(arr);    
alert(arr.sort());//数组排序    
alert(arr.toString());//转换成字符串

以下三个重要!!

 (9)join(如果没有参数那么字符串字符间用逗号隔开, 如果有参数就用相应的参数隔开)

var arr= ["a","b","c","d"];
alert(arr.join("."));

 (10)slice(start:开始的位置(包括开始的位置)  end(不包括结束的位置))(包左不包右)切割数组

var arr= ["a","b","c","d"];
alert(arr.slice(0,2));

(11)splice(添加新删除旧的(start, 删除的数量, 添加的元素))

var arr= ["a","b","c","d"];
arr.splice(0,2,"new");
alert(arr);

String常用方法:

(1)concat()

(2)charAt()

(3)charCodeAt()

(4)indexOf()

(5)substring()

(6)substr()

(7)split()

以下重要!!

(8)substring()  包左不包右,参数是位置

(9)substr() 第一个参数是位置,第二个是截取的长度

var arr= "abcdef";
alert(arr.substring(0,2));
alert(arr.substr(0,2));

(10)split()  将字符串分割成数组

var arr= "ab.cde.f";
arr.split(".");
alert(arr);

Math:

abs():绝对值 

ceil():向上入值  

floor():向下舍值

round():四舍五入

random():0{包括0}到1{不包括1}的随机数  

var a=-3.4;
alert(Math.abs(a));
alert(a);
alert(Math.ceil(a));
alert(Math.floor(a));
alert(Math.round(a));
alert(Math.random());

Date:

创建:

var da = new Date();

常用方法:

var da = new Date();
alert(da);
alert(da.getFullYear());
alert(da.getMonth()); //月份从0开始
alert(da.getDate());
alert(da.getHours());
alert(da.getMinutes());
alert(da.getSeconds());
alert(da.getTime()); //从1970.1.1到现在的时间

RegExp:

   创建:

var reg = new RegExp("表达式","修饰")
var reg = /表达式/;  //习惯

   作用:

判断字符串是否符合一定的规则

    test()进行判断

/^n/ :必须以n开头

/n$/:必须以n结尾

/^n$/:完全匹配


[0-9]:

[a-z]:

[A-Z]:

 [34]:匹配括号中的任意字符

[^4]:^相当于!除了括号中的字符 任意字符都行

[a-zA-Z_]:

\d: 0-9。

\D:  [^0-9]。

\w: [a-zA-Z_]。

\W: [^a-zA-Z_]。


*:

?:0或1个

+: 至少为一个


{N}:

{a,z}:

{3,8}:

{n,}

var reg = /^1[0-9]\d{9}$/;
var phone ="15822245675";
alert(reg.test(phone));

函数:

创建:(1)

var add = function(){
    alert(1);
}
add();

(2)

function add(){
    alert(1);
}
add();

(3)最后一个参数是函数体

var add = new Function("a","b","return a+b");
alert(add(23,21));

参数: 传递参数的时候,多余的忽略,少的为 undefined。

扩展:

arguments:作用将我们传递的参数看做一个数组,我们可以得到传递进来的参数。

function add(a,b){
    for(var i=0;i<arguments.length;i++){
        alert(arguments[i]);
    }
}
add(1,2,3,4);

全局函数:

eval(): 可以将字符串转换成js代码。(***)

var str = "alert(1)";
eval(str);

编码解码函数:

        decodeURI():解码某个编码的URI.

        encodeURI():把字符串编码为URI.

        decodeURIComponent():解码一个编码的 URI 组件。

        encodeURIComponent(): 把字符串编码为 URI 组件。 

区别:编码的字符数量不一样。

            encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z 

            encodeURIComponent不编码字符有71个:!, ',(,),*,-,.,_,~,0-9,a-z,A-Z

var str = "中国&";
var str1 = encodeURI(str);    
alert(str1);
var str2 = decodeURI(str1);
alert(str2);
var str3 = encodeURIComponent(str);
alert(str3);
var str4 = decodeURIComponent(str3);
alert(str4);

 结论:www.itcast.cn/index.html?name=zhangsan  

          习惯:  decodeURI() encodeURI() 对主地址进行编码 解码,

       decodeURIComponent() encodeURIComponent()  对参数进行编码解码

------------------------(不用)------------------------------------

escape() 对字符串进行编码。 

unescape() 对由 escape() 编码的字符串进行解码。 

ECMAScript v3 反对使用该方法,应用使用 decodeURI() 和 decodeURIComponent() 替代它。

事件:

    onclick   

onchange  改变事件

onfocus   获取焦点

onblur    失去焦点


onkeydown   按下键盘

onkeypress     按下或按住

onkeyup     松开键盘


onmousedown  鼠标按下

onmousemove  鼠标移动

onmouseout   鼠标移开

      onmouseover   移到某元素之上

onmouseup   鼠标松开

onsubmit

onload

如何绑定事件:

(1)写在头(head)部

<!DOCTYPE html>
<html>
  <head>
    <title>demo.html</title>
    <script type="text/javascript">
        function func(){
            alert(1);      
        }
    </script>
  </head>
  <body>
    <input type="button" value="click me!" onclick="func()"/>
  </body>
</html>

(2)

window.onload   getElementById("").onclick=..

<!DOCTYPE html>
<html>
  <head>
    <title>demo.html</title>
    <script type="text/javascript">
    window.onload=function(){
        document.getElementById("te").onclick=function(){
            alert(3);
        }
    }
    </script>
  </head>
  <body>
    <input type="button" id="te" value="click me!"/>
  </body>
</html>

(3)写在标签里面

<!DOCTYPE html>
<html>
  <head>
    <title>demo.html</title> 
  </head>
  <body>
    <input type="button" id="te" value="click me!" onclick="javascript:alert(4)"/>
  </body>
</html>

焦点:

onfocus    onblur

<!DOCTYPE html>
<html>
  <head>
    <title>demo.html</title> 
    <script>  
    function func(){
        var val = document.getElementById("te").value;  
        alert(val);
    }
    function fun(){
        var da = new Date();
        document.getElementById("te").value = da.toLocaleString();
    }
    </script>
  </head>
  <body>
    <input type="text" id="te" value="hello" onfocus="func()" onblur="fun()"/>
  </body>
</html>

阻止事件的派发:

stopPropagation();

如果不加这个阻止的,会弹出  2,1。加了之后只弹出2.

<!DOCTYPE html>
<html>
  <head>
    <title>demo.html</title> 
    <script>
    function func(e){
      if(e){
        e.stopPropagation();  //该e是指ie浏览器
      }else{
        event.stopPropagation();
      }
      alert(1);
    }
    function fun(){
      alert(2);
    }
    </script>
  </head>
  <body>
  <input type="button" value="click me"  onclick="fun()"/>
  </body>
</html>

BOM():

Window

parent:父窗口

                opener:打开当前窗口的窗口

                self:当前窗口(自己)

                top:顶级窗口

  常用方法:

     弹框:

   alert() :   警告框。 

   confirm() :确认,取消按钮的对话框。有返回值 true,false。

alert(confirm("are you sure?"))

    prompt()  :用户可输入内容的对话框

    prompt()

    prompt("")

    prompt("","")

alert(prompt("please Enter your message?","helloworld"));

定时器:

setTimeout():指定某时间后调用某方法

                clearTimeout(): 清除   setTimeout()设置的定时器

                setInterval():设置间隔

clearInterval():清除间隔

<!DOCTYPE html>
<html>
  <head>
    <title>demo.html</title> 
    <script>
    var t = 0;
    var s;  
    function func(){  
        document.getElementById("te").value = t;   
        t++;  
        s=setTimeout("func()",1000);  
    } 
    function fun(){
        clearTimeout(s);
    }
    </script>
  </head>
  <body>
    <input type="button" value="start" onclick="func()"/>
    <input type="text" id="te" size="30"/>
    <input type="button" value="end" onclick="fun()"/>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>demo.html</title> 
    <script>
    var t = 0;
    var s;
    function func(){
        s=setInterval("show()",1000);
    } 
    function show(){
        var da = new Date();
        document.getElementById("te").value = da.toLocaleString();
    }   
    function fun(){
        clearInterval(s); 
    }
    </script>
  </head>
  <body>
    <input type="button" value="start" onclick="func()"/>
    <input type="text" id="te" size="30"/>
    <input type="button" value="end" onclick="fun()"/>
  </body>
</html>

Navigator:浏览器

screen:(分辨率)

History:历史

back()

forward()

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

<!DOCTYPE html>
<html>
  <head>
    <title>history01.html</title>
    <script>
    function fun(){
        history.back();
    }
    function func(){
        history.forward();
    }
    </script>
  </head>
  <body>
    <a href="history03.html">history03</a><br>
    <input type="button" value="back" onclick="fun()"/>
    <input type="button" value="forward" onclick="func()"/>  
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>history01.html</title>
    <script>  
    function fun(){ 
        history.go(-1);  
    } 
    function func(){
        history.go(1);
    }
    </script>
  </head>
  <body>
    <a href="history03.html">history03</a><br>
    <input type="button" value="back" onclick="fun()"/>
    <input type="button" value="forward" onclick="func()"/>  
  </body>
</html>

Location(本地)

href 页面跳转

<!DOCTYPE html>
<html>
  <head>
    <title>local01.html</title>
    <script>
    function fun(){
    location.href="local02.html";   
    }
    </script>
  </head>
  <body>
    <input type="button" value="跳转" onclick="fun()">
  </body>
</html>

DOM:文档对象模型。

getElementById():通过id得到相应的对象。

getElementsByTagName():通过标签获得相应的对象。

getElementsByClassName():通过class获得相应的对象。

getElementsByName():通过name获得相应的对象。

三者区别:

        id  可以获得对应对象的值,因为他保证只有一个,并且element 没有's'

        其余三个 name 只能对其赋值,也就是  .innerHTML="<font color="red">hello</font>"

<!DOCTYPE html>
<html>
  <head>
    <title>dom01.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
     window.onload=function(){
      var v01 = document.getElementById("myid01").innerHTML; 
      alert(v01);  //能够弹出myid01
      var v02 = document.getElementById("myid02").innerHTML;
      alert(v02);  //能够弹出<font color="red">myid02</font>
      var va01 = document.getElementsByName("myname").innerHTML;
      alert(va01);  //弹出undefined
      var va02 = document.getElementsByClassName("myclass").innerHTML;
      alert(va02);  //弹出undefined
      var va03 = document.getElementsByTagName("div").innerHTML;
      alert(va03);  //弹出undefined
      var vv01 = document.getElementsByTagName("div");
      alert(vv01.length);
      alert(vv01); //弹出[object HTMLCollection],说明获得的是一个集合。  
      for(var i=0;i<ob.length;i++){
          ob[i].innerHTML='高薪';
      }
  }
   
   function fun(){ 
      var vv001 = document.getElementById("myid03").value;
      alert(vv001);
      var vv002 = document.getElementsByClassName("myclass02").value;
      alert(vv002);
      var vv003 = document.getElementsByTagName("div").value;
      alert(vv003);
      var vv004 = document.getElementsByName("myname03").value;
      alert(vv004);
    }
    </script>
  </head>
  <body>
     <div id="myid01">myid01</div>
     <div id="myid02"><font color="red">myid02</font></div>
     <div class="myclass">myclass01</div>
     <div name="myname" class="myclass">myname+myclass</div>
     <div name="myname">myname02</div>
     
     <form onsubmit="return fun();"> 
        <input type="text" id="myid03"/>  
        <input type="text" class="myclass02"/>   
        <input type="text" name="myname03"/>
        <input type="text" id="myid03" class="myclass02"/>
        <input type="submit" name="submit">
     </form>
  </body>
</html>

value:给表单标签赋值(覆盖默认值),有value属性时,才用value获取值。

innerHTML:html代码与文本

write:

<!DOCTYPE html>
<html>
  <head>
    <title>demo02.html</title>
<script>
document.write("<a href='#'>hello</a>");
</script>
  </head>
  <body>
  </body>
</html>
捐助共勉
版权声明:若无特殊注明,本文皆为原创,转载请保留文章出处。