python學習筆記-Day16-jquery(文檔處理/事件/插件)

文檔處理

ppend(content|fn)

向每個匹配的元素內部追加內容。

這個操作與對指定的元素執行appendChild方法,將它們添加到文檔中的情況類似。


參數

contentString, Element, jQueryV1.0

要追加到目標中的內容

function(index, html)FunctionV1.4

返回一個HTML字符串,用於追加到每一個匹配元素的裏邊。接受兩個參數,index參數爲對象在這個集合中的索引值,html參數爲這個對象原先的html值。

示例

描述:

向所有段落中追加一些HTML標記。

HTML 代碼:

<p>I would like to say: </p>

jQuery 代碼:

$("p").append("<b>Hello</b>");

結果:

[ <p>I would like to say: <b>Hello</b></p> ]






appendTo(content)

把所有匹配的元素追加到另一個指定的元素元素集合中。

實際上,使用這個方法是顛倒了常規的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。


在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll這個幾個方法成爲一個破壞性操作,返回值是所有被追加的內容,而不僅僅是先前所選中的元素。所以,要選擇先前選中的元素,需要使用end()方法,參見例二。


參數

contentString

用於被追加的內容

示例

描述:

把所有段落追加到ID值爲foo的元素中。

HTML 代碼:

<p>I would like to say: </p>

<div></div><div></div>

jQuery 代碼:

$("p").appendTo("div");

結果:

<div><p>I would like to say: </p></div>

<div><p>I would like to say: </p></div>

描述:

新建段落追加div中並加上一個class

HTML 代碼:

<div></div><div></div>

jQuery 代碼:

 $("<p/>")

   .appendTo("div")

   .addClass("test")

   .end()

   .addClass("test2");

結果:

<div><p class="test test2"></p></div>

<div><p class="test"></p></div>





prepend(content)

向每個匹配的元素內部前置內容。

這是向所有匹配元素內部的開始處插入內容的最佳方式。


參數

contentString, Element, jQueryV1.0

要插入到目標元素內部前端的內容

function(index, html)FunctionV1.4

返回一個HTML字符串,用於追加到每一個匹配元素的裏邊。接受兩個參數,index參數爲對象在這個集合中的索引值,html參數爲這個對象原先的html值。

示例

描述:

向所有段落中前置一些HTML標記代碼。

HTML 代碼:

<p>I would like to say: </p>

jQuery 代碼:

$("p").prepend("<b>Hello</b>");

結果:

[ <p><b>Hello</b>I would like to say: </p> ]

描述:

將一個DOM元素前置入所有段落

HTML 代碼:

<p>I would like to say: </p>

<p>I would like to say: </p>

<b class="foo">Hello</b>

<b class="foo">Good Bye</b>

jQuery 代碼:

$("p").prepend( $(".foo")[0] );

結果:

<p><b class="foo">Hello</b>I would like to say: </p>

<p><b class="foo">Hello</b>I would like to say: </p>

<b class="foo">Hello</b>

<b class="foo">Good Bye</b>

描述:

向所有段落中前置一個jQuery對象(類似於一個DOM元素數組)。

HTML 代碼:

<p>I would like to say: </p><b>Hello</b>

jQuery 代碼:

$("p").prepend( $("b") );

結果:

<p><b>Hello</b>I would like to say: </p>





prependTo(content)

把所有匹配的元素前置到另一個、指定的元素元素集合中。

實際上,使用這個方法是顛倒了常規的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。


在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll這個幾個方法成爲一個破壞性操作,要選擇先前選中的元素,需要使用end()方法,參見 appendTo 方法的例二。


參數

contentString

用於匹配元素的jQuery表達式

示例

描述:

把所有段落追加到ID值爲foo的元素中。

HTML 代碼:

<p>I would like to say: </p><div id="foo"></div>

jQuery 代碼:

$("p").prependTo("#foo");

結果:

<div id="foo"><p>I would like to say: </p></div>




after(content|fn)

在每個匹配的元素之後插入內容。

參數

contentString, Element, jQueryV1.0

插入到每個目標後的內容

functionFunctionV1.4

函數必須返回一個html字符串。

示例

描述:

在所有段落之後插入一些HTML標記代碼。

HTML 代碼:

<p>I would like to say: </p>

jQuery 代碼:

$("p").after("<b>Hello</b>");

結果:

<p>I would like to say: </p><b>Hello</b>

描述:

在所有段落之後插入一個DOM元素。

HTML 代碼:

<b id="foo">Hello</b><p>I would like to say: </p>

jQuery 代碼:

$("p").after( $("#foo")[0] );

結果:

<p>I would like to say: </p><b id="foo">Hello</b>

描述:

在所有段落中後插入一個jQuery對象(類似於一個DOM元素數組)。

HTML 代碼:

<b>Hello</b><p>I would like to say: </p>

jQuery 代碼:

$("p").after( $("b") );

結果:

<p>I would like to say: </p><b>Hello</b>





before(content|fn)

概述

在每個匹配的元素之前插入內容。

參數

contentString, Element, jQueryV1.0

插入到每個目標後的內容

functionFunctionV1.4

函數必須返回一個html字符串。

示例

描述:

在所有段落之前插入一些HTML標記代碼。

HTML 代碼:

<p>I would like to say: </p>

jQuery 代碼:

$("p").before("<b>Hello</b>");

結果:

[ <b>Hello</b><p>I would like to say: </p> ]

描述:

在所有段落之前插入一個元素。

HTML 代碼:

<p>I would like to say: </p><b id="foo">Hello</b>

jQuery 代碼:

$("p").before( $("#foo")[0] );

結果:

<b id="foo">Hello</b><p>I would like to say: </p>

描述:

在所有段落中前插入一個jQuery對象(類似於一個DOM元素數組)。

HTML 代碼:

<p>I would like to say: </p><b>Hello</b>

jQuery 代碼:

$("p").before( $("b") );

結果:

<b>Hello</b><p>I would like to say: </p>





empty()

刪除匹配的元素集合中所有的子節點。

示例

描述:

把所有段落的子元素(包括文本節點)刪除

HTML 代碼:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代碼:

$("p").empty();

結果:

<p></p>





remove([expr])

從DOM中刪除所有匹配的元素。

這個方法不會把匹配的元素從jQuery對象中刪除,因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外,其他的比如綁定的事件,附加的數據等都會被移除。


參數

exprStringV1.0

用於篩選元素的jQuery表達式

示例

描述:

從DOM中把所有段落刪除

HTML 代碼:

<p>Hello</p> how are <p>you?</p>

jQuery 代碼:

$("p").remove();

結果:

how are

描述:

從DOM中把帶有hello類的段落刪除

HTML 代碼:

<p class="hello">Hello</p> how are <p>you?</p>

jQuery 代碼:

$("p").remove(".hello");

結果:

how are <p>you?</p>





clone([Even[,deepEven]])

克隆匹配的DOM元素並且選中這些克隆的副本。

在想把DOM文檔中元素的副本添加到其他位置時這個函數非常有用。


參數

EventsBooleanV1.0

一個布爾值(true 或者 false)指示事件處理函數是否會被複制。V1.5以上版本默認值是:false

Events[,deepEvents]Boolean,BooleanV1.5

1:一個布爾值(true 或者 false)指示事件處理函數是否會被複制。

2:一個布爾值,指示是否對事件處理程序和克隆的元素的所有子元素的數據應該被複制。

示例

描述:

克隆所有b元素(並選中這些克隆的副本),然後將它們前置到所有段落中。

HTML 代碼:

<b>Hello</b><p>, how are you?</p>

jQuery 代碼:

$("b").clone().prependTo("p");

結果:

<b>Hello</b><p><b>Hello</b>, how are you?</p>

描述:

創建一個按鈕,他可以複製自己,並且他的副本也有同樣功能。

HTML 代碼:

<button>Clone Me!</button>

jQuery 代碼:

$("button").click(function(){

  $(this).clone(true).insertAfter(this);

});


##############################################

事件

註冊事件的三種方法

第一種:

    在html頁面的標籤上直接對標籤註冊事件

<input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全選" />


第二種:

        $(function(){
            //文檔加載完畢後,自動執行此段代碼
//            第二種註冊事件方式
//            批量對某一類標籤定義事件時使用
            $("#id").click(function(){
                     console.log("123")
                    }
            );           
        })


第三種

        ((){
            
().(, () {
                .()
            });
            
        })



jquery支持的事件


blur([[data],fn])       blur事件會在元素失去焦點的時候觸發,既可以是鼠標行爲,也可以是按tab鍵離開的,可以通過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行爲。


change([[data],fn])     change事件會在元素失去焦點的時候觸發,也會當其值在獲得焦點後改變時觸發;可以通過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行爲。


click([[data],fn])      調用執行綁定到click事件的所有函數


dblclick([[data],fn])   dblclick事件會在元素的同一點雙擊時觸發。可以通過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行爲。


error([[data],fn])      調用所有綁定到error事件上的函數;可以通過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行爲。對於error事件,沒有一個公衆的標準。在大多數瀏覽器中,當頁面的JavaScript發生錯誤時,window對象會觸發error事件;當圖像的src屬性無效時,比如文件不存在或者圖像數據錯誤時,也會觸發圖像對象的error事件。


如果異常是由window對象拋出,事件處理函數將會被傳入三個參數:

1. 描述事件的信息 ("varName is not defined", "missing operator in expression", 等等.),

2. 包含錯誤的文檔的完整URL

3. 異常發生的行數 如果事件處理函數返回true,則表示事件已經被處理,瀏覽器將認爲沒有異常。


focus([[data],fn])      可以通過鼠標點擊或者鍵盤上的TAB導航觸發。這將觸發所有綁定的focus函數,注意,某些對象不支持focus方法


focusin([data],fn)      當一個元素,或者其內部任何一個元素獲得焦點的時候會觸發這個事件。這跟focus事件區別在於,他可以在父元素上檢測子元素獲取焦點的情況。


focusout([data],fn)     當一個元素,或者其內部任何一個元素失去焦點的時候會觸發這個事件。這跟blur事件區別在於,他可以在父元素上檢測子元素失去焦點的情況。


keydown([[data],fn])    會調用執行綁定到keydown事件的所有函數,包括瀏覽器的默認行爲。可以通過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行爲。keydown事件會在鍵盤按下時觸發。


keypress([[data],fn])   會調用執行綁定到keydown事件的所有函數,包括瀏覽器的默認行爲。可以通過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行爲。keydown事件會在鍵盤按下時觸發


keyup([[data],fn])      會調用執行綁定到keyup事件的所有函數,包括瀏覽器的默認行爲。可以通過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行爲。keyup事件會在按鍵釋放時觸發。


mousedown([[data],fn])  mousedown事件在鼠標在元素上點擊後會觸發


mouseenter([[data],fn]) 與 mouseover 事件不同,只有在鼠標指針穿過被選元素時,纔會觸發 mouseenter 事件。如果鼠標指針穿過任何子元素,同樣會觸發 mouseover 事件。


mouseleave([[data],fn]) 與 mouseout 事件不同,只有在鼠標指針離開被選元素時,纔會觸發 mouseleave 事件。如果鼠標指針離開任何子元素,同樣會觸發 mouseout 事件。


mousemove([[data],fn])  mousemove 事件通過鼠標在元素上移動來觸發。事件處理函數會被傳遞一個變量——事件對象,其.clientX 和 .clientY 屬性代表鼠標的座標


mouseout([[data],fn])   mouseout事件在鼠標從元素上離開後會觸發


mouseover([[data],fn])  mouseover事件會在鼠標移入對象時觸發


mouseup([[data],fn])    mouseup事件會在鼠標點擊對象釋放時


resize([[data],fn])     當文檔窗口改變大小時觸發


scroll([[data],fn])     當滾動條發生變化時觸發


select([[data],fn])     會調用執行綁定到select事件的所有函數,包括瀏覽器的默認行爲。可以通過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行爲。


submit([[data],fn])     會調用執行綁定到submit事件的所有函數,包括瀏覽器的默認行爲。可以通過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行爲。


unload([[data],fn])     在每一個匹配元素的unload事件中綁定一個處理函數




擴展/插件


jQuery.fn.extend(object)

擴展 jQuery 元素集來提供新的方法(通常用來製作插件)。

查看這裏<a href="http://docs.jquery.com/Plugins/Authoring" title="Plugins/Authoring">Plugins/Authoring</a>可以獲取更多信息。


參數

objectObjectV1.0

用來擴充 jQuery 對象。

示例

描述:

增加兩個插件方法。

jQuery 代碼:

jQuery.fn.extend({

  check: function() {

    return this.each(function() { this.checked = true; });

  },

  uncheck: function() {

    return this.each(function() { this.checked = false; });

  }

});

結果:

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();




jQuery.extend(object)

擴展jQuery對象本身。

用來在jQuery命名空間上增加新函數。 查看 'jQuery.fn.extend' 獲取更多添加插件的信息。


參數

objectObjectV1.0

用以擴展 jQuery 對象

示例

描述:

在jQuery命名空間上增加兩個函數。

jQuery 代碼:

jQuery.extend({

  min: function(a, b) { return a < b ? a : b; },

  max: function(a, b) { return a > b ? a : b; }

});

結果:

jQuery.min(2,3); // => 2

jQuery.max(4,5); // => 5






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章