day03 js
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>
- 1. JS-day03
- 2. day03
- 3. Day03
- 4. 談談 JS 垃圾回收機制（day03）
- 5. Day03 - CSS 變量
- 6. 項目1 day03
- 7. cgb2007-京淘day03
- 8. day03下
- 9. Day03 lanmp
- 10. Spring-day03
- 更多相關文章...
- • ionic 安裝 - ionic 教程
- • ionic 創建 APP - ionic 教程
- • 適用於PHP初學者的學習線路和建議
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JS-day03
- 2. day03
- 3. Day03
- 4. 談談 JS 垃圾回收機制（day03）
- 5. Day03 - CSS 變量
- 6. 項目1 day03
- 7. cgb2007-京淘day03
- 8. day03下
- 9. Day03 lanmp
- 10. Spring-day03