Jquery(一) 初識Jquery，簡單使用Jquery。

時間 2019-11-20

標籤 jquery 簡單使用欄目 JQuery 简体版

原文原文鏈接

1、什麼是Jquery?javascript

　　　　　　其實超級簡單，不要把它想的太難了，Jquery就是一個js(javascript)類庫。css

　　　　　　　　1.一、什麼是js類庫？html

　　　　　　　　　　[JavaScript庫封裝了不少預約義的對象和實用函數，來幫助使用者創建有高難度交互客戶端頁面，而且兼容各大瀏覽器]，看到這句話應該就知道了，通俗點講，js類庫就是別人將一些功能寫好了封裝成了函數，而咱們直接拿過來調用便可，這就是js類庫。java

　　　　　　　　1.二、什麼是Jquery?jquery

　　　　　　　　　　Jquery是js類庫的一種，其優勢有不少，百度一下基本上就知道了，這裏將收集的一些大白話列舉出來，看看便可。　　web

　　　　　　　　　　一、開源免費，提供衆多插件數組

　　　　　　　　　　二、jQuery是繼prototype以後又一個優秀的Javascript庫。它是輕量級的js庫，它兼容CSS3，還兼容各類瀏覽器[來自百度百科]瀏覽器

　　　　　　　　　　三、它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件(aptana)可供選擇。jQuery可以使js代碼和html內容分離(說明文檔確實很全很詳細，下面就會帶着一塊兒讀文檔，進行操做。)dom

　　　　　　　　　　四、jQuery 口號：The Write Less, Do More ide

　　　　　　　　　　五、待本身去查詢和發現吧~

2、使用Jquery

　　　　　　知道了什麼是Jquery，那麼接下來就要知道如何使用它。

　　　　　　　　2.一、導入js庫

　　　　　　　　　　jQuery有不少版本，介紹一下各類版本的使用環境

　　　　　　　　　　jquery-1.8.3.js：全部的源碼，比較大。開發過程使用

　　　　　　　　　　jquery-1.8.3.min.js 壓縮的版本（不易於閱讀）生產環境使用(導入項目中可能會報錯，報錯的話先刪除，等在生產環境時在導入使用)

　　　　　　　　　　將要使用的jQuery版本的.js導入項目中，

<!--
        /jQuery_day01/js/jquery-1.8.3.js  相對路徑（相對web站點的根）
        ./        表示當前頁面所在目錄
        ../        表示當前頁面上一級目錄
        <script>導入js庫
            type 指定類型
            src js位置
        注意：若是使用src，標籤體中不能編寫內容
        注意：編寫js代碼時，有加載順序問題
            1.jquery類庫必須放在使用以前
            2.若是直接編寫js代碼，必須放在目標對象（html）的指以後
                注意：js庫的位置須要寫準確，不然沒法使用
-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

導入js庫

　　　　　　　　2.二、Jquery的對象的獲取

　　　　　　　　　　在導入了js庫以後，就能夠在頁面中使用js庫了，這裏也就是使用jQuery，獲取jQuery的兩種方式

<script type="text/javascript">
        //語法：  jQuery  或    $
                //#username：是獲取一個id=username的結點(元素) 等價於 //document.getElementById("username"); 區別在於前者屬於jQuery的方式獲取，或者屬//於使用原始dom的方式獲取
        // 方式1 jQuery， 
        //var $username = jQuery("#username");
        // 方式2 $  通常jQuery對象的變量名都會使用$開頭進行命名，一種習慣，不//實用也能夠
        var $username = $("#username");
        
        alert($username.val());
        
    </script>

獲取jQuery的兩種方式

獲取jQuery對象的兩種方法

　　　　　　　　2.三、dom和Jquery的轉換

　　　　　　　　　　jQuery對象能夠看做將dom對象(javascript的原始內容)進行的封裝，從而使用jQuery對象就只可以調用jQuery定義的函數(方法)或屬性了，而dom對象就只可以調用dom對象的屬性和函數，不能混淆調用。　　　　注意：必定要區別dom對象和jQuery對象的使用，不要混淆，使用jQuery的函數時，注意看返回值是dom對象仍是什麼，好比get(0)返回的就是dom對象，流個當心眼。

//1 得到dom對象 （javascript 原始內容）
        var username = document.getElementById("username");
        // * 打印value值，調用屬性
        //alert(username.value);
        
        //2 將dom對象，轉成jQuery對象
        // * 建議：jQuery變量名使用$開頭
        var $username = $(username);
        //alert($username.val());//調用方法來獲取屬性值
        
        //3 jQuery 對象 轉換 dom對象
        // 方式1：jQuery得到對象，內部是一個數組，若是隻有一個對象時，能夠經過下標0獲取
        var obj1 = $username[0];
        //alert(obj1.value);
        // 方式2：jQuery 提供函數 get 得到指定下標對象
        var obj2 = $username.get(0);
        alert(obj2.value);
        
        
        //注意：jQuery對象 只能使用 jQuery的函數或屬性
        //        dom對象 只能使用dom的函數和屬性
        //        彼此不能相互調用。例如： $username.value 錯誤的

dom和jQuery對象的轉換

　　　　　　　　2.四、查詢jQuery文檔來學習jQuery提供了哪些功能？

　　　　　　　　　　2.4.一、文檔解釋

　　　　　　　　　　　　　　咱們將學習該文檔中的全部功能，其實也就是大概過一遍，知道哪塊是什麼意思就行，具體的用法該文檔中都會有詳細的使用規則介紹，真的很是詳細。我會帶着你們看幾個，而後依次類推，便可。

　　　　　　　　　　2.4.二、選擇器　　　　

　　　　　　　　　　　　　　分爲九種，其基本功能就是爲了選取頁面html中的特定的元素。

　　　　　　　　　　　　　　 [基本選擇器、層級選擇器、基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾、表單過濾、表單對象屬性過濾]

　　　　　　　　　　　　　　 2.4.2.一、基本選擇器

　　　　　　　　　　　　　　　　　5種，超級簡單，咱們來對着文檔解析一個個看。

　　　　　　　　　　　　　　　　　#id：根據給定的ID匹配一個元素。若是選擇器中包含特殊字符，能夠用兩個斜槓轉義。參見示例。(詳細把。例子都有，因此說不懂，不會用，不要緊，查文檔)

　　　　　　　　　　　　　　　　　element:根據給定的元素名(標籤名)匹配全部元素　

　　　　　　　　　　　　　　　　　.class：經過class選擇，必須.開頭。 <div class="myClass"> 。例如：$(".myClass")；文檔圖略

　　　　　　　　　　　　　　　　　*，匹配全部元素

　　　　　　　　　　　　　　　　　s1,s2,s3...，將多個選擇器合併，多個之間使用逗號分隔。例如：$("#id,.myClass")；

　　　　　　　　　　　　　　2.4.2.二、層級選擇器

　　　　　　　　　　　　　　　　　就是在標籤和標籤之間中選取，好比選取父標籤下的特定的標籤。

　　　　　　　　　　　　　　　　　　A標籤 B標籤，表示A標籤中全部後代的B標籤（爺孫）
　　　　　　　　　　　　　　　　　　A標籤>B標籤，表示A標籤全部子標籤中的B標籤（父子）
　　　　　　　　　　　　　　　　　　A標籤+B標籤，表示A標籤的第一個兄弟標籤（兄弟）
　　　　　　　　　　　　　　　　　　A標籤~B標籤，表示A標籤以後的全部兄弟標籤（兄弟）

　　　　　　　　　　　　　　2.4.2.三、基本過濾

　　　　　　　　　　　　　　　　　　略，查看文檔就懂了

　　　　　　　　　　　　　　2.4.2.四、內容過濾

　　　　　　　　　　　　　　　　　　略，查看文檔就懂了　　

　　　　　　　　　　　　　　2.4.2.五、可見性過濾

　　　　　　　　　　　　　　　　　　略，查看文檔就懂了

　　　　　　　　　　　　　　2.4.2.六、屬性過濾

　　　　　　　　　　　　　　　　　　略，查看文檔就懂了

　　　　　　　　　　　　　　2.4.2.七、子元素過濾

　　　　　　　　　　　　　　　　　　略，查看文檔就懂了

　　　　　　　　　　　　　　2.4.2.八、表單過濾

　　　　　　　　　　　　　　　　　　略，查看文檔就懂了

　　　　　　　　　　　　　　2.4.2.九、表單對象屬性過濾

　　　　　　　　　　　　　　　　　　略，查看文檔就懂了

　　　　　　　　　　2.4.三、屬性

　　　　　　　　　　　　　　這個稍微解釋一下，上面選取到了某個特定的元素(標籤)或者幾個元素，

　　　　　　　　　　　　　　　　　　屬性的函數來對其內容進行查看或者修改，

　　　　　　　　　　　　　　　　　　css類的話，能夠修改(移除，添加)class樣式，toggleClass是經過判斷一個boolean值來取決使用什麼樣式。

　　　　　　　　　　　　　　　　　　HTML代碼/文本/值這個比較有意思

　　　　　　　　　　　　　　　　　　　　　　val:表示獲取屬性的值，好比獲取input標籤中的value值，val(xxx)有參數則給value屬性賦值爲xxx。

　　　　　　　　　　　　　　　　　　　　　　text:表示獲取某個標籤的文本內容，也就是<p>xxx</p>獲取xxx的內容，text(xxx)，給某個標籤的文本賦值。若是添加標籤，直接顯示　　

　　　　　　　　　　　　　　　　　　　　　　html:跟text功能差很少，可是可以設置css樣式，若是添加標籤，瀏覽器須要解析

　　　　　　　　　　　　　　　　　　　　　　具體查看文檔。

　　　　　　　　　　2.4.四、CSS

　　　　　　　　　　　　　查看文檔，位置和樣式的處理

　　　　　　　　　　2.4.四、文檔處理

　　　　　　　　　　　　　上面瞭解的，都是如何選取特定的元素，而後如何修改樣式或者內容。文檔處理作的就是增長刪除修改複製元素等等的操做，好比，在A標籤以後添加一個B標籤，相似這種，具體查看文檔。

　　　　　　　　　　2.4.五、篩選

　　　　　　　　　　　　　篩選跟選擇器中的過濾是差很少的，區別就在於，篩選提供函數，而過濾的不是。通常過濾都是從jQuery對象中有不少個元素(也就是數組中有多個元素)，須要從中獲取到咱們想要的jQuery對象，進一步過濾，可是不能使用get()或者array[0]，由於此種方式獲取到的是dom對象，而不是jQuery對象，因此須要使用篩選或者選擇器中的過濾，來達到目的。具體查看文檔把。

　　　　　　　　　　2.4.六、事件　　

　　　　　　　　　　　　　事件，講解幾個經常使用和重要的，其餘看文檔。

　　　　　　　　　　　　　這個應該比較有意思。也比較重要。

　　　　　　　　　　　　　　　一、頁面載入：ready(fn)：這個就是講javascript代碼寫在頁面最上面所須要用的函數，做用就是等頁面所有加載完，而後在來加載js代碼。有兩種方式，代碼以下

//方式1
$(document).ready(function(){         // $ == jQuery
    ....
});
* 變種
jQuery(document).ready(function(){         // $ == jQuery
    ....
});

//方式2
$(function(){
   .....
});

View Code

　　　　　　　　　　　　　　　二、focus和focusin對比

　　　　　　　　　　　　　　　　　　focus：兩種用法，focus()：使對象得到焦點，focus(fn)：得到焦點觸發事件，子元素[不觸發]父元素事件[]　　　　　　

　　　　　　　　　　　　　　　　　　fosusin(fn):得到焦點觸發事件，子元素[觸發]父元素事件

//一、2都是對父元素進行焦點出發事件，因此就可以進行對比。
       <script type="text/javascript">
        $(document).ready(function(){
            //1 js focus 子元素[不觸發]父元素事件
            /*
            $("#outerDiv").focus(function(){
                alert("focus");
            });
            */
            //2 js focusin 子元素[觸發]父元素事件
            /*
            */
            $("#outerDiv").focusin(function(){
                alert("focusin");
            });
        });
        
        
    </script>    
//省略html的代碼。html的代碼展現圖就是上面的圖。