基礎核心

時間 2019-11-13

標籤基礎核心简体版

原文原文鏈接

代碼風格javascript

在jQuery程序中，不論是頁面元素的選擇、內置的功能函數，都是美圓符號「$」來起始的。而這個「$」就是jQuery當中最重要且獨有的對象：jQuery對象，因此咱們在頁面元素選擇或執行功能函數的時候能夠這麼寫：css

jQuery基礎核心.html：html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery基礎核心</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="yeDemo.js"></script>
</head>
<body>
    <div id="box">jQuery基礎核心</div>
</body>
</html>

yeDemo.js：java

$(function() {
    $("#box").css("color", "red");
});

因爲$自己就是jQuery對象的縮寫形式，那麼也就是說上面的代碼也能夠寫成以下形式：jquery

jQuery(function() {
    jQuery("#box").css("color", "red");
});

怎麼證實$自己就是jQuery對象呢?以下：函數

alert($ === jQuery);//相等，恆等

第一次看見===符號，應該是恆等的意思。字體

看看下面代碼分別返回什麼?spa

alert($);

alert($)：返回的是jQuery對象的內部函數。prototype

alert($());

alert($())：返回jQuery對象。code

alert($("#box"));

alert($("#box"))：返回的也是jQuery對象。

alert($("#box").css("color", "red"));

alert($("#box").css("color", "red"))：返回的仍是jQuery對象。

在執行功能函數的時候，咱們發現.css()這個功能函數並非直接被「$」或jQuery對象調用執行的，而是先獲取元素後，返回某個對象再調用.css()這個功能函數。那麼也就是說，這個返回的對象其實也就是jQuery對象。

$().css("color", "red")：理論上是合法的，但實際上缺乏元素，但沒有報錯喲！

值得一提的是，執行了.css()這個功能函數後，最終返回的仍是jQuery對象，那麼也就是說，jQuery的代碼模式是採用的連綴方式，能夠不停的連續調用功能函數。即：

alert($("#box").css("color", "red").css("font-size", "200px").css("font-weight", "bold"));//連綴

返回的依然是jQuery對象。

jQuery中代碼註釋和JavaScript是保持一致的，有兩種最經常使用的註釋：單行使用「//...」，多行使用「/* ... */」。

加載模式

咱們在以前的代碼一直在使用$(function() {});這段代碼進行首尾包裹，那麼爲何必需要包裹這段代碼呢？緣由是咱們jQuery庫文件是在body元素以前加載的，咱們必須等待全部的DOM元素加載後，延遲支持DOM操做，不然就沒法獲取到。

在延遲等待加載，JavaScript提供了一個事件爲onload，方法以下：

window.onload = function() {...}

例，

window.onload = function() {
    $("#box").css("color", "red");
}

而jQuery語法爲：

$(document).ready(function() {...});

例，

$(document).ready(function() {
    $("#box").css("color", "pink");
});

onload與ready的區別

	window.onload	$(document).ready()
執行時機	必須等待網頁所有加載完畢(包括圖片等)，而後再執行包裹代碼	只須要等待網頁中的DOM結構加載完畢，就能執行包裹的代碼
執行次數	只能執行一次，若是執行第二次，那麼第一次的執行會被覆蓋	能夠執行屢次，第N次都不會被上一次覆蓋
簡寫方案	無	$(function() { });

咱們來看看第二點(即執行次數)：

window.onload：

window.onload = function() {
    alert(1);
}
window.onload = function() {
    alert(2);
}

只會彈出2，即只能執行一次，若是執行第二次，那麼第一次的執行會被覆蓋。

$(document).ready()：

$(document).ready(function() {
    alert(1);
});
$(document).ready(function() {
    alert(2);
});

可簡寫成：

$(function() {
    alert(1);
});
$(function() {
    alert(2);
});

會一次彈出一、2。便可以執行屢次，第N次都不會被上一次覆蓋。

在實際應用中，咱們都不多直接去使用window.onload，由於他須要等待圖片之類的大型元素加載完畢後才能執行JS代碼。因此，最頭疼的就是網速較慢的狀況下，頁面已經全面展開，圖片還在緩慢加載，這時頁面上任何的JS交互功能所有處在假死狀態，而且只能執行單次在屢次開發和團隊開發中會帶來困難。

對象互換

jQuery對象雖然是jQuery庫獨有的對象，但它也是經過JavaScript進行封裝而來的。咱們能夠直接輸出來獲得它的信息。正如前面所得：

alert($);              //jQuery對象方法內部
alert($());            //jQuery對象返回的對象，仍是 jQuery
alert($('#box'));      //包裹ID元素返回對象，仍是 jQuery

從上面三組代碼咱們發現：只要使用了包裹後，最終返回的都是jQuery對象。這樣的好處顯而易見，就是能夠連綴處理。但有時，咱們也須要返回原生的DOM對象，好比：

alert(document.getElementById("box"));//返回原生DOM對象  [object HTMLDivElement]

jQuery想要達到獲取原生的DOM對象，能夠這麼處理：

alert($("#box").get(0));//ID元素的第一個原生DOM [object HTMLDivElement]

從上面get(0)，這裏的索引看出，jQuery是能夠進行批量處理DOM的，這樣能夠在不少須要循環遍歷的處理上更加駕輕就熟。

jQuery對象和DOM對象之間的互換：

alert($(document.getElementById("box")).css("color", "red"));

多個庫之間的衝突

當一個項目中引入多個第三方庫的時候，因爲沒有命名空間的約束（命名空間就比如同一個目錄下的文件夾同樣，名字相同就會產生衝突），庫與庫之間發生衝突在所不免。

那麼，既然有衝突的問題，爲何要使用多個庫呢？緣由是jQuery只不過是以DOM操做爲主的庫，方便咱們平常Web開發。但有時，咱們的項目有更多特殊的功能須要引入其
他的庫，好比用戶界面UI方面的庫，遊戲引擎方面的庫等等一系列。

而不少庫，好比prototype、還有咱們JavaScript課程開發的Base庫，都使用「$」做爲基準起始符，若是想和jQuery共容有兩種方法：

一、將jQuery庫在Base庫以前引入，那麼「$」的全部權就歸Base庫，而jQuery能夠直接用jQuery對象調用，或者建立一個「$$」符號給jQuery使用。(馬丹，這是一個什麼樣的字體，艹，不弄了)

var $$ = jQuery; //建立一個$$的jQuery對象
$(function() { //這是Base的$
    //alert($("#box").get(0)); //jQuery庫在base庫以前引用，那麼$全部權就是base庫的
    alert($("#box").ge(0)); //這是Base的$
    alert($$("#box").get(0)); //這是jQuery的$$
});

二、若是將jQuery庫在Base庫以後引入，那麼「$」的全部權就歸jQuery庫全部，而Base庫將會衝突而失去做用。這裏，jQuery提供了一個方法：

jQuery.noConflict(); //自行了斷，把本身的$全部權剔除
var $$ = jQuery;
$(function() {
    //jQuery庫在base庫以後引用，那麼$全部權就是jQuery庫的
    alert($("#box").ge(0));
    alert($$("#box").get(0));
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。