JQuery的一些簡易功能

標籤：ati   innertext   ima   自訂動畫   回呼函數   停止   數值   pre   selector   

JQueryjs的缺點總結

1.入口函數只能有一個，如果出現多個，後面的會覆蓋掉前面的2.代碼容錯性差，容易出錯，出錯會導致後面的代碼不執行3.存在瀏覽器安全色性，比如innerText在Firefox瀏覽器中不起作用4.DOM操作複雜，實現簡單的動畫很麻煩

jQuery的兩種入口函數：

$(document).ready(function(){});$(function(){});

對比JavaScript的入口函數與jQuery的入口函數

1.JavaScript的入口函數要等到頁面中所有資源（包括圖片、檔案）載入完成才開始執行2.jQuery的入口函數只會等待文檔樹載入完成就開始執行，並不會等待圖片、檔案的載入。

瞭解jQuery

$:其實就是一個函數；     $():參數不一樣，功能不一樣jQuery對象與DOM對象之間的轉換（痛點）    什麼是DOM對象？        使用JavaScript中的方法擷取頁面中的元素返回的對象就是dom對象。比如使用document.getElement*系列的方法返回的就是dom對象。        dom對象只可以使用dom對象的方法和屬性什麼是jQuery對象    jQuery對象就是使用jquery的方法擷取頁面中的元素返回的對象就是jquery對象。比如使用$()方法返回對象都是jquery對象    jquery對象只能使用jquery對象的方法jQuery對象其實就是DOM對象的封裝集（封裝了DOM對象的集合）jQuery對象和DOM對象的相互轉換    jquery對象轉DOM對象        第一種方法（推薦使用）        var $li = $("li");        第二種方法：        $li[0]        $li.get(0)   兩種方法等價  取到DOM元素集合        其實jQuery對象轉DOM對象的實質就是取出jQuery對象中封裝的DOM對象DOM對象轉jQuery對象    var $obj = $(domObj);    $(document).ready(function(){});就是典型的DOM對象轉jQuery對象JavaScript是一門程式設計語言，jquery是用JavaScript實現的一個JavaScript庫，目的是簡化我們的開發 選取器：    基本選取器、層級選取器、過濾選取器、篩選選取器    基本選取器：ID選取器 類別選取器 標籤選取器 並集選取器 交集選取器（標籤指定式選取器）    層級選取器：子代選取器 後代選取器    過濾選取器：:eq（index）  :odd  :even    篩選選取器：children(selector)  find(selector)  siblings(selector) parent()  eq(index)jQuery操作樣式    css操作  功能：設定或者修改樣式，操作的是style屬性 （參數是一個對象，對象中包含了需要設定的樣式名和樣式值）    class操作          addClass(name);添加樣式類        removeClass() 不帶參數，移除所有的樣式類  帶參數，移除單個樣式類    hasClass(name)  判斷是否有樣式類  傳回值為true false    toggleClass(name);  轉場樣式類  name:需要切換的樣式類名，如果有，移除該樣式，如果沒有，添加該樣式。經驗總結：    1.如果操作到的樣式非常少，可以考慮css方法    2.如果操作到的樣式非常多，那麼可以通過class方法來操作，將樣式寫到一個class類裡面。    3.如果考慮到後期維護方便，將css從js中分離出來，那麼推薦使用class的方式來操作。

jquery動畫

show()顯示  hide()隱藏  toggle():顯示隱藏切換，如果是顯示狀態，執行隱藏操作，否則執行顯示操作。show([speed], [callback]);滑入：slideDown（）  滑出：slideUp()   滑入滑出切換：slideToggle()slideUp(speed, callback);淡入：fadeIn（）  淡出：fadeOut()  淡入淡出切換：fadeToggle()fadeIn(speed, callback);自訂動畫    animate：自訂動畫        $(selector).animate(json,[speed],[easing]，[callback]);            // json：要執行動畫的CSS屬性，帶數字（必選）            // speed：執行動畫時間長度（必選，預設normal）            //easing：控制動畫的效果                //1.swing：搖擺、鞦韆(預設)             //2.linear:勻速            // callback：動畫執行完後立即執行的回呼函數（可選）    stop方法：停止當前正在執行的動畫效果    stop(clearQueue, jumpToEnd);    //第一個參數：是否清除隊列    //第二個參數：是否跳轉到最終效果

jquery操作DOM(節點)

建立元素  $(“<span>這是一個span元素</span>”);添加元素  $(“div”).append($span);   $(“div”).append(“<span>這是一個span元素</span>”);清空元素：    empty：清空指定節點的所有元素，自身保留(清理門戶)    $(“div”).html(“”);//使用html方法來清空元素，不推薦使用，會造成記憶體流失，綁定的事件不會被清除。    remove：相比於empty，自身也刪除（自殺）複製元素：    // 複製$(selector)所匹配到的元素（深度複製）    //clone(true)    // 傳回值為複製的新元素，和原來的元素沒有任何關係了。即修改新元素，不會影響到原來的元素。    $(selector).clone();

jQuery操作屬性

attr(name, value);//用法舉例    $(“img”).attr(“title”,”哎喲，不錯哦”);    $(“img”).attr(“alt”,“哎喲，不錯哦”);attr(obj)    //用法舉例        $("img").attr({            title:"哎喲，不錯哦",            alt:"哎喲，不錯哦",            style:"opacity:.5"        }）；    擷取屬性：        attr(name)        1.擷取屬性時，只會擷取到第一個元素對應的屬性，與css方法一樣        2.擷取屬性時，如果該屬性不存在，那麼會返回undefined    移除屬性：        removeAttr(name);        //用法舉例        $("img").removeAttr("title");    prop        注意：在jQuery1.6之後，對於checked、selected、disable這類boolean類型的屬性來說，        如果使用attr方法擷取屬性值，得到的不是true和false，而是checked以及undefined。，        使用prop方法來擷取或者設定checked、selected、disable這類的值。prop方法使用跟attr方法一樣。        //設定屬性        $(“:checked”).prop(“checked”,true);        //擷取屬性        $(“:checked”).prop(“checked”);//返回true或者false

jQuery操作值與內容

val方法用於設定和擷取表單元素的值，例如input、select、textarea的值    //設定值    $(“#name”).val(“張三”);    //擷取值    $(“#name”).val();html方法與text方法的區別：html方法會識別html標籤，text方法會把內容直接當成字串，並不會識別html標籤。

jQuery操作尺寸

height()與width()：設定或者返回元素的高度及高度,返回結果是數實值型別。innerWidth()與innerHeight()：返回元素的寬度及高度（包括padding）outerWidth()與outerHeigth()：返回元素的寬度及高度（包括padding、border）outWidth(true)與outerHeight(true)：返回元素的寬度及高度（包括padding、border、margin）注意：只有height()與width（）可以進行設定作業，innerWidth（）、outWidth（）都是唯讀屬性，只能擷取、不能設定。offset：    設定或者擷取元素相對於文檔document的位置。    注意：使用offset操作，如果元素沒有設定定位(預設position:static)，則會把position修改為relative.會修改left、topposition    擷取相對於其最近的有定位的父元素的位置。offsetLeft    // 擷取，傳回值為對象：{left:num, top:num}    $(selector).position();    注意：position方法只能擷取，不能設定scrollTop    設定或者擷取垂直捲軸的位置    // 有參數表示設定位移，參數為數實值型別    $(selector).scrollTop(100);    // 無參數表示擷取位移    $(selector).scrollTop();scrollLeft    設定或者擷取水平捲軸的位置    // 有參數表示設定位移，參數為數實值型別    $(selector).scrollLeft(100);    // 無參數表示擷取位移    $(selector).scrollLeft();

jQuery事件的發展曆程

簡單事件綁定>>bind事件綁定>>delegate事件綁定>>on事件綁定(推薦)$("p").bind("click mouseenter", function(){//事件回應程式法});  可以綁定多個事件    缺點：不支援動態建立出來的元素繫結事件。$(".parentBox").delegate("p", "click", function(){//為 .parentBox下面的所有的p標籤綁定事件}); 支援動態建立出來的元素繫結事件。為什麼delegate支援動態綁定事件？原因是事件冒泡機制。因為事件時綁定到父元素上的，由子項目觸發。表示給$(selector)綁定代理事件，當必須是它的內部元素span才能觸發這個事件，支援動態綁定$(selector).on( "click",“span”, function() {}); 表示給$(selector)綁定事件，並且由自己觸發，不支援動態綁定（不使用代理）。$(selector).on( "click", function() {});事件解除綁定：    unbind()  undelegate()  off（）jQuery事件對象：    event.type  事件類型    event.data  儲存綁定事件時傳遞的附加資料    event.target    點了誰就是誰    event.currentTarget    當前DOM元素，等同於this    event.delegateTarget    代理對象    screenX和screenY      對應螢幕最左上方的值    offsetX和offsetY     點擊的位置距離元素的左上方的位置    clientX和clientY     距離頁面左上方的位置（忽視捲軸）    pageX和pageY         距離頁面最頂部的左上方的位置（會計算捲軸的距離）    event.witch         滑鼠按鍵類型，1=滑鼠左鍵 2=滑鼠中鍵 3=滑鼠右鍵    event.keyCode       按下的鍵盤代碼    event.stopPropagation()     阻止事件冒泡行為    event.preventDefault()     阻止瀏覽器預設行為    return false;   

鏈式編程

鏈式編程原理：return this;通常情況下，只有設定作業才能把鏈式編程延續下去。因為擷取操作的時候，會返回擷取到的相應的值，無法返回 this。end(); // 篩選選取器會改變jQuery對象的DOM對象，想要回複到上一次的狀態，並且返回匹配元素之前的狀態。隱式迭代：    隱式迭代的意思是：在方法的內部會為匹配到的所有元素進行迴圈遍曆，執行相應的方法；而不用我們再進行迴圈，    簡化我們的操作，方便我們調用。如果擷取的是多元素的值，大部分情況下返回的是第一個元素的值。    設定性操作的時候，設定的是所有的元素。   擷取性操作：擷取的是第一個元素each方法：    有了隱士迭代，為什麼還要使用each函數遍曆？        大部分情況下是不需要使用each方法的，因為jQuery的隱士迭代特性。如果要對每個元素做不同的處理，這時候就用到了each方法多庫共存：    我們知道jQuery佔用了$這個標識符，如果引用的其他庫也用到$這個標識符，這時候為了保證每個庫都能正常使用，    這時候就存在了多庫共存的問題。後引入的$的會覆蓋掉先引入的庫中的$。    解決辦法：        $ === jQuery        jQuery的$和jQuery是兩個相同的變數，因此遇到多庫共存的時候，可以讓jquery交出$符的控制權，這個時候還是可以使用$.

JQuery的一些簡易功能