Jquery總結(二)

 九、效果

  基本:

    1$("p").show() 顯示隱藏的匹配元素

    2$("p").hide() 隱藏顯示的元素

    3$("p").show("slow"); 以優雅的動畫顯示所有匹配的元素,並在顯示完成後可選地觸發一個回調函數。

      speed (String,Number) : 三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如:1000)

callback (Function) : (Optional) 在動畫完成時執行的函數,每個元素執行一次。

   用迅速的動畫將隱藏的段落顯示出來,歷時200毫秒。並在之後執行反饋!

   <p style="display: none">Hello</p>

   jQuery 代碼:

   $("p").show("fast",function(){

   $(this).text("Animation Done!");

   });

   4$("p").hide("slow"); 以優雅的動畫隱藏所有匹配的元素,並在顯示完成後可選地觸發一個回調函數。

   5$("p").toggle() 切換元素的可見狀態

   6$("p").toggle("slow"); 以優雅的動畫切換所有匹配的元素,並在顯示完成後可選地觸發一個回調函數

淡入淡出:

1$("p").fadeIn("slow"); 通過不透明度的變化來實現所有匹配元素的淡入效果,並在動畫完成後可選地觸發一個回調函數

2$("p").fadeOut("slow"); 通過不透明度的變化來實現所有匹配元素的淡出效果,並在動畫完成後可選地觸發一個回調函數。

3$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度,並在動畫完成後可選地觸發一個回調函數

自定義:

   1$("#block").animate({

    width: "90%",

    height: "100%",

    fontSize: "20em",

    borderWidth: 10

201}, 1000 );用於創建自定義動畫的函數。

十、事件

   事件處理:

   1$("p").bind("click", function(){ alert( $(this).text() );}); 爲每一個匹配元素的特定事件(像click)綁定一個事件處理器函數

   2$("p").one("click",function(){alert(${this}.text());}) 當所有段落被第一次點擊的時候,顯示所有其文本

   3trigger(type,[data])在每一個匹配的元素上觸發某類事件

事件委派:$("p").live("click", function(){$(this).after("<p>Another paragraph!</p>");});。給所有當前以及將來會匹配的元素綁定一個事件處理函數(比如click事件)。也能綁定自定義事件。與bind()不同的是,live()一次只能綁定一個事件

事件切換:一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法

   $("td").hover(

function () {

    $(this).addClass("hover");

},

function () {

    $(this).removeClass("hover");

}

);鼠標懸停的表格加上特定的類

 

4、每次點擊後依次調用函數。

$("td").toggle(

function () {

    $(this).addClass("selected");

},

function () {

   $(this).removeClass("selected");

}

);

5、事件:

   1$("p").blur(); 觸發每一個匹配元素的blur事件

   2$("p").blur( function () { alert("Hello World!"); } ); 在每一個匹配元素的blur事件中綁定一個處理函數

   3change()change事件會在元素失去焦點的時候觸發,也會當其值在獲得焦點後改變時觸

   4change(fn);在每一個匹配元素的change事件中綁定一個處理函數。

   5$("p").click(); 觸發每一個匹配元素的click事件

   6$("p").click(function(){});在每一個匹配元素的click事件中綁定一個處理函數

   7dblclick()dblclick事件會在元素的同一點雙擊時觸發。

   8$("p").dblclick( function () { alert("Hello World!"); }); 在每一個匹配元素的dblclick事件中綁定一個處理函數。

   9$(document).ready(function(){ $("#login").focus();}); 觸發每一個匹配元素的focus事件。

   10$("input[type=text]").focus(function(){this.blur();}); 在每一個匹配元素的focus事件中綁定一個處理函數。

   11keydown()keydown事件會在鍵盤按下時觸發。

   12keydown(fn);在每一個匹配元素的keydown事件中綁定一個處理函數。

   13keypress();觸發每一個匹配元素的keypress事件

   14keypress(fn);在每一個匹配元素的keypress事件中綁定一個處理函數。

   15keyup();觸發每一個匹配元素的keyup事件

   16keyup(fn);在每一個匹配元素的keyup事件中綁定一個處理函數。

   17mousedown();

   18mouseup();

   19mousemove();

   20mouseover();

   21mouseout();

   22$("form:first").submit();提交本頁的第一個表單。

   23$("form").submit(function(){return false;});阻止頁面提交。

十一、ajax

      ajax請求:

       1、通有方式:$.ajax(prop);prop是一個hash表,它可以傳遞的key/value有以下幾種:

         (String)type:數據傳遞方式(getpost)

         ((String)url:數據請求頁面的url

         ((String)data:傳遞數據的參數字符串,只適合post方式

         ((String)dataType:期待數據返回的數據格式(例如 "xml", "html", "script", "json")

         ((Boolean)ifModified 當最後一次請求的相應有變化是才成功返回,默認值是false

         ((Number)timeout:設置時間延遲請求的時間。可以參考$.ajaxTimeout

         ((Boolean)global:是否爲當前請求觸發ajax全局事件,默認爲true

         ((Function)error:當請求失敗時觸發的函數。

         ((Function)success:當請求成功時觸發函數

         ((Function)complete:當請求完成後出發函數

     

      2$.get(url, params, callback) get方式向遠程頁面傳遞參數,請求完成後處理函數,除了url外,其它參數任意選擇!

         eg:$.get(   "ajax.asp",

            { name: "young", age: "25" },

            function(data){ alert("Data Loaded: " + data); }

          )

      3$.getJSON(url, params, callback) get方式向遠程json對象傳遞參數,請求完成後處理函數callback

      4$.post(url, params, callback) post方式向遠程頁面傳遞參數,請求完成後處理函數callback

十二、工具類

數組和對象操作:

     1$.each(obj,callback); 通用例遍方法,可用於例遍對象和數組。回調函數擁有兩個參數:第一個爲對象的成員或數組的索引,第二個爲對應變量或內容。

       $.each( [0,1,2], function(i, n){alert( "Item #" + i + ": " + n );});

     2jQuery.grep(array,callback,[invert]);使用過濾函數過濾數組元素,此函數至少傳遞兩個參數:待過濾數組和過濾函數

     3$.map(array,callback);將一個數組中的元素轉換到另一個數組中

     4$.inArray(value,array);確定第一個參數在數組中的位置(如果沒有找到則返回 -1 ),0開始。

     5$.merge( [0,1,2], [2,3,4] ) ;合併兩個數組。返回的結果會修改第一個數組的內容——第一個數組的元素後面跟着第二個數組的元素,不去掉重複項。

     6$.unique(array);刪除數組中重複元素

     7$.trim(" hello, how are you? "); 去掉字符串起始和結尾的空格

     8$.isArray(obj);測試對象是否爲數組。

     9$.isFunction(obj); 測試對象是否爲函數

   URL:

   1$.param(obj);將表單元素數組或者對象序列化。是.serialize()的核心方法。

     eg:var params = { width:1680, height:1050 }; var str = jQuery.param(params);

   2$("form").serialize() ;序列表單內容爲字符串,用於 Ajax 請求

十三、jquery操作單選框

   if($("input[type='radio']:checked")){

     var tt=$("input[name='chk']:checked").val();

}

十四、jquery操作複選框

    var chkArr="";

$(".cc:checked").each(function(){

       chkArr+=$(this).val()+"|";

});

1

十五、jquery實現複選框全選

   var checked=$("#allchk").attr("checked");

$(".ww").each(function(){

   if($(this).attr("checked")!=checked){$(this).click();}

});

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