前端jQuery部分簡單整理

標籤：class   body   微軟   org   格式   代碼   log   取消   nbsp   

jQuery的介紹
為什麼要使用jQuery
    在用js寫代碼時，會遇到一些問題：
    window.onload 事件有事件覆蓋的問題，因此只能寫一個事件。
    代碼容錯性差。
    瀏覽器安全色性問題。
    書寫很繁瑣，代碼量多。
    代碼很亂，各個頁面到處都是。
    動畫效果很難實現。
jQuery的出現，可以解決以上問題。

什麼是 jQuery
jQuery 是 js 的一個庫，封裝了我們開發過程中常用的一些功能，方便我們調用，提高開發效率。
js庫是把我們常用的功能放到一個單獨的檔案中，我們用的時候，直接引用到頁面裡即可。

jQuery 的兩大特點
鏈式編程：比如.show()和.html()可以連寫成.show().html()。
隱式迭代：隱式 對應的是 顯式。隱式迭代的意思是：在方法的內部進行迴圈遍曆，而不用我們自己再進行迴圈，簡化我們的操作，方便我們調用。

使用 jQuery 的基本步驟
    （1）引包
    （2）入口函數
    （3）功能實現代碼（事件處理）

jQuery 的入口函數和 $ 符號
寫法一：
    //1.文檔載入完畢，圖片不載入的時候，就可以執行這個函數。
           $(document).ready(function () {
               alert(1);
           })
寫法二：
// 2.文檔載入完畢，圖片不載入的時候，就可以執行這個函數。
        $(function() {
            alert(1);
        });
寫法三：
        // 3.文檔載入完畢，圖片也載入完畢的時候，在執行這個函數。
        $(window).ready(function(){
            alert(1);
        })

jQuery入口函數與js入口函數的區別：
區別一：書寫個數不同：
    Js 的入口函數只能出現一次，出現多次會存在事件覆蓋的問題。
    jQuery 的入口函數，可以出現任意多次，並不存在事件覆蓋問題。
區別二：執行時機不同：
    Js的入口函數是在所有的檔案資源載入完成後，才執行。這些檔案資源套件括：頁面文檔、外部的js檔案、外部的css檔案、圖片等。
    jQuery的入口函數，是在文檔載入完成後，就執行。文檔載入完成指的是：DOM樹載入完成後，就可以操作DOM了，不用等到所有的外部資源都載入完成。
文檔載入的順序：從上往下，邊解析邊執行。

jQuery的$符號
jQuery 使用 $ 符號原因：書寫簡潔、相對於其他字元與眾不同、容易被記住。

js中的DOM對象 和 jQuery對象 比較
其本質jQuery 就是把 DOM 對象重新封裝了一下，讓其具有了 jQuery 方法。

二者的相互轉換

jQuery的選取器
jQuery 的基本選取器

 

 

層級選取器

 

 

基本過濾選取器

 

 

屬性選取器

 

篩選選取器

 

jQuery動畫效果
顯示動畫
方式一：
    $("div").show();
方式二：
    $(‘div‘).show(3000);
方式三：
    $("div").show("slow");
方式四：
//show(毫秒值，回呼函數;
    $("div").show(5000,function () {
        alert("動畫執行完畢！");
    });

隱藏動畫
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000, function(){});

開關式顯示隱藏動畫
$(‘#box‘).toggle(3000,function(){});
顯示和隱藏的來回切換採用的是toggle()方法：就是先執行show()，再執行hide()。

滑入和滑出
1、滑入動畫效果：（類似於生活中的捲簾門）
$(selector).slideDown(speed, 回呼函數);
2、滑齣動畫效果：
$(selector).slideUp(speed, 回呼函數);
3、滑入滑出切換動畫效果：
$(selector).slideToggle(speed, 回呼函數);

淡入淡齣動畫
1、淡入動畫效果：
$(selector).fadeIn(speed, callback);
2、淡齣動畫效果：
$(selector).fadeOut(1000);
3、淡入淡出切換動畫效果：
$(selector).fadeToggle(‘fast‘, callback);

自訂動畫
$(selector).animate({params}, speed, callback);
作用：執行一組CSS屬性的自訂動畫。
    第一個參數表示：要執行動畫的CSS屬性（必選）
    第二個參數表示：執行動畫時間長度（可選）
    第三個參數表示：動畫執行完後，立即執行的回呼函數（可選）

停止動畫
$(selector).stop(true, false);
第一個參數：
    true：後續動畫不執行。
    false：後續動畫會執行。
第二個參數：
    true：立即執行完成當前動畫。
    false：立即停止當前動畫。
PS：參數如果都不寫，預設兩個都是false。實際工作中，直接寫stop()用的多。


jQuery的屬性操作
jquery的屬性操作模組分為四個部分：html屬性操作，dom屬性操作，類樣式操作和值操作
    html屬性操作：是對html文檔中的屬性進行讀取，設定和移除操作。比如attr()、removeAttr()
    DOM屬性操作：對DOM元素的屬性進行讀取，設定和移除操作。比如prop()、removeProp()
    類樣式操作：是指對DOM屬性className進行添加，移除操作。比如addClass()、removeClass()、toggleClass()
    值操作：是對DOM屬性value進行讀取和設定作業。比如html()、text()、val()

設定屬性值或者 返回被選元素的屬性值
attr()

移除屬性
removeAttr()
prop()


關於attr()和prop()的區別

什麼時候使用attr()，什麼時候使用prop()？
1.是有true,false兩個屬性使用prop();
2.其他則使用attr();

addClass（添加多個類名）
removeClass從所有匹配的元素中刪除全部或者指定的類。（可以通過添加刪除類名，來實現元素的顯示隱藏）

toggleClass如果存在（不存在）就刪除（添加）一個類。//toggleClass(‘box‘)

html
html() 是擷取選中標籤元素中所有的內容

text
text() 擷取匹配元素包含的常值內容

val
val()用於表單控制項中擷取值，比如input textarea select等等


使用jQuery操作input的value值


jQuery的文檔操作
插入操作
父元素.append(子項目)
解釋：追加某元素，在父元素中添加新的子項目。子項目可以為：stirng | element（js對象） | jquery元素

子項目.appendTo(父元素)
解釋：追加到某元素 子項目添加到父元素

父元素.prepend(子項目)；
解釋：前置添加， 添加到父元素的第一個位置

父元素.prependTo(子項目)；
解釋：後置添加， 添加到父元素的最後一個位置

父元素.after(子項目)；
子項目.inserAfter(父元素)；
解釋：在匹配的元素之後插入內容

父元素.before(子項目)；
子項目.inserBefore(父元素)；
解釋：在匹配的元素之後插入內容

複製操作
$(選取器).clone();
解釋：複製匹配的DOM元素

修改操作
$(selector).replaceWith(content);
將所有匹配的元素替換成指定的string、js對象、jquery對象。

$(‘<p>哈哈哈</p>‘)replaceAll(‘h2‘);
解釋：替換所有。將所有的h2標籤替換成p標籤。

刪除操作
$(selector).remove();
解釋：刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）

$(selector).detach();
解釋：刪除節點後，事件會保留

$(selector).empty();
解釋：清空選中元素中的所有後代節點



jQuery的位置資訊
寬度和高度
擷取寬度   .width()
設定寬度   .width( value )

高度
擷取高度    .height()
設定高度    .height( value )


innerHeight()和innerWidth()
擷取內部寬    .innerWidth()
設定內部寬    .innerWidth(value);

擷取內部高    .innerHeight()
設定內部寬    .innerHeight(value);


outWidth和outHeight()
擷取外部寬     .outerWidth( [includeMargin ] )
設定外部寬     .outerWidth( value )

擷取外部高     .outerHeight( [includeMargin ] )
設定外部高     .outerHeight( value )

位移
擷取    .offset()
設定     .offset( coordinates )

元素座標    .position()
滾動距離
擷取：
    水平方向   .scrollLeft()
描述：擷取匹配的元素集合中第一個元素的當前水平捲軸的位置（頁面捲走的寬度）

設定：
    .scrollLeft( value )
描述：設定每個匹配元素的水平方向捲軸位置。

垂直方向
擷取：
    .scrollTop()
描述：擷取匹配的元素集合中第一個元素的當前遲滯捲軸的位置（頁面捲走的高度）
設定：
    .scrollLeft( value )
描述：設定每個匹配元素的垂直方向捲軸位置。



JS的事件流的概念
什麼是事件流
事件流描述的是從頁面中接收事件的順序
1、DOM事件流
“DOM2級事件”規定的事件流包括三個階段：
    ① 事件捕獲階段；
    ② 處於目標階段；
    ③ 事件冒泡階段

document、documentElement和document.body三者之間的關係：
    document代表的是整個html頁面；
    document.documentElement代表的是<html>標籤；
    document.body代表的是<body>標籤；

三階段：

 

jquery的常用事件

 

事件對象
Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鍵的狀態。

事件流的由來
微軟和網景亂搞

關於event對象

 

 

jQuery的事件綁定和解除綁定
綁定事件
文法
    bind(type,data,fn)
    描述：為每一個匹配元素的特定事件（像click）綁定一個事件處理器函數。

參數解釋：
    type (String) : 事件類型
    data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外資料對象
    fn ( Function) : 綁定到每個匹配元素的事件上面的處理函數


解除綁定事件
文法
    unbind(type,fn);
描述：
    bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。
    如果沒有參數，則刪除所有綁定的事件。
    如果把在綁定時傳遞的處理函數作為第二個參數，則只有這個特定的事件處理函數會被刪除。

參數解釋：
    type (String) : (可選) 事件類型
    fn(Function) : (可選) 要從每個匹配元素的事件中反綁定的事件處理函數

把所有段落的所有事件取消綁定
    $("p").unbind()

自訂事件
文法
    trigger(type,data);
    描述：在每一個匹配的元素上觸發某類事件，它觸發的是由bind()註冊的自訂事件。

參數解釋：
    type (String) : 要觸發的事件類型
    data (Array) : (可選)傳遞給事件處理函數的附加參數

一次性事件
文法
    one(type,data,fn)
描述：
    為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。在每個對象上，這個事件處理函數只會被執行一次。其他規則與bind()函數相同

參數解釋：
    type (String) : 事件類型
    data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外資料對象
    fn (Function) : 綁定到每個匹配元素的事件上面的處理函數



事件委託（事件代理）
什麼是事件委託
通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委託呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。

原理：
　　利用冒泡的原理，把事件加到父級上，觸發執行效果。
作用：
    1.效能要好
    2.針對新建立的元素，直接可以擁有事件

事件來源:
　　跟this作用一樣(他不用看指向問題，誰操作的就是誰), event對象下的
使用情景：
　　為DOM中的很多元素繫結相同事件；
　　為DOM中尚不存在的元素繫結事件；

文法：
on(type,selector,data,fn);
描述：在選定的元素上綁定一個或多個事件處理函數

參數解釋
    events( String) : 一個或多個空格分隔的事件類型
    selector( String) : 一個選取器字串，用於過濾出被選中的元素中能觸發事件的後代元素
    data: 當一個事件被觸發時，要傳遞給事件處理函數的event.data。
    fn:回呼函數


輪播圖實現  網上到處都有，改改就行了


jQuery的ajax
什麼是ajax
    AJAX = 非同步javascript和XML（Asynchronous Javascript and XML）
    簡言之，在不重載整個網頁的情況下，AJAX通過後台載入資料，並在網頁上進行顯示。
    通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程伺服器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部資料直接載入網頁的被選元素中。

jQuery的load()方法
load()方法從伺服器載入資料，並把返回的資料放入被選元素中。
文法
    $("selector").load(url,data,callback);

jquery的getJSON方法
jQuery的AJAX中使用getJSON()方法非同步載入JSON格式資料。擷取伺服器中的資料，並對資料進行解析，顯示到頁面中
文法:
    $.getJSON(url,[data],[callback])

參數解釋：
    url參數：為請求載入json格式檔案的伺服器位址
    可選項data參數：為請求時發送的資料
    callback參數：為資料請求成功後執行的函數

jquery的$.get()方法
    $.get() 方法通過 HTTP GET 請求從伺服器上請求資料
文法：
    $.get(URL,callback);

url參數：規定你請求的路徑，是必需參數
callback參數：為資料請求成功後執行的函數

jquery的post()方法
post()方法多用於以POST方式向伺服器發送資料，伺服器接收到資料之後，進行處理，並將處理結果返回頁面
文法：
    $.post(URL,data,callback);

url參數：規定你請求的路徑，是必需參數，可選的data參數是連同請求發送的資料
可選的callback參數：為資料請求成功後執行的函數

基本格式
//get()方式
  $.ajax({
     url:‘./data/index.txt‘,
     type:‘get‘,
     dataType:‘text‘,
     success:function(data){
        $(‘p‘).html(data);

     },
     error:function(error){
        console.log(error)
     }

//post()方式
$.ajax({
   url:‘/index‘,
   type:‘post‘,
   data:{name:‘張三‘,age:12},
   success:function(data){
      $(‘p‘).html(data);
   },
   error:function(error){
      console.log(error)
}


XMLHttpRequest自己學去吧

jquery還包含：
    jquery 外掛程式    https://www.oschina.net/project/tag/273/jquery
    jqueryUI       https://jqueryui.com/      http://www.jqueryui.org.cn/

前端jQuery部分簡單整理