1.jQuery介紹

1.1JS類庫 JavaScript 庫封裝了很多預定義的物件和實用函式。能幫助使用者建立有高難度互動客戶端頁面, 並且相容各大瀏覽器。

1.2當前流行的 JavaScript 庫有：

• jQuery ，最流行
• EXT_JS，2.0開始收費
• Dojo ，很多js單獨檔案，優化：打包。（常見：開發小圖示，一張圖片）
• Prototype，對js擴充套件，框架開發。
• YUI(Yahoo! User Interface) ，taobao之前使用。
• Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。基於jQuery 一個UI工具

1.3jQuery介紹

• JQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫 ，它相容CSS3，還相容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將不再支援IE6/7/8瀏覽器。jQuery使使用者能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，並且方便地為網站提供AJAX互動。jQuery還有一個比較大的優勢是，它的文件說明很全，而且各種應用也說得很詳細，同時還有許多成熟的外掛可供選擇。jQuery能夠使使用者的html頁面保持程式碼和html內容分離，也就是說，不用再在html裡面插入一堆js來呼叫命令了，只需要定義id即可。
• 輕量級：依賴程式少，佔用的資源的少
• 特點：js程式碼和html程式碼分離
• jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。
• 由美國人John Resig在2006年1月釋出
• jQuery是免費、開源的
• jQuery分類： WEB版本：我們主要學習研究 UI版本：集成了UI元件 mobile版本：針對移動端開發 qunit版本：用於js測試的

1.4版本介紹

1.5優點

• 核心理念是write less,do more(寫得更少,做得更多)
• 輕量級：原始碼1.11.js大小是286kb，壓縮班1.11.min.js大小是94.1k。如果使用GZIP壓縮更小。
• 相容各種瀏覽器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
• jQuery的語法設計可以使開發者更加便捷
• 例如操作文件物件、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能
• jQuery能夠使使用者的html頁面保持程式碼和html內容分離
• 不用再在html裡面插入一堆js來呼叫命令了，只需要定義id即可
• jQuery提供API讓開發者編寫外掛，有許多成熟的外掛可供選擇

• 文件說明很全

  2.基本語法

2.1jQuery語法

    <script type="text/javascript">
        //js 執行時，有載入順序

        /* jQuery獲得資料
         * * 語法：$("選擇器")   == jQuery("選擇器")
         * 
         */

        var username = $("#username");
        // * val()函式 用於獲得 value屬性的值
        alert(username.val());

    </script>

2.2jQuery物件和dom物件轉換

<script type="text/javascript">
        //1 使用javascript獲得value值
        var username = document.getElementById("username");
        //alert(username.value);

        //2 將 dom物件 轉換 jQuery物件
        // * 語法：$(dom物件)
        // * 建議：jQuery物件變數名，建議為$開頭
        var $username = $(username);
//      alert($username.val());

        //3 將 jQuery物件 轉換 dom物件
        //3.1 jQuery物件內部使用【陣列】存放所有的資料，可以陣列的下標獲取（索引）
        var username2 = $username[0];
        alert(username2.value);
        //3.2 jQuery提供函式 get() 轉換成dom物件
        var username3 = $username.get(0);
        alert(username3.value);
    </script>

3.選擇器

3.1基本【掌握】 #id ， id選擇器，<xxx id=""> 通過id值獲得元素 element，標籤選擇器，<xxx> 通過標籤名獲得元素 .class ，類選擇器，<xxx class=""> 通過class值獲得元素。注意：使用點開頭 s1,s2,… 多選擇器，將多個選擇器的結果新增一個數組中。 * 所有

3.2層級 A B ，獲得A元素內部所有的B後代元素。（爺孫） A > B ，獲得A元素內部所有的B子元素。（父子） A + B ，獲得A元素後面的第一個兄弟B。（兄弟） A ~ B ，獲得A元素後面的所有的兄弟B。（兄弟）

3.3基本過濾

過濾選擇器格式 “：關鍵字” :first , 第一個 :last ,最後一個 :eq(index) ，獲得指定索引 :gt(index) 大於 :lt(index) 小於 :even 偶數，從 0 開始計數。例如：查詢表格的1、3、5…行（即索引值0、2、4…） :odd 奇數 :not(selector) 去除所有與給定選擇器匹配的元素 :header 獲得所有標題元素。例如：<h1>...<h6> :animated 獲得所有動畫 :focus 獲得焦點

3.4內容過濾 :empty 當前元素是否為空（是否有標籤體–子元素、文字） :has(…) 當前元素，是否含有指定的子元素 :parent 當前元素是否是父元素 :contains( text ) 標籤體是否含有指定的文字

3.5可見性過濾[掌握] :hidden 隱藏。特指 <xxx style="display:none;"> ，獲得 <input type="hidden"> :visible 可見（預設）

3.6屬性【掌握】 [屬性名] 獲得指定的屬性名的元素 [屬性名=值] 獲得屬性名 等於 指定值的 的元素【1】 [屬性名!=值] 獲得屬性名 不等於 指定值的 的元素 [as1][as2][as3]…. 複合選擇器，多個條件同時成立。類似 where …and…and【2】 [屬性名^=值] 獲得以屬性值 開頭 的元素 [屬性名$=值] 獲得以屬性值 結尾 的元素 [屬性名*=值] 獲得 含有屬性值 的元素

3.7子元素過濾

:nth-child(index) ，獲得第幾個孩子，從1開始。 :first-child ， 獲得第一個孩子 :last-child ， 獲得最後孩子 :only-child ， 獲得獨生子

3.8表單過濾 :input 所有的表單元素。（<input> / <select> / <textarea> / <button>） :text 文字框<input type="text"> :password 密碼框<input type=" password "> :radio 單選<input type="radio"> :checkbox 複選框<input type="checkbox"> :submit 提交按鈕<input type="submit"> :image 圖片按鈕<input type="image" src=""> :reset 重置按鈕<input type="reset"> :file 檔案上傳<input type="file"> :hidden 隱藏域<input type="hidden"> ,還可以獲得<xxx style="display:none"> 其他值：<br> <option> ,存在瀏覽器相容問題 :button 所有普通按鈕。 <button > 或 <input type="button">

3.9表單物件屬性過濾【掌握】 :enabled 可用 :disabled 不可用。<xxx disabled="disabled"> 或<xxx disabled=""> 或 <xxx disabled> :checked 選中（單選框radio、複選框 checkbox） :selected 選擇（下拉列表 select option）