JavaScript知識提要
阿新 • • 發佈：2018-12-14
javascript筆記
一、js的簡介
1、js是什麼 js是可以嵌入到html中，是 基於物件 和 事件驅動 的 指令碼語言 特點： (1)互動性 (2)安全性：js不能訪問本地磁碟 (3)跨平臺：瀏覽器中都具備js解析器 2、js能做什麼 (1)js能動態的修改(增刪)html和css的程式碼 (2)能動態的校驗資料 3、js歷史及組成 ECMAScript BOM(瀏覽器物件模型) DOM(文件物件模型) 4、js被引入的方式 (1)內嵌指令碼 <input type="button" value="button" onclick="alert('xxx')" /> (2)內部指令碼 <script type="text/javascript"> alert("xxx"); </script> (3)外部指令碼 首先先建立一個js檔案 其次在html中引入 <script type="text/javascript" src="demo1.js"></script> js程式碼放在哪？ 放在哪都行 但是在不影響html功能的前提下 越晚載入越好
二、js基本語法
1、變數 (1) var x = 5; x = 'javascript'; var y = "hello"; var b = true; (2) x = 5; 2、原始資料型別 (1)number:數字型別 (2)string：字串型別 (3)boolean:布林型別 (4)null:空型別 (5)underfind:未定義 注意：number、boolean、string是偽物件 型別轉換： number\boolean轉成string toString(); string\boolean轉成number parseInt() parseFloat() boolean不能轉 string可以將數字字串轉換成number 如果“123a3sd5” 轉成123 強制轉換 Boolean() 強轉成布林 數字強轉成布林 非零就是true 零就是false 字串強轉成布林 非“”(空字串)就是true 空字串“”就是false Number() 強轉成數字 布林轉數字 true轉成1 false轉成0 字串轉數字 不能強轉 3、引用資料型別 java: Object obj = new Object(); js: var obj = new Object(); var num = new Number(); 4、運算子 (1)賦值運算子 var x = 5; (2)算數運算子 + - * / % +: 遇到字串變成連線 -：先把字串轉成數字然後進行運算 *: 先把字串轉成數字然後進行運算 /: 先把字串轉成數字然後進行運算 (3)邏輯運算子 && || (4)比較運算子 < > >= <= != == ===:全等：型別與值都要相等 (5)三元運算子 3<2?"大於":"小於" (6)void運算子 <a href="javascript:void(0);">xxxxxx</a> (7)型別運算子 typeof:判斷資料型別 返回我的資料型別 instanceof：判斷資料型別 是否是某種型別 var obj = new Object(); alert(typeof obj);//object alert(obj instanceof Object);//true 5、邏輯語句 (1)if-else //條件: //數字非0 字串非空====true if(9){ alert("true--"); }else{ alert("false--"); } (2)switch var x = "java"; switch(x){ case "css": alert("css"); break; case "js": alert("js"); break; case "java": alert("java"); break; default: alert("def"); } (3)for for(var i = 0;i<5;i++){ alert(i); } (4)for in var arr = [1,3,5,7,"js"]; for(index in arr){//index代表角標 //alert(index); alert(arr[index]); }
三、js內建物件
(1)Number
建立方式：
var myNum=new Number(value);
var myNum=Number(value);
屬性和方法：
toString():轉成字串
valueOf()：返回一個 Number 物件的基本數字值
(2)Boolean
建立方式：
var bool = new Boolean(value);
var bool = Boolean(value);
屬性和方法：
toString():轉成字串
valueOf()：返回一個 Boolean 物件的基本值(boolean)
(3)String
建立方式：
var str = new String(s);
var str = String(s);
屬性和方法：
length:字串的長度
charAt():返回索引字元
charCodeAt:返回索引字元unicode
indexOf():返回字元的索引
lastIndexOf();逆向返回字元的索引
split();將字串按照特殊字元切割成陣列
substr():從起始索引號提取字串中指定數目的字元
substring():提取字串中兩個指定的索引號之間的字元
toUpperCase();轉大寫
示例：
(4)Array
建立方式：
var arr = new Array();//空陣列
var arr = new Array(size);//建立一個指定長度的資料
var arr = new Array(element0, element1, ..., elementn);//建立陣列直接例項化元素
var arr = [];//空陣列
var arr = [1,2,5,"java"];//建立陣列直接例項化元素
屬性和方法：
length:陣列長度
join()：把陣列的所有元素放入一個字串。元素通過指定的分隔符進行分隔一個
pop():刪除並返回最後元素
push()：向陣列的末尾新增一個或更多元素，並返回新的長度
reverse();反轉陣列
sort();排序
(5)Date
建立方式：
var myDate = new Date();
var myDate = new Date(毫秒值);//代表從1970-1-1到現在的一個毫秒值
屬性和方法
getFullYear():年
getMonth():月 0-11
getDate():日 1-31
getDay()：星期 0-6
getTime():返回1970年1月1日午夜到指定日期（字串）的毫秒數
toLocalString();獲得本地時間格式的字串
(6)Math
建立方式：
Math 物件並不像 Date 和 String 那樣是物件的類，因此沒有建構函式 Math()，像 Math.sin() 這樣的函式只是函式，
不是某個物件的方法。您無需建立它，通過把 Math 作為物件使用就可以呼叫其所有屬性和方法。
屬性和方法
PI：圓周率
abs():絕對值
ceil():對數進行上舍入
floor():對數進行下舍入
pow(x,y)：返回 x 的 y 次冪
random():0-1之間的隨機數
round():四捨五入
(7)RegExp
建立方式：
var reg = new RegExp(pattern);
var reg = /^正則規則$/;
規則的寫法：
[0-9]
[A-Z]
[a-z]
[A-z]
\d 代表資料
\D 非數字
\w 查詢單詞字元
\W 查詢非單詞字元
\s 查詢空白字元
\S 查詢非空白字元
n+ 出現至少一次
n* 出現0次或多次
n? 出現0次或1次
{5} 出現5
{2,8} 2到8次
方法：
test(str):檢索字串中指定的值。返回 true 或 false
需求：
校驗郵箱：
var email = 四、js的函式
1、js函式定義的方式
(1)普通方式
語法：function 函式名(引數列表){函式體}
示例：
function method(){
alert("xxx");
}
method();
(2)匿名函式
語法：function(引數列表){函式體}
示例：
var method = function(){
alert("yyy");
};
method();
(3)物件函式
語法：new Function(引數1,引數2,...,函式體);
注意：引數名稱必須使用字串形式、最後一個預設是函式體且函式體需要字串形式
示例：
var fn = new Function("a","b","alert(a+b)");
fn(2,5);
2、函式的引數
(1)形參沒有var去修飾
(2)形參和實參個數不一定相等
(3)arguments物件 是個陣列 會將傳遞的實參進行封裝
function fn(a,b,c){
//var sum = a+b+c;
//alert(sum);
//arguments是個陣列 會將傳遞的實參進行封裝
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
}
fn(1,2,4,8);
3、返回值
(1)在定義函式的時候不必表明是否具有返回值
(2)返回值僅僅通過return關鍵字就可以了 return後的程式碼不執行
function fn(a,b){
return a+b;
//alert("xxxx");
}
alert(fn(2,3));
4、js的全域性函式
(1)編碼和解碼
encodeURI() decodeURI()
encodeURIComponet() decodeURIComponent()
escape() unescape()
三者區別：
進行編碼的符號範圍不同吧，實際開發中常使用第一種
(2)強制轉換
Number()
String()
Boolean()
(3)轉成數字
parseInt()
parseFloat()
(4)eval()方法
將字串當作指令碼進行解析執行
//var str = "var a=2;var b=3;alert(a+b)";
//eval(str);
function print(str){
eval(str);
}
print("自定義邏輯");
五、js的事件
事件
事件源
響應行為
1、js的常用事件
onclick:點選事件
onchange:域內容被改變的事件
需求：實現二級聯動
<select id="city">
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="sh">上海</option>
</select>
<select id="area">
<option>海淀</option>
<option>朝陽</option>
<option>東城</option>
</select>
<script type="text/javascript">
var select = document.getElementById("city");
select.onchange = function(){
var optionVal = select.value;
switch(optionVal){
case 'bj':
var area = document.getElementById("area");
area.innerHTML = "<option>海淀</option><option>朝陽</option><option>東城</option>";
break;
case 'tj':
var area = document.getElementById("area");
area.innerHTML = "<option>南開</option><option>西青</option><option>河西</option>";
break;
case 'sh':
var area = document.getElementById("area");
area.innerHTML = "<option>浦東</option><option>楊浦</option>";
break;
default:
alert("error");
}
};
</script>
onfoucus:獲得焦點的事件
onblur:失去焦點的事件
需求： 當輸入框獲得焦點的時候，提示輸入的內容格式
當輸入框失去焦點的時候，提示輸入有誤
<label for="txt">name</label>
<input id="txt" type="text" /><span id="action"></span>
<script type="text/javascript">
var txt = document.getElementById("txt");
txt.onfocus = function(){
//友好提示
var span = document.getElementById("action");
span.innerHTML = "使用者名稱格式最小8位";
span.style.color = "green";
};
txt.onblur = function(){
//錯誤提示
var span = document.getElementById("action");
span.innerHTML = "對不起 格式不正確";
span.style.color = "red";
};
</script>
onmouseover:滑鼠懸浮的事件
onmouseout:滑鼠離開的事件
需求：div元素 滑鼠移入變為綠色 移出恢復原色
#d1{background-color: red;width:200px;height: 200px;}
<div id="d1"></div>
<script type="text/javascript">
var div = document.getElementById("d1");
div.onmouseover = function(){
this.style.backgroundColor = "green";
};
div.onmouseout = function(){
this.style.backgroundColor = "red";
};
</script>
onload:載入完畢的事件
等到頁面載入完畢在執行onload事件所指向的函式
<span id="span"></span>
<script type="text/javascript">
window.onload = function(){
var span = document.getElementById("span");
alert(span);
span.innerHTML = "hello js";
};
</script>
2、事件的繫結方式
(1)將事件和響應行為都內嵌到html標籤中
<input type="button" value="button" onclick="alert('xxx')"/>
(2)將事件內嵌到html中而響應行為用函式進行封裝
<input type="button" value="button" onclick="fn()" />
<script type="text/javascript">
function fn(){
alert("yyy");
}
</script>
(3)將事件和響應行為 與html標籤完全分離
<input id="btn" type="button" value="button"/>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("zzz");
};
</script>
****this關鍵字
this經過事件的函式進行傳遞的是html標籤物件
<input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
<script type="text/javascript">
function fn(obj){
alert(obj.name);
}
</script>
3、阻止事件的預設行為
IE：window.event.returnValue = false;
W3c: 傳遞過來的事件物件.preventDefault();
//ie：window.event.returnValue = false;
//W3c：傳遞過來的事件物件.preventDefault();
//W3c標準
if(e&&e.preventDefault){
alert("w3c");
e.preventDefault();
//IE標籤
}else{
alert("ie");
window.event.returnValue = false;
}
//通過事件返回false也可以阻止事件的預設行為
<a href="demo11.html" onclick="return false">點選我吧</a>
4、阻止事件的傳播
IE：window.event.cancelBubble = true;
W3c: 傳遞過來的事件物件.stopPropagation();
if(e&&e.stopPropagation){
alert("w3c");
e.stopPropagation();
//IE標籤
}else{
alert("ie");
window.event.cancelBubble = true;
}
六、js的bom
(1)window物件
彈框的方法：
提示框：alert("提示資訊");
確認框：confirm("確認資訊");
有返回值：如果點選確認返回true 如果點選取消 返回false
var res = confirm("您確認要刪除嗎？");
alert(res);
輸入框：prompt("提示資訊");
有返回值：如果點選確認返回輸入框的文字 點選取消返回null
var res = prompt("請輸入密碼？");
alert(res);
open方法：
window.open("url地址");
open("../jsCore/demo10.html");
定時器：
setTimeout(函式,毫秒值);
setTimeout(
function(){
alert("xx");
},
3000
);
clearTimeout(定時器的名稱);
var timer;
var fn = function(){
alert("x");
timer = setTimeout(fn,2000);
};
var closer = function(){
clearTimeout(timer);
};
fn();
setInterval(函式,毫秒值);
clearInterval(定時器的名稱)
var timer = setInterval(
function(){
alert("nihao");
},
2000
);
var closer = function(){
clearInterval(timer);
};
需求：註冊後5秒鐘跳轉首頁
恭喜您註冊成功，<span id="second" style="color: red;">5</span>秒後跳轉到首頁，如果不跳轉請<a href="../jsCore/demo10.html">點選這裡</a>
<script type="text/javascript">
var time = 5;
var timer;
timer = setInterval(
function(){
var second = document.getElementById("second");
if(time>=1){
second.innerHTML = time;
time--;
}else{
clearInterval(timer);
location.href="../jsCore/demo10.html";
}
},
1000
);
</script>
(2)location
location.href="url地址";
(3)history
back();
forward();
go();
<a href="demo7.html">後一頁</a>
<input type="button" value="上一頁" onclick="history.back()">
<input type="button" value="下一頁" onclick="history.forward()">
<input type="button" value="上一頁" onclick="history.go(-1)">
<input type="button" value="下一頁" onclick="history.go(1)">
七、js的dom
1、理解一下文件物件模型
html檔案載入到記憶體之後會形成一顆dom樹，根據這些節點物件可以進行指令碼程式碼的動態修改
在dom樹當中 一切皆為節點物件
2、dom方法和屬性
筆記見程式碼