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

常用方法：

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