jQuery之概念以及基本使用

1. jQuery的概述

1.1 jQuery的概念

jQuery是一個快速、簡潔的JavaScript庫，其設計的宗旨是「Write Less，Do More」

jQuery主要是封裝了JavaScript經常使用的功能代碼，優化了DOM操做、時間處理、動畫設計和Ajax交互。

學習jQuery的本質就是：學習調用這些函數（方法）

jQuery出現的目的就是加快前端人員的開發速度，咱們能夠灰常方便地調用以及使用它，從而提升開發效率

jQuery與原生js形象比喻

 

1.2 jQuery的優勢

• 輕量級，核心文件才幾十kb，不會影響頁面加載速度
• 跨瀏覽器兼容，基本兼容瞭如今的主流瀏覽器
• 鏈式編程，隱式迭代
• 對事件、樣式、動畫支持，大大優化了DOM操做
• 支持插件擴展開發，有着豐富的第三方的插件，例如：樹形菜單、日期控件、輪播圖等
• 免費、開源

2. jQuery的基本使用

2.1 jQuery的下載

官網網址：https://jquery.com/

 

 

 

版本信息：

1x：兼容IE678等低版本的瀏覽器，官網再也不維護更新

2x：不兼容IE678等低版本的瀏覽器，官網再也不維護更新

3x：不兼容IE678等低版本的瀏覽器，官網主要維護更新的版本

 

全部版本的下載網址：https://code.jquery.com/

2.2 jQuery的使用步驟

1.引入jQuery文件

<script type=」text/javascript」 href=」jquery.min.js」></script>

       其中jquery.min.js是你所下載下來的jQuery文件

2.使用便可

2.3 jQuery的入口函數

$(function(){

       … //此處是頁面DOM加載完成的入口

         //等着頁面DOM加載完畢再去執行js代碼

});

$(document).ready(function(){

       … //此處是頁面DOM加載完成的入口

//等着頁面DOM加載完畢再去執行js代碼

});

1. 等着DOM結構渲染完畢便可執行內部代碼，沒必要等到全部外部資源加載完成，jQuery幫我完成了封裝。
2. 至關於原生js中的DOMContentLoaded
3. 不一樣於原生js的load事件是等頁面文檔、外部的js文件、css文件、圖片加載完畢才執行內部代碼
4. 推薦使用第一種

 

 

2.4 jQuery的頂級對象 $

1. $是jQuery的別稱，在代碼中可使用jQuery代替$，但通常爲了方便，一般直接使用$

       $(function(){

              alert(11);

});

jQuery(function(){

              alert(11);

});

       以上代碼的結果是同樣的

2. $是jQuery的頂級對象，至關於原生js中的window對象。把元素利用$包裝成jQuery對象就能夠調用jQuery的方法

2.5 jQuery對象和DOM對象

1. 利用原生js來獲取的對象就是DOM對象

       var myDiv = document.querySelector(‘div’); //myDiv 是DOM對象

2. 用jQuery方式獲取的對象就是jQuery對象。

       $(‘div’); // $(‘div’)是jQuery對象

3. jQuery對象的本質：利用$把DOM對象包裝後產生的對象（僞數組形式存儲）

4. jQuery對象只能使用jQuery方法，DOM對象則使用原生js的屬性以及方法

       myDiv.style.display=’none’;//正常執行

       $(‘div’).style.display=’none’;//執行時會報錯

       $(‘div’).hide();//正常執行

       myDiv.hide();//執行時會報錯

1. DOM對象與jQuery對象之間是能夠相互轉換的

（1）      由於原生js比jQuery更大，原生的一些屬性和方法jQuery沒有給我封裝，要想使用這些屬性和方法則須要把jQuery對象轉換爲DOM對象才能使用。

l  DOM對象轉換爲jQuery對象 $(DOM對象)

$(‘div’);

l  jQuery對象轉換爲DOM對象（兩種方式）

$(‘div’)[index] index是索引號

$(‘div’).get(index) index是索引號