disable lds size fault solid ajax msg hid 添加

JQuery Ajax 方法說明:

• load( url, [data], [callback] ) 裝入一個遠程HTML內容到一個DOM結點。
• $(”#feeds”).load(”feeds.html”); 將feeds.html文件載入到id為feeds的div中

$(”#feeds”).load(”feeds.PHP”, {limit: 25}, function(){
    alert(”The last 25 entries in the feed have been loaded”);
});

• jQuery.get( url, [data], [callback] ) 使用GET請求一個頁面。

$.get(”test.cgi”, { name: “John”, time: “2pm” }, function(data){
    alert(”Data Loaded: ” + data);
});

　　

• jQuery.getJSON( url, [data], [callback] ) 使用GET請求JSON數據。

$.getJSON(”test.js”, { name: “John”, time: “2pm” }, function(json){
    alert(”JSON Data: ” + json.users[3].name);
});

　　

• jQuery.getScript( url, [callback] ) 使用GET請求JavaScript文件並執行。

$.getScript(”test.js”, function(){
    alert(”Script loaded and executed.”);
});

　　

• jQuery.post( url, [data], [callback], [type] ) 使用POST請求一個頁面。

• ajaxComplete( callback ) 當一個AJAX請求結束後，執行一個函數。這是一個Ajax事件

$(”#msg”).ajaxComplete(function(request, settings){
    $(this).append(”<li>Request Complete.</li>”);
});

　　

• ajaxError( callback ) 當一個AJAX請求失敗後，執行一個函數。這是一個Ajax事件

$(”#msg”).ajaxError(function(request, settings){
    $(this).append(”<li>Error requesting page ” + settings.url + “</li>”);
});

　　

• ajaxSend( callback ) 在一個AJAX請求發送時，執行一個函數。這是一個Ajax事件

$(”#msg”).ajaxSend(function(evt, request, settings){
    $(this).append(”<li<Starting request at ” + settings.url + “</li<”);
});

　　

• ajaxStart( callback ) 在一個AJAX請求開始但還沒有激活時，執行一個函數。這是一個Ajax事件

當AJAX請求開始(並還沒有激活時)顯示loading信息

$(”#loading”).ajaxStart(function(){
    $(this).show();
});

　　

• ajaxStop( callback ) 當所有的AJAX都停止時，執行一個函數。這是一個Ajax事件

當所有AJAX請求都停止時，隱藏loading信息。

$(”#loading”).ajaxStop(function(){
    $(this).hide();
});

　　

• ajaxSuccess( callback ) 當一個AJAX請求成功完成後，執行一個函數。這是一個Ajax事件

當AJAX請求成功完成時，顯示信息。

$(”#msg”).ajaxSuccess(function(evt, request, settings){
    $(this).append(”<li>Successful Request!</li>”);
});

　　

• jQuery.ajaxSetup( options ) 為所有的AJAX請求進行全局設置。查看$.ajax函數取得所有選項信息。

設置默認的全局AJAX請求選項。

$.ajaxSetup({
    url: “/xmlhttp/”,
    global: false,
    type: “POST”
});
$.ajax({ data: myData });

　　

• serialize( ) 以名稱和值的方式連接一組input元素。實現了正確表單元素序列

function showValues() {
    var str = $(”form”).serialize();
    $(”#results”).text(str);
}
$(”:checkbox, :radio”).click(showValues);
$(”select”).change(showValues);
showValues()

　　

• serializeArray( ) 連接所有的表單和表單元素(類似於.serialize()方法)，但是返回一個JSON數據格式。

從form中取得一組值，顯示出來

function showValues() {
    var fields = $(”:input”).serializeArray();
    alert(fields);
    $(”#results”).empty();
    jQuery.each(fields, function(i, field){
        $(”#results”).append(field.value + ” “);
    });
}
$(”:checkbox, :radio”).click(showValues);
$(”select”).change(showValues);
showValues();    

JQuery Effects 方法說明

• show( ) 顯示隱藏的匹配元素。
• show( speed, [callback] ) 以優雅的動畫顯示所有匹配的元素，並在顯示完成後可選地觸發一個回調函數。
• hide( ) 隱藏所有的匹配元素。
• hide( speed, [callback] ) 以優雅的動畫隱藏所有匹配的元素，並在顯示完成後可選地觸發一個回調函數
• toggle( ) 切換元素的可見狀態。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
• slideDown( speed, [callback] ) 通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成後可選地觸發一個回調函數。這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來。
• slideUp( speed, [callback] ) 通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成後可選地觸發一個回調函數。這個動畫 效果只調整元素的高度，可以使匹配的元素以”滑動”的方式隱藏起來。
• slideToggle( speed, [callback] ) 通過高度變化來切換所有匹配元素的可見性，並在切換完成後可選地觸發一個回調函數。 這個動畫效果只調整元素的高度，可以使匹配的元素以”滑動”的方式隱藏或顯示。
• fadeIn( speed, [callback] ) 通過不透明度的變化來實現所有匹配元素的淡入效果，並在動畫完成後可選地觸發一個回調函數。 這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。
• fadeOut( speed, [callback] ) 通過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。 這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。
• fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選地觸發一個回調函數。 這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不發生變化。
• stop( ) 停止所有匹配元素當前正在運行的動畫。如果有動畫處於隊列當中，他們就會立即開始。
• queue( ) 取得第一個匹配元素的動畫序列的引用(返回一個內容為函數的數組)
• queue( callback ) 在每一個匹配元素的事件序列的末尾添加一個可執行函數，作為此元素的事件函數
• queue( queue ) 以一個新的動畫序列代替所有匹配元素的原動畫序列
• dequeue( ) 執行並移除動畫序列前端的動畫
• animate( params, [duration], [easing], [callback] ) 用於創建自定義動畫的函數。
• animate( params, options ) 創 建自定義動畫的另一個方法。作用同上。

JQuery Traversing 方法說明

• eq( index ) 從匹配的元素集合中取得一個指定位置的元素，index從0開始
• filter( expr ) 返回與指定表達式匹配的元素集合，可以使用”,”號分割多個expr，用於實現多個條件篩選
• filter( fn ) 利用一個特殊的函數來作為篩選條件移除集合中不匹配的元素。
• is( expr ) 用一個表達式來檢查當前選擇的元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。
• map( callback ) 將jQuery對象中的一組元素利用callback方法轉換其值，然後添加到一個jQuery數組中。
• not( expr ) 從匹配的元素集合中刪除與指定的表達式匹配的元素。
• slice( start, [end] ) 從匹配元素集合中取得一個子集，和內建的數組的slice方法相同。
• add( expr ) 把與表達式匹配的元素添加到jQuery對象中。
• children( [expr] ) 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。可選的過濾器將使這個方法只匹配符合的元素(只包括元素節點，不包括文本節點)。
• contents( ) 取得一個包含匹配的元素集合中每一個元素的所有子孫節點的集合(只包括元素節點，不包括文本節點)，如果元素為iframe，則取得其中的文檔元素
• find( expr ) 搜索所有與指定表達式匹配的元素。
• next( [expr] ) 取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。
• nextAll( [expr] ) 取得一個包含匹配的元素集合中每一個元素所有的後面同輩元素的元素集合
• parent( [expr] ) 取得一個包含著所有匹配元素的唯一父元素的元素集合。
• parents( [expr] ) 取得一個包含著所有匹配元素的唯一祖先元素的元素集合（不包含根元素）。
• prev( [expr] ) 取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。
• prevAll( [expr] ) 取得一個包含匹配的元素集合中每一個元素的之前所有同輩元素的元素集合。
• siblings( [expr] ) 取得一個包含匹配的元素集合中每一個元素的所有同輩元素的元素集合。
• andSelf( ) 將前一個匹配的元素集合添加到當前的集合中取得所有div元素和其中的p元素，添加border類屬性。取得所有div元素中的p元素，添background類屬

$(”div”).find(”p”).andSelf().addClass(”border”);
$(”div”).find(”p”).addClass(”background”);

• end( ) 結束當前的操作，回到當前操作的前一個操作找到所有p元素其中的span元素集合，然後返回p元素集合，添加css屬性

$(”p”).find(”span”).end().css(”border”, “2px red solid”);

　　

JQuery Selectors 方法說明 基本選擇器

• $(”#myDiv”) 匹配唯一的具有此id值的元素
• $(”div”) 匹配指定名稱的所有元素
• $(”.myClass”) 匹配具有此class樣式值的所有元素
• $(”*”) 匹配所有元素
• $(”div,span,p.myClass”) 聯合所有匹配的選擇器

層疊選擇器

• $(”form input”) 後代選擇器，選擇ancestor的所有子孫節點
• $(”#main > *”) 子選擇器，選擇parent的所有子節點
• $(”label + input”) 臨選擇器，選擇prev的下一個臨節點
• $(”#prev ~ div”) 同胞選擇器，選擇prev的所有同胞節點

基本過濾選擇器

• $(”tr:first”) 匹配第一個選擇的元素
• $(”tr:last”) 匹配最後一個選擇的元素
• $(”input:not(:checked) + span”) 從原元素集合中過濾掉匹配selector的所有元素（這裏有是一個臨選擇器）
• $(”tr:even”) 匹配集合中偶數位置的所有元素(從0開始)
• $(”tr:odd”) 匹配集合中奇數位置的所有元素(從0開始)
• $(”td:eq(2)”) 匹配集合中指定位置的元素(從0開始)
• $(”td:gt(4)”) 匹配集合中指定位置之後的所有元素(從0開始)
• $(”td:gl(4)”) 匹配集合中指定位置之前的所有元素(從0開始)
• $(”:header”) 匹配所有標題
• $(”div:animated”) 匹配所有正在運行動畫的所有元素

內容過濾選擇器

• $(”div:contains(’John’)”) 匹配含有指定文本的所有元素
• $(”td:empty”) 匹配所有空元素(只含有文本的元素不算空元素)
• $(”div:has(p)”) 從原元素集合中再次匹配所有至少含有一個selector的所有元素
• $(”td:parent”) 匹配所有不為空的元素(含有文本的元素也算)
• $(”div:hidden”) 匹配所有隱藏的元素，也包括表單的隱藏域
• $(”div:visible”) 匹配所有可見的元素

屬性過濾選擇器

• $(”div[id]”) 匹配所有具有指定屬性的元素
• $(”input[name=’newsletter’]”) 匹配所有具有指定屬性值的元素
• $(”input[name!=’newsletter’]”) 匹配所有不具有指定屬性值的元素
• $(”input[name^=’news’]”) 匹配所有指定屬性值以value開頭的元素
• $(”input[name$=’letter’]”) 匹配所有指定屬性值以value結尾的元素
• $(”input[name*=’man’]”) 匹配所有指定屬性值含有value字符的元素
• $(”input[id][name$=’man’]”) 匹配同時符合多個選擇器的所有元素

子元素過濾選擇器

• $(”ul li:nth-child(2)”),
• $(”ul li:nth-child(odd)”), 匹配父元素的第n個子元素
• $(”ul li:nth-child(3n + 1)”)
• $(”div span:first-child”) 匹配父元素的第1個子元素
• $(”div span:last-child”) 匹配父元素的最後1個子元素
• $(”div button:only-child”) 匹配父元素的唯一1個子元素

表單元素選擇器

• $(”:input”) 匹配所有的表單輸入元素，包括所有類型的input, textarea, select 和 button
• $(”:text”) 匹配所有類型為text的input元素
• $(”:password”) 匹配所有類型為password的input元素
• $(”:radio”) 匹配所有類型為radio的input元素
• $(”:checkbox”) 匹配所有類型為checkbox的input元素
• $(”:submit”) 匹配所有類型為submit的input元素
• $(”:image”) 匹配所有類型為image的input元素
• $(”:reset”) 匹配所有類型為reset的input元素
• $(”:button”) 匹配所有類型為button的input元素
• $(”:file”) 匹配所有類型為file的input元素
• $(”:hidden”) 匹配所有類型為hidden的input元素或表單的隱藏域

表單元素過濾選擇器

• $(”:enabled”) 匹配所有可操作的表單元素
• $(”:disabled”) 匹配所有不可操作的表單元素
• $(”:checked”) 匹配所有已點選的元素
• $(”select option:selected”) 匹配所有已選擇的元素

JQuery CSS 方法說明

• css( name ) 訪問第一個匹配元素的樣式屬性。
• css( properties ) 把一個”名/值對”對象設置為所有匹配元素的樣式屬性。

$(”p”).hover(function () {
    $(this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });
}, function () {
    var cssObj = {
    backgroundColor: “#ddd”,
    fontWeight: “”,
    color: “rgb(0,40,244)”
}
    $(this).css(cssObj);
});

　　

• css( name, value ) 在所有匹配的元素中，設置一個樣式屬性的值。
• offset( ) 取得匹配的第一個元素相對於當前可視窗口的位置。返回的對象有2個屬性，

top和left，屬性值為整數。這個函數只能用於可見元素。

var p = $(”p:last”);
var offset = p.offset();
p.html( “left: ” + offset.left + “, top: ” + offset.top );

　　

• width( ) 取得當前第一匹配的元素的寬度值，
• width( val ) 為每個匹配的元素設置指定的寬度值。
• height( ) 取得當前第一匹配的元素的高度值，
• height( val ) 為每個匹配的元素設置指定的高度值。

JQuery Utilities 方法說明

• jQuery.browser

1. .msie 表示ie
2. jQuery.browser.version 讀取用戶瀏覽器的版本信息
3. jQuery.boxModel 檢測用戶瀏覽器針對當前頁的顯示是否基於w3c CSS的盒模型
4. jQuery.isFunction( obj ) 檢測傳遞的參數是否為function

function stub() { }
var objs = [
function () {},
{ x:15, y:20 },
null,
stub,
“function”
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$(”span:eq( ” + i + “)”).text(isFunc);
});

　　

• jQuery.trim( str ) 清除字符串兩端的空格，使用正則表達式來清除給定字符兩端的空格
• jQuery.each( object, callback ) 一個通用的叠代器，可以用來無縫叠代對象和數組
• jQuery.extend( target, object1, [objectN] ) 擴展一個對象，修改原來的對象並返回，這是一個強大的實現繼承的

工具，這種繼承是采用傳值的方法來實現的，而不是JavaScript中的 原型鏈方式。 合並settings和options對象，返回修改後的settings對象

var settings = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
jQuery.extend(settings, options);

　　

合並defaults和options對象，defaults對象並沒有被修改。options對象中的值 代替了defaults對象的值傳遞給了empty。

var empty = {}
var defaults = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
var settings = $.extend(empty, defaults, options);

　　

• jQuery.grep( array, callback, [invert] ) 通過一個篩選函數來去除數組中的項

$.grep( [0,1,2], function(n,i){
return n > 0;
});

　　

• jQuery.makeArray( obj ) 將一個類似數組的對象轉化為一個真正的數組

將選取的div元素集合轉化為一個數組

var arr = jQuery.makeArray(document.getElementsByTagName(”div”));
arr.reverse(); // use an Array method on list of dom elements
$(arr).appendTo(document.body);

　　

• jQuery.map( array, callback ) 使用某個方法修改一個數組中的項，然後返回一個新的數組
• jQuery.inArray( value, array ) 返回value在數組中的位置，如果沒有找到，則返回-1
• jQuery.unique( array ) 刪除數組中的所有重復元素，返回整理後的數組

jquery常用方法______(下篇)