ocument 對(duì)象
每個(gè)載入瀏覽器的 HTML 文檔或元素都會(huì)成為 Document 對(duì)象。
Document 對(duì)象使我們可以從腳本中對(duì) HTML 頁(yè)面中的所有元素進(jìn)行訪問。
Javascript 訪問節(jié)點(diǎn)方法:
var oLi=document.getElementsByTagName("li");
var oLi=document.getElementById("myHeader");
var oLi=document.getElementsByName("myInput"); //通過(guò)name屬性訪問
我們經(jīng)常要檢測(cè)一個(gè)HTML中DOM對(duì)象是否為空(或是否存在)。
var $jObject=$('#btn');
alert($jObject );
我們會(huì)發(fā)現(xiàn), $jObject 永遠(yuǎn)不會(huì)為空。因?yàn)?$() 方法查找對(duì)象, 始終都會(huì)返回一個(gè)jQuery 對(duì)象的。
解決辦法:
首先我們就要把jQuery對(duì)象轉(zhuǎn)換成javaScritp對(duì)象。
var dom=$jObject[0]; alert(dom);
或者直接判斷jQuery對(duì)象的長(zhǎng)度為否為0
包:是指有權(quán)訪問另外一個(gè)函數(shù)作用域中的變量的函數(shù).JavaScript創(chuàng)建閉包的常見方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另外一個(gè)函數(shù).
JavaScript的閉包類似于Java類中使用get/set方法操作類的私有變量,JavaScript閉包是函數(shù)的嵌套,內(nèi)部的函數(shù)可以操作上一層的變量屬性,同時(shí)此函數(shù)可以被外部所調(diào)用.
在javascript中沒有塊級(jí)作用域,一般為了給某個(gè)函數(shù)申明一些只有該函數(shù)才能使用的局部變量時(shí),我們就會(huì)用到閉包,這樣我們可以很大程度上減少全局作用域中的變量,凈化全局作用域。閉包是一種設(shè)計(jì)原則,它通過(guò)分析上下文,來(lái)簡(jiǎn)化用戶的調(diào)用,讓用戶在不知曉的情況下,達(dá)到他的目的。使用閉包有好處,也有壞處,濫用閉包會(huì)造成內(nèi)存的大量消耗。
代碼示例
代碼1:
function foo(x) {
var tmp=3;
return function (y) {
alert(x + y + (++tmp));
}
}
var bar=foo(2); // bar 現(xiàn)在是一個(gè)閉包
bar(10);
代碼2:
var add=(function () {
var counter=0;
return function () {return counter +=1;}
})();
add();
add();
add();
// 計(jì)數(shù)器為 3
代碼3:
var App=function() {
var isRTL=false;
var isIE8=false;
var isIE9=false;
var isIE10=false;
return {
init: function() {},
initAjax: function() {}
}
}();
jQuery(document).ready(function() {
App.init(); // init
});
apply()方法和call()方法
每個(gè)函數(shù)都包含兩個(gè)非繼承而來(lái)的方法:apply()和call()。
它們的用途相同,都是在特定的作用域中調(diào)用函數(shù)。
接收參數(shù)方面不同,apply()接收兩個(gè)參數(shù),一個(gè)是函數(shù)運(yùn)行的作用域(this),另一個(gè)是參數(shù)數(shù)組。call()方法第一個(gè)參數(shù)與apply()方法相同,但傳遞給函數(shù)的參數(shù)必須列舉出來(lái)。
代碼示例
代碼1:
function sum(num1, num2) {
return num1 + num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30
代碼2:
window.firstName="diz";
window.lastName="song";
var myObject={ firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName.call(window); //或 .call(this);
HelloName.call(myObject);
運(yùn)行結(jié)果為:
Hello diz song glad to meet you!
Hello my Object glad to meet you!
從示例中可以看出apply()和call()能夠擴(kuò)充函數(shù)賴以運(yùn)行的作用域
方法的覆蓋和重寫
JavaScript中沒有方法的重載這種概念,只有覆蓋,不管方法的參數(shù)個(gè)數(shù)多少,同名的最后一個(gè)方法會(huì)將前面的方法覆蓋掉.
<script type="text/javascript">
function sayHello() {
console.log("Hello----1");
}
function sayHello() {
console.log("Hello----2");
}
function sayHello() {
console.log("Hello----3");
}
sayHello();
</script>
如果要實(shí)現(xiàn)重載,可采用此種方法
<script type="text/javascript">
function sayHi() {
if (arguments.length==1) {
console.log(arguments[0] + "sayHi---1");
} else if (arguments.length==2) {
console.log(arguments[0] + "," + arguments[1] + "sayHi---2");
} else if (arguments.length==3) {
console.log(arguments[0] + "," + arguments[1]+","+arguments[2] + "sayHi---3");
}
}
sayHi("Tom");
sayHi("Tom", "lucy");
sayHi("Tom","lucy","jame");
</script>
回調(diào)函數(shù)
回調(diào)函數(shù)示例
<script language="javascript" type="text/javascript">
// 2.傳入要回調(diào)的方法名
function main(callBack) {
console.log("I am main function");
console.log("Invoke callback function..");
// 3.參數(shù)名稱和此處的方法名稱對(duì)應(yīng)
callBack();
}
function b() {
console.log("function:b");
}
function c() {
console.log("function:c");
}
// 1.要回調(diào)的函數(shù)作為參數(shù)
main(b);
main(c);
</script>
protocol 屬性
定義和用法
protocol 屬性是一個(gè)可讀可寫的字符串,可設(shè)置或返回當(dāng)前 URL 的協(xié)議。
圖示
代碼示例
<script type="text/javascript">
document.write(location.protocol);
</script>
輸出:
http:
兩個(gè)等號(hào)和三個(gè)等號(hào)的區(qū)別
===規(guī)則:
如果類型不同,就[不相等]
如果兩個(gè)都是數(shù)值,并且是同一個(gè)值,那么[相等];(!例外)的是,如果其中至少一個(gè)是NaN,那么[不相等]。(判斷一個(gè)值是否是NaN,只能用isNaN()來(lái)判斷)
如果兩個(gè)都是字符串,每個(gè)位置的字符都一樣,那么[相等];否則[不相等]。
如果兩個(gè)值都是true,或者都是false,那么[相等]。
如果兩個(gè)值都引用同一個(gè)對(duì)象或函數(shù),那么[相等];否則[不相等]。
如果兩個(gè)值都是null,或者都是undefined,那么[相等]。
==規(guī)則:
如果兩個(gè)值類型相同,進(jìn)行===比較。
如果兩個(gè)值類型不同,他們可能相等。根據(jù)下面規(guī)則進(jìn)行類型轉(zhuǎn)換再比較:
a. 如果一個(gè)是null. 一個(gè)是undefined,那么[相等]。
b. 如果一個(gè)是字符串,一個(gè)是數(shù)值,把字符串轉(zhuǎn)換成數(shù)值再進(jìn)行比較。
c. 如果任一值是 true,把它轉(zhuǎn)換成 1 再比較;如果任一值是 false,把它轉(zhuǎn)換成 0 再比較。
d. 如果一個(gè)是對(duì)象,另一個(gè)是數(shù)值或字符串,把對(duì)象轉(zhuǎn)換成基礎(chǔ)類型的值再比較。對(duì)象轉(zhuǎn)換成基礎(chǔ)類型,利用它的toString或者valueOf方法。 js核心內(nèi)置類,會(huì)嘗試valueOf先于toString;例外的是Date,Date利用的是toString轉(zhuǎn)換。非js核心的對(duì)象,令說(shuō)(比較麻 煩,我也不大懂)
e. 任何其他組合,都[不相等]。
其他瑣碎
1. window.parent和window.opener
window.parent針對(duì)frame
window.opener針對(duì)的是打開子窗口的父窗口
可操作響應(yīng)頁(yè)面的屬性和調(diào)用相關(guān)方法
2. instanceof 運(yùn)算符
在 JavaScript 中,判斷一個(gè)變量的類型嘗嘗會(huì)用 typeof 運(yùn)算符,在使用 typeof 運(yùn)算符時(shí)采用引用類型存儲(chǔ)值會(huì)出現(xiàn)一個(gè)問題,無(wú)論引用的是什么類型的對(duì)象,它都返回 “object”。
判斷是否為數(shù)組
if(dataList instanceof Array){}console.log(Object instanceof Object);//true
console.log(Function instanceof Function);//true
console.log(Number instanceof Number);//false
console.log(String instanceof String);//false
console.log(Function instanceof Object);//true
console.log(Foo instanceof Function);//true
console.log(Foo instanceof Foo);//false
3. 判斷是否為空對(duì)象
function isEmptyObject(obj) { for (var key in obj) { return false; } return true;}
attr();本身是設(shè)置標(biāo)簽屬性用的,這里用來(lái)設(shè)置樣式和獲取樣式。
addClass();這個(gè)是追加樣式。
removeClass();這是移除樣式。
toggleClass();這是切換樣式,切換的意思很簡(jiǎn)單,有就刪除,沒有就追加。
hasClass();判斷樣式是否存在。
一、我們先做一個(gè)盒子,給它最基本的樣式,就是寬和高。
二、忘記了,還要鏈接jQuery庫(kù),我們就連官網(wǎng)的庫(kù)吧。
三、現(xiàn)在打開網(wǎng)頁(yè)什么都看不見,我們加個(gè)按鈕“添加紅色背景”,同時(shí)也添加一個(gè)樣式addred。
四、現(xiàn)在可以添加按鈕的點(diǎn)擊事件了,點(diǎn)擊事件先留個(gè)空,一步一步來(lái)。
五、接下來(lái)可以在事件里面放操作了,這里就給box追加樣式addred。
六、后面就不啰嗦了,一口氣直接再添加三個(gè)按鈕,三個(gè)空的點(diǎn)擊事件。
七、先試著去掉背景。
八、忘記了,還要添加一個(gè)邊框樣式togborder。
九、toggleClass()它是有則刪,無(wú)則加,所以稱為切換。
十、hasClass()是判斷樣式是否存在,這里我們用alert消息框輸出結(jié)果。
十一、忘記一個(gè)方法了,那就是attr(),再加一個(gè)按鈕,再加一個(gè)點(diǎn)擊事件。
本文來(lái)源于,落筆承冰原創(chuàng),下面是源碼。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。