鋒利的 jQuery (第二版) 認識 jQuery

時間  2019-12-10
標籤 鋒利 jquery 第二 認識 欄目 JQuery 简体版
原文   原文鏈接

第1章 認識 jQuery

1.2 jQuery 簡介

1.2.1 jQuery 團隊

如今的 jQuery 團隊主要包括 核心庫、UI、插件 和 jQuery Mobile 等開發人員以及推廣和網站設計、維護人員。css

1.2.2 jQuery 優點

1) 輕量級。 壓縮後的 jQuery 大小在 30KB 左右。
2) 強大的選擇器。jQuery 支持 CSS 1 --> CSS 3 幾乎全部的選擇器， 以及jQuery 獨有的選擇器。引入插件可支持 XPath 選擇器。
3) 出色的 DOM 封裝。
4) 可靠的事件處理機制。jQuery 在 預留退路、按部就班 以及 非入侵式 編程方面作的不錯。
5) 完善的 Ajax。
6) 不污染頂級變量。 jQuery 只創建一個名爲 jQuery 的對象，其全部的函數方法都在這個對象之下。其別名 $ 能夠隨時交出控制權，不會污染其餘對象。
7) 出色的瀏覽器兼容性。
8) 鏈式操做方式。 對發生在同一個 jQuery 對象的一組動做， 能夠直接連寫無需重複獲取對象。
9) 隱式迭代。 jQuery 的方法被設計成自動操做對象集合而不是單獨的對象。
10) 行爲層與結構層分離。 能夠用 jQuery 選擇器選中元素並直接給該元素添加事件。
11) 豐富的插件支持。
12) 完善的文檔。
13) 開源。 任何人能夠自由使用並提出修改意見。html

1.3 jQuery 代碼的編寫

1.3.1 jQuery 庫對比

表 1-1前端

           名稱           大小                                                          說明
jquery.js 約229KB 完整無壓縮版本，主要用於測試、學習和開發
jquery.min.js 約30KB 通過工具或服務器開啓 Gzip 壓縮 主要應用於產品和項目

1.3.2 jQuery 代碼

在 jQuery 庫中, $ 是jQuery 的簡寫形式，如 $("#foo") 等價於 jQuery("#foo")
表 1-2 window.onload 與 $(document).ready() 對比python

                       window.onload                                   $(document).ready()
執行時機 必須等待網頁中全部的內容加載完畢後（包括圖片）才能執行 網頁中全部的 DOM 結構繪製完畢後就執行， 可能 DOM 元素關聯的東西並無加載完
編寫個數 不能同時編寫多個
如下代碼沒法正確執行:
window.onload = function() {
alert("test1");
};
window.onload = function() {
alert("test2");
};
結果只輸出 「test2」		 能同時編寫多個
如下代碼正確執行:
$(document).ready(function() {
alert("Hello 1");
});
$(document).ready(function() {
alert("Hello 2");
});
結果兩次都輸出
簡化寫法 無 $(document).ready(function() {
//...
});
能夠簡寫成：
$(function() {
//...
});

1.3.3 jQuery 代碼風格

1. 鏈式操做風格
HTML 結構jquery

<!DOCTYPE html>
<html>

<head>
    <title>前端UI</title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery-1.8.3.js"></script>
</head>

<body>
    <div class="box">
        <ul class="menu">
            <li class="level1">
                <a class="base" href="#none">襯衫</a>
                <ul class="level2">
                    <li><a href="#none">短袖襯衫</a></li>
                    <li><a href="#none">長袖襯衫</a></li>
                    <li><a href="#none">短袖T恤</a></li>
                    <li><a href="#none">長袖T恤</a></li>
                </ul>
            </li>
            <li class="level1">
                <a class="base" href="#none">衛衣</a>
                <ul class="level2">
                    <li><a href="#none">開襟衛衣</a></li>
                    <li><a href="#none">套頭衛衣</a></li>
                    <li><a href="#none">運動衛衣</a></li>
                    <li><a href="#none">童裝衛衣</a></li>
                </ul>
            </li>
            <li class="level1">
                <a class="base" href="#none">褲子</a>
                <ul class="level2">
                    <li><a href="#none">短褲</a></li>
                    <li><a href="#none">休閒褲</a></li>
                    <li><a href="#none">牛仔褲</a></li>
                    <li><a href="#none">免燙卡其褲</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script>
$(function() {
    $(".level1 > a").click(function() {
        $(this).addClass("current")
            .next().show()
            .parent().siblings().children("a").removeClass("current")
            .next().hide();
    });
});
</script>

</html>

CSS 樣式編程

ul {
    padding: 0;
}

ul >li {
    list-style-type: none;
}

a {
    text-decoration-line: none;
    text-align: center;
    display: block;
    height: 25px;
    width: 90px;
    color: black;
}

a:active {
    color: #5F9EA0;
}

.box {
    margin: 0 auto;
}

.menu {
    height: 183px;
    width: 92px;
    margin: 0 auto;
}

.base {
    border: 1px solid #272822;
    background-color: #F6F6F6;
}

.level2 {
    display: none;
    border: 1px solid #272822;
}

.level2 li {
    background-color: #fff;
}

.current {
    background-color: #005F3C;
    color: #D2691E;
}

代碼規範：

(1) 對於同一個對象不超過3個操做的，能夠直接寫成一行。如：數組

$("li").show().unbind("click");

(2) 對一個對象的較多操做，每行寫一個操做。如：瀏覽器

$(this).removeClass("mouseout")
.addClass("mouseover")
.stop()
.fadeTo("fast", 0.6)
.fadeTo("fast", 1)
.unbind("click")
.click(function(){
// do something
});

(3) 對於多個對象的少許操做，每一個對象寫一行，若涉及子元素，能夠考慮適當地使用縮進。如：服務器

$(this).removeClass("hightlight")
     .children("li").show().end()
.siblings().removeClass("highlight")
     .children("li").hide();

2. 爲代碼添加註釋
編寫優秀選擇器的時候，不要忘記給這段代碼加上註釋， 這對於本身往後閱讀和與他人分享、合做時都能起到良好效果。dom

// 在一個 id 爲table 的 tbody 中，對於每一行的一列中的 checkbox 若是沒被禁用，將這一行的背景置爲紅色。
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red")

1.4 jQuery 對象和 DOM 對象

1.4.1 DOM 對象和 jQuery 對象簡介

1. DOM 對象
DOM（Document Object Model），每一份 DOM 均可以表示成一棵樹。
經過 JavaScript 中的 getElementsByTagName或 getElementById 獲取元素節點。 像這樣獲得的 DOM 元素就是 DOM 對象。DOM 對象可使用 JavaScript 中的方法。

var domObj = document.getElementById("id");
var ObjHTML = domObj.innerHTML; // 使用 JavaScript 中的屬性----innerHTML

1. jQuery 對象
jQuery 對象經過 jQuery 包裝 DOM 對象後產生的對象。jQuery 可使用 jQuery 裏的方法。如：

$("foo").html()

等價於

document.getElementById("foo"),innerHTML;

jQuery 對象沒法使用 DOM對象的任何方法。

1.4.2 jQuery 對象和 DOM 對象的相互轉換

約定變量定義風格， 若是獲取的是 jQuery 對象， 則在變量前加一個 $ 符號。如：

var $variable = jQuery 對象；

若是是 DOM 對象

var variable = DOM 對象；

1. jQuery 對象轉 DOM 對象
[index] 和 get(index)方法
(1) jQuery 對象是一個相似數組的對象，可經過 [index] 方法獲得 DOM 對象。

var $cr = $("#cr"); // jQuery 對象
var cr = $cr[0]; // DOM 對象

(2) 另外一種方法爲 jQuery 自己提供，經過 get(index) 方法獲得 DOM 對象。

var $cr = $("#cr"); // jQuery 對象
var cr = $cr.get(0); // DOM 對象

2. DOM　對象轉 jQuery 對象
對於一個 DOM 對象， 只要用 $() 將 DOM 對象包起來， 就獲得一個 jQuery 對象。

var cr = document.getElementById("cr"); // DOM 對象
var $cr = $(cr); // jQuery 對象

1.5 解決 jQuery 和 其餘庫的衝突

在 jQuery 中， 幾乎全部的插件都被限制在它的命名空間裏。 jQuery 用 $ 做爲自身快捷方式。
1. jQuery 庫在其餘庫以後導入
在其餘庫和 jQuery 庫都被加載完畢後， 能夠在任什麼時候候調用 jQuery.noConflict() 函數來將變量 $ 的控制權移交給其餘的 JavaScript 庫。如：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="prototype.js"></script>
    <script src="../jquery-1.8.3.js"></script>
</head>
<body>
    <div id="id">
        I am a cool gay!(It will be hided!)
    </div>
    <button> Do you agree?(It will be clicked!)</button>
</body>
<script>
    jQuery.noConflict();// 將變量$的控制權移交給prototype.js
    jQuery(function(){// 使用 jQuery
        jQuery("button").click(function(){
            alert(jQuery(this).text())
        });
    });
    $("id").style.display = 'none';// 使用 prototype.js隱藏元素
</script>
</html>

也能夠自定義快捷方式

var $j = jQuery.noConflict();// 將變量$的控制權移交給prototype.js
    $j(function(){// 使用 jQuery，利用自定義快捷方式---$j
        $j("button").click(function(){
            alert($j(this).text())
        });
    });
    $("id").style.display = 'none';// 使用 prototype.js隱藏元素

其餘方法一:

jQuery.noConflict();// 將變量$的控制權移交給prototype.js
    jQuery(function($){// 使用 jQuery 設定頁面加載時執行的函數
        $("button").click(function(){// 在函數內部繼續使用$()方法
            alert($(this).text())
        });
    });
    $("id").style.display = 'none';// 使用 prototype.js隱藏元素

其餘方法二:

jQuery.noConflict();// 將變量$的控制權移交給prototype.js
    (function($){       // 定義匿名函數並設置形參爲 $
        $(function(){   // 匿名函數的$均爲 jQuery
            $("button").click(function(){// 繼續使用$()方法
               alert($(this).text())
            });
        });
    })(jQuery);  // 執行匿名函數並傳遞實參 jQuery
    $("id").style.display = 'none';// 使用 prototype.js隱藏元素

2. jQuery 庫在其餘庫以前導入
若 jQuery 庫在其餘庫以前導入， 可直接使用 jQuery 作 jQuery 的工做。
同時可以使用 $() 方法做爲其餘庫的快捷方式。無需使用 jQuery.noConflict()函數。如：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="../jquery-1.8.3.js"></script>
    <script src="prototype.js"></script>

</head>
<body>
    <div id="id">
        I am a cool gay!(It will be hided!)
    </div>
    <button> Do you agree?(It will be clicked!)</button>
</body>
<script>
    jQuery(function(){// 使用 jQuery, 無需調用 jQuery.noConflict()函數
        jQuery("button").click(function(){
            alert(jQuery(this).text())
        });
    });
    $("id").style.display = 'none';// 使用 prototype.js隱藏元素
</script>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程