jQuery,Ajax.animate,SVG(簡要學習筆記二十)[完結篇]

1.$和jquery在全局命名空間中定義的惟一兩個變量。

 

2.jquery是工廠函數，不是構造函數。他返回一個新建立的對象。

 

3.jquery的四種調用方式：

    <1>傳遞CSS選擇器(字符串)給$()方法

 

    <2>傳遞Element，Document或Window對象給$()方法

 

    <3>傳遞HTML文本字符串給$()方法。

    如：

var img=$("<img/>",        //新建一個<img>元素  { src:url, //具備html屬性                    css:{borderWidth:5},    //CSS樣式                    click:handleClick    //事件處理程序  } )

 

    <4>傳入一個函數給$()方法。

    如：

　　

　jQuery(function(){    //文檔加載時調用          //全部的jQuery代碼放這裏    })

 

 

4.jquery函數

   是jQuery或$的值。該函數能夠用來建立jQuery對象，用來註冊DOM就緒時須要調用的處理函數。

<1>jQuery對象

    jQuery對象是由jQuery函數返回的對象。

<2>jQuery方法

    jQuery方法是由jQuery函數返回的jQuery對象的方法。

 

例子：

 

5.

    <1>jQuery對象是類數組

   

 $("body").length    //1 一個文檔只有一個body屬性  $("body")[0]    //等於document.body

 

    <2>其餘三個屬性

    $(參數一，參數二，參數三)

    參數一：選擇器

    參數二：content屬性是上下文對象，若是沒傳遞的話，就是Document對象

    參數三：名爲jquery的屬性

 

例子：

 

   <3>

 

prepend()    

在元素的前面添加內容，依舊在標籤內部。

 

回調函數是什麼？

 

<4>jQuery的幾個基礎方法

jQuery的map()方法

jQuery的each()方法

jQuery的is()方法

 

6.jQuery的setter與getter

 

7.jQuery

css(),attr(),addClass()等jQuery的setter方法均可以傳遞多個名值對設置屬性，還有函數設置屬性。

1. offset()獲取偏移量相對於文檔
2. position()獲取偏移量相對於父元素

 

8.jQuery獲取元素的寬高問題（有趣）

1. width(),height()：獲取的是內容的寬高（不包括內邊距，邊框，外邊距）
2. innerWidth(),innerHeight()：獲取的是包括內邊距的寬高
3. outerWidth(),outerHeight():獲取的是包括內邊距，邊框的寬高
4. outerWidth(true),outerHeight(true):獲取的是包括內邊距，邊框，外邊距的寬高

 

具體見：http://www.w3school.com.cn/jquery/jquery_dimensions.asp

 

 

9.獲取和設置元素數據(重要)

jQuery定義了一個名爲data()的getter/setter方法，可用來設置或獲取與文檔元素， Document或Window對象相關聯的數據。能夠將數據與任意元素關聯。 這也是jQuery的事件處理程序註冊和效果隊列機制的基礎。

 

 

10.clone()

clone() 方法生成被選元素的副本，包含子節點、文本和屬性。

 

11.replaceWidth()與replaceAll()

這二者區別在於：replaceAll()不能使用函數替換

 

12.包裹元素warp()餘unwarp()

13.remove()與detach(),filter()

 

14.jQuery事件對象

jQuery經過定義本身的Event對象來隱藏瀏覽器之間的實現差別。

 

15.bind()的高級特性之事件的註冊

<1>語法：$(selector).bind(event,data,function)

例子：

$("button").bind("click",function(){ $("p").slideToggle(); });

替代語法：

$(selector).bind({event:function, event:function, ...})

例子：

$("button").bind({ click:function(){}, mouseover:function(){}, mouseout:function(){} });

 

<2>bind()有三個參數：

參數一：事件類型字符串，空格分隔多個事件

參數二：傳遞到函數的額外數據。

參數三：處理程序函數

 

<3>

特性一：bind的一個重要特性是容許爲註冊的事件處理程序指定命名空間。

如：

$('a').bind('mouseover.myfunction',f) $('a').bind('mouseover.myfunction1.myfunction2',f)     //以及分配多個命名空間

 

特性二：bind的第一個參數能夠是一個對象

 

與bind()綁定同樣的還有one()也能夠綁定事件。

 

 

16.unbind（）之事件的解除

<1>註銷命名空間下的處理程序

$('a').unbind("mouseover.myfunction1") //取消綁定在myfunction1命名空間下的全部事件 $('a').unbind('.myfunction1'); //去向綁定在myfunction1於myfunction2下的click事件 $('a').unbind('click.myfunction1.myfunction2');

 

 

17.事件觸發

trigger（）

 

18.實時事件（依賴於冒泡）

delegate（）

 

19.動畫（animate）

<1>禁用動畫：

jQuery.fx.off=true;

 

動畫速度：

fast->200ms

slow->600ms

 

自定義動畫速度：

jQuery.fx.speeds["med-fast"]=300;

 

 

<2>jQuery動畫是異步的。默認是隊列化的。

固然咱們也能夠將他們不隊列化。

如：

$("img").fadeIn(500).animate({"width","+=100"},{queue:false,duration:1000}) .fadeOut(500);

這個效果就是：fadeIn與fadeOut是隊列化的。animate是非隊列化的。

fadeIn與animate開始時間相同，

而fadeOut會在fadeIn完成時當即開始。

 

<3>緩動動畫

自定義緩動動畫：

jQuery.easing["squr"]=Math.sqrt;

 

<4>動畫取消(stop)，延遲(delay)和隊列

$("img").stop().animate() $("img").fadeTo(100,0.5).delay(200).slideUp() //快速淡出爲半透明，等200ms，而後向上滑動

 

20.jQuery的Ajax

<1>jquery的load()

$("img").load(function(){   })一個是事件方法

$("img").load('a.txt')一個是ajax方法

具體調用哪一個經過後面的參數決定。

 

post與get有和區別？

 

<2>jQuery.getScript()

動態異步加載腳本文件，它能同時適用於同源和跨源腳本的加載。

適用：

jQuery.getScript("http://eaxo.com/js/wpsl.js",function(){

    //調用且執行完畢後執行回調

})

=>等同於

$.ajax({ url: url, dataType: "script", success: success });

MIME是什麼？jsonP?

 

<3>jQuery.getJson()

 

<4>jQuery.get()和jQuery.post()

 

<5>

jQuery.browser

jQuery.contains()

jQuery.each()

jQuery.extend()

 

 

21.jQuery的插件擴展

關鍵點：jQuery.fn是全部jQuery對象的原型對象。

若是給該對象添加一個函數，該函數會成爲一個jQuery方法。

 

一些插件約定：