day03 js

时间 2019-11-13

标签 day03 day 栏目 JavaScript 繁體版

原文原文链接

Array:

建立：

（1）javascript

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

（2）html

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

（3）java

    	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()
dom

（2）push()函数

（3）pop()ui

（4）shift()this

（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();

经常使用方法：

    <script type="text/javascript">
    	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到如今的时间
    </script>

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,}

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

函数：

建立：（1）

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

（2）

    <script type="text/javascript">
    	function add(){
    		alert(1);
    	}
    	add();
    </script>

（3）最后一个参数是函数体

  <script type="text/javascript">
    	var add = new Function("a","b","return a+b");
    	alert(add(23,21));
    </script>

参数：传递参数的时候，多余的忽略，少的为 undefined。

扩展：

arguments：做用将咱们传递的参数看作一个数组，咱们能够获得传递进来的参数。

<script type="text/javascript">
    	function add(a,b){
    		for(var i=0;i<arguments.length;i++){
    			alert(arguments[i]);
    		}
    	}
    	add(1,2,3,4);
</script>

全局函数：

eval(): 能够将字符串转换成js代码。（***）

    <script type="text/javascript">
    	var str = "alert(1)";
    	eval(str);
    </script>

编码解码函数：

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

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

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

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

区别：编码的字符数量不同。

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

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

    <script type="text/javascript">
    	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);
    </script>

结论：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。

    <script>
    	alert(confirm("are you sure?"))
    </script>

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

prompt()

prompt("")

prompt("","")

    <script>
    	alert(prompt("please Enter your message?","helloworld"));
    </script>

定时器：

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>