jQuery 如何判斷Dom對(duì)象是否存在

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

// 計(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ì)將前面的方法覆蓋掉.

function sayHello() {

console.log("Hello----1");

}

function sayHello() {

console.log("Hello----2");

}

function sayHello() {

console.log("Hello----3");

}

sayHello();

</script>

如果要實(shí)現(xiàn)重載,可采用此種方法

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ù)示例

// 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é)議。

圖示

代碼示例

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

看下面的動(dòng)圖，了解一下本例最后實(shí)現(xiàn)的效果。

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)擊事件。