jQuery學習之開篇

時間 2019-11-13

標籤 jquery 學習開篇欄目 JQuery 简体版

原文原文鏈接

吐槽

近期比較煩,對於一個前端白癡來講,工做方向忽然轉向前端這塊着實讓人蛋疼無比。前段時間簡單的學習了下EasyUI,算是對其有一個簡單的認知了吧。EasyUI的研究過程當中發現,假設沒有掌握JS、JQuery想要進行興許的開發會很困難。得,又得學下JQuery,一種蛋蛋的憂傷。一直以爲前端的水很的深這段時間算是見識到了,哎,只是工做還的繼續,吐槽完了,卯足幹勁充電吧! javascript

前言

某前端白癡一個,會點html+css+js.JQuery的學習書籍看的是《瑞麗的JQuery》,先入門看了兩章,感受能看懂,還不錯。css

往後的學習也就打算採用該書了。固然參考網絡上的一些博客文章(獨立博客)也是十分必須的。 html

認識JQuery

JavaScript

認識JQuery以前,有必要了解下javascript。前端

一種腳本語言,使得網頁和用戶之間實現了一種實時的、動態的和交互的關係,網頁中包括了不少其它的交互性的元素。java

其強大之處不用我這菜鳥再作贅述。只是其自己存在的一些弊端也就形成了興許js庫的產生。基本的三大弊端: jquery

複雜的文檔對象模型(DOM)
不一致的瀏覽器實現
缺少便捷的開發、調試工具

基於javascript上述的缺點,爲了簡化js的開發一些javascript庫誕生了。css3

js庫封裝了很是多提早定義的對象和有用函數.能更加高速、便捷的創建頁面交互元素。ajax

這裏對於有哪些js庫就再也不多談了，重點了解下JQuery,這也是本身興許學習的重點。編程

JQuery

一個很優秀的javascript庫,對於js性能的理解也是十分的到位的。瀏覽器

現如今在javasript漸漸隱去時(表噴我),JQuery也愈加的受歡迎了。

JQuery憑藉簡潔的語法和跨平臺的兼容性,極大地簡化了js開發人員遍歷HTML文檔、操做DOM、處理事件、運行動畫和開發Ajax的操做。其獨特而又優雅的代碼風格改變了javascript開發人員設計思路和編敲代碼的方式。

JQuery的主旨就是"wirte less do more",寫更少的代碼，實現不少其它的功能。

無論你是網頁設計師、後臺開發人員、業餘愛好者仍是項目管理者,也不論是javascript剛開始學習的人仍是javascript高手,都有足夠的理由去學習JQuery。

JQuery的優點

jq強調的理念就是"wirte less,do more"。jq獨特的選擇器、鏈式的DOM操做、事件處理機制和封裝無缺的Ajax都是其它js庫所不能達到的。

歸納來講jq的優點大體分爲例如如下幾個方面:

(1) 輕量級

jquery是很輕巧的,採用Dean Edwards編寫的Packer(http://dean.edwards.name/packer/)壓縮後,大小不到30kb。假設使用Min版本號並且在server端啓用Gzip壓縮後,大小僅僅有18kb。

(2) 強大的選擇器

jqery贊成開發人員使用從css1到css3差點兒所有的選擇器,以及jquery首創的高級而且複雜的選擇器。

(3) 出色的DOM操做的封裝

jquery封裝了大量常用的DOM操做,使開發人員在編寫DOM操做相關程序時候能夠駕輕就熟。

jquery輕鬆的完畢各類本來很複雜的操做,使得js菜鳥也能寫出出色的程序。

(4) 可靠的事件處理機制

jquery的事件處理機制吸取了javascript專家Dean Edwards編寫的事件處理函數的精華,使得jquery在處理事件綁定的時候至關可靠。

在預留退路、按部就班以及非入侵編程思想方面,jquery也作的很不錯。

(5) 無缺的Ajax

jquery將所有的Ajax操做封裝到一個函數$.ajax()裏,使得開發人員處理ajax的時候能夠專心的處理業務邏輯而無需關心瀏覽器兼容性和XMLHttpRequest對象的建立和使用的問題。

(6) 不污染頂級變量

jquery僅僅是創建了一個名爲jquery的對象,器所有的函數都是在這個對象之下的。

其別名也可以隨時交出控制權,不會污染其它變量,這使得jquery可以與js和其它js庫共存,在項目中放心的引用而不需要考慮到後期可能的衝突。

(7) 出色的兼容性

做爲一個流行的js庫,jquery的瀏覽器兼容性也是十分良好的。

(8) 鏈式操做

對發生在同一個jq對象上的一組動做,可以直接連寫而無需反覆獲取對象。這樣的鏈式操做方式使得jq的代碼無比優雅。

而且無需反覆獲取對象使得性能獲得提高(選擇器獲取對象是比較消耗性能的)。

(9) 隱式迭代

當用jq找到帶有".class"類的全部元素,隱藏它們時,無需編寫循環遍歷每一個返回的元素。jq裏面的方法都是被設計成本身主動操做對象的集合,而不是單獨的對象,這使得大量的玄幻結構變得再也不必要,優化了代碼量。

(10) 行爲層與結構層的分離

開發者可以使用jqery選擇器獲得元素,而後直接給元素加入事件。這樣的將行爲層與結構層全然分離的思想,使得jquery開發者頁面開發者各司其職,避免了一些沒必要要的衝突,同一時候也便於後期的維護,不需要再html代碼中尋找某些寒素和反覆改動html代碼。

(11) 豐富的插件支持

jquery是easy擴展的,這使得基於jquery的開源插件愈來愈懂,也愈來愈好,藉助於一些開源的插件,能夠高速的構建交互性較強的應用。

(12) 開源。

jquery是一個開源的產品,不論什麼人都可以自由的使用並提出改進意見。開源使得一個產品更加具備活力,也會促進一個產品的不斷改進,同一時候一些新的靈感和idea也將促進產品的深化。

有理由相信開源的JQuery會愈來愈受歡迎。

JQuery牛刀小試

簡單的瞭解了下jquery接下來簡單的嘗試下jquery吧。

JQuery環境

一、獲取jquery

進入jquery官網: http://jquery.com/,下載最新的jquery庫。

二、jquery庫類型說明

在正式的編寫代碼以後,有必要了解下jquery庫的兩種類型:JQuery xxx.min.js(Minified and Gzipped) 和 JQuery xxx.js(Uncompressed)

前者是通過JSMin等工具進行壓縮後的版本號,大小爲54kb,假設server開啓Gzip壓縮以後,大小將進一步減少爲18kb。主要用戶產品和項目。

後者是完整無壓縮版本號,主要用戶測試、學習和開發。

三、JQuery環境配置

jquery無需安裝,僅僅需解壓到相關目錄中,開發的時候在html頁面中引入該.js文件就能夠。

JQuery入門

一個簡單的樣例:點擊某個div實現隱藏該div,和原生js進行比較,代碼例如如下:

<html>
<title>JQuery學習入門</title>
<script src="js/jquery-1.9.1.js"></script>
<head>
    <style>
        .div {
            background: #58c3d6;
            text-decoration-line: none;
            text-align: center;
            line-height: 60px;
            color: #ffffff;
            height: auto;
        }
    </style>
    <script>
        /**經過JQuery庫來實現隱藏DIV*/
        $(document).ready(function() {
            $("#div").click(function() {
                $(this).hide();
            });
        });

        /*經過原生js實現DIV的隱藏、顯示*/

        function toggle(targetId) {
            var target = document.getElementById(targetId);
            if (target.style.display == 'block') {
                target.style.display = "none";
            } else {
                target.style.display = "block";
            }
        }
    </script>
</head>

<body>

    <button onclick="toggle('div')">開關</button>
    <div class="div" id="div">點我隱藏</div>

</body>

</html>

實際的效果這不貼圖了,可以看出的是jq相比較js獲取元素的方式更爲的簡單快捷了,JQuery的後綴query原本就是查詢的意思,這也許就是jquery名字的由來呢。

簡單的瞭解了JQuery,也算對jquery有了一個認知吧,興許的就是一些知識點的積累了,OVER!