Jquery總結（二）

 9、效果

  基本：

    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 );用於建立自定義動畫的函數。

10、事件

   事件處理：

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

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

   3、trigger(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事件中綁定一個處理函數

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

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

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

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

   7、dblclick()；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事件中綁定一個處理函數。

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

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

   13、keypress()；觸發每個匹配元素的keypress事件

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

   15、keyup()；觸發每個匹配元素的keyup事件

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

   17、mousedown();

   18、mouseup();

   19、mousemove();

   20、mouseover();

   21、mouseout();

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

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

11、ajax

      ajax請求：

       1、通有方式：$.ajax(prop);prop是一個hash表，它能夠傳遞的key/value有如下幾種:

         (String)type：數據傳遞方式(get或post)。

         ((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

12、工具類

數組和對象操做：

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

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

     2、jQuery.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 請求

十3、jquery操做單選框

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

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

}

十4、jquery操做複選框

    var chkArr="";

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

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

});

1

十5、jquery實現複選框全選

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

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

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

});