jquery的經常使用代碼片斷

<pre name="code" class="javascript"><span style="font-size:12px;">




$(function () {//初始化     等同於 $(document).ready(function () {

     

    //$("*"):表示獲取全部對象的html

    var cp=$("*").html();

 

    //自定義一個控件元素

    $("<input>", {

        type: "text",

        val: "Test",

        focusin: function () {

            $(this).addClass("NewTest");//加入樣式

            $(this).css("background-color","yellow");//加入背景顏色

        },

        focusout: function () {

            $(this).removeClass();//移除樣式

            $(this).css("background-color", "white");//移除背景顏色

        },

        click: function () {

            alert("test");//點擊事件

        }

    }).appendTo("#div1");//追加到Id爲"div1"的元素下面s

 

    //val()： 獲取值

    //獲取某一個Id的值，等同於document.getElementById("coursePicId");

    cp = $("#coursePicId").val();

 

    //得到HTML中全部的div元素的html

    cp = $("div").html();

 

    //each(callback):循環元素的子集對象

    //循環查找樣式爲「courseBlock」的對象（index:序號；dom：對象）

    $(".courseBlock").each(function (index, dom) {

        //alert(index);

        cp = $(dom).find("input").attr("valuecopy");

        //dom和this都是對象，效果同樣

        cp = $(this).find("input").attr("valuecopy");

        //alert(cp);

    });

 

    //find：找到樣式爲「courseSummary」的子元素中爲「p」的元素,以及子元素爲「h4」的元素

    cp = $(".courseBlock").eq(0).find(".courseSummary p,.courseSummary h4").each(function (index, dom) {

        //alert($(dom).html());

    });

    //在樣式爲「courseBlock」的第一個集合中，從他的子集中找出全部的「p」元素

    cp = $(".courseBlock").eq(0).children().last().find("p").each(function (index, dom) {

        //alert($(this).text());

    });

 

    //attr("","");設置或返回被選元素的屬性值。

    //在樣式爲「courseBlock」的第二個集合中，找到input元素的屬性名爲「valuecopy」的值，並給他賦值爲「520」

    $(".courseBlock").eq(1).find("input").attr("valuecopy", "520");

    //在樣式爲「courseBlock」的第二個集合中，找到input元素的屬性名爲「valuecopy」的值

    cp = $(".courseBlock").eq(1).find("input").attr("valuecopy");

    //固然也能夠同時加幾個屬性，值，俗稱鍵值對

    cp = $(".courseBlock").eq(1).find("input").attr({ "test": "test", "alt": "Test Image" });

 

    //removeAttr(name)   從每個匹配的元素中刪除一個屬性

    //1.6如下版本在IE6使用JQuery的removeAttr方法刪除disabled是無效的。解決的方法就是使用$("XX").prop("disabled",false);

    //1.7版本在IE6下已支持刪除disabled。

    $("#btnClick").removeAttr("accter");

 

 

    //data(key) 獲取key的值

    //在html頁面div中加入屬性「data-value="hello" data-last-value="helloLast"」   就能夠直接經過鍵來獲取值了

    cp = $("#divSetData").data("value");

    cp = $("#divSetData").data("last-value");

    cp = $("#divSetData").data("options").name;

    //alert(cp);

 

    //data(key,value)

    //建一個Key爲NewFile的 Value爲File1的 臨時存儲鍵/值對

    $("#divSetData").data("NewFile", "File1");

    cp = $("#divSetData").data("NewFile");

    //alert(cp);  //結果爲File1

    //removeData(key) 移除鍵名

    $("#divSetData").removeData("NewFile");

    cp = $("#divSetData").data("NewFile");   //結果爲undefined ，是由於把NewFile鍵給移除了，找不到

 

    //prop(name|properties|key,value|fn)  獲取在匹配的元素集中的第一個元素的屬性值。在性能上高於attr(name|properties|key,value|fn)，接着高於data(key,value)

    $("input[type='checkbox']").prop({

        disabled: true    //禁用頁面上的全部複選框

    });

    $("input[type='checkbox']").prop("disabled", false);//解禁頁面上的全部複選框

    //選中複選框爲true，沒選中爲false

    var b = $("input[type='checkbox']").prop("checked");

    //將全部複選框選中

    $("input[type='checkbox']").prop("checked", true);

    $("input[type='checkbox']").prop("checked", function (i, val) {

        return !val;   //若是選中，則不選中；若是不選中，則選中

    });

    //分配鍵值，而後刪除鍵

    $("#cbTest").prop("cccc", "Acrinve");

    $("input[type='checkbox']").removeProp("newProp");

 

    //size()

    //在樣式爲「courseBlock」的第一個集合中，獲取他子集中的個數  size()和length效果同樣

    cp = $(".courseBlock").eq(0).find(".courseSummary").children().size();

    //cp = $(".courseBlock").eq(0).find(".courseSummary").children().length;

    

    //parent > child:在給定的父元素下匹配全部的子元素

    cp = $("body>.checkbox").val();

 

    //index:搜索匹配的元素，並返回相應元素的索引值，從0開始計數。

    cp = $(".courseBlock").eq(0).children().last().find("p").index($(".p3"));

 

    //:first 獲取第一個元素,:last 獲取最後個元素

    cp = $(".courseBlock").eq(0).children().last().find("p:first").html();

    cp = $(".courseBlock").eq(0).children().last().find("p:last").html();

 

    //:even 匹配全部索引值爲偶數的元素，從 0 開始計數 :odd 匹配全部索引值爲奇數的元素，從 0 開始計數

    $(".courseBlock:even").each(function (index, dom) {

        //alert($(this).html());

    });

     

    //:eq(index)  匹配一個給定索引值的元素

    cp = $(".courseBlock:eq(1)").html();

 

    //eq(index)  匹配一個給定索引值的元素

    //eq(-1)是倒數第一個，eq(-2)是倒數第二個,eq(0)是第一個

    cp = $("#bodyMain").children().eq(-1).attr("cblack");

 

    //:gt(index)  匹配全部大於給定索引值的元素 從 0 開始計數     lt(index)  匹配全部小於於給定索引值的元素 從 0 開始計數)

    cp = $(".courseBlock:gt(2)").html();

    //alert(cp);

 

    //queue：掃描全部的div元素，並一個一個的進入隊列

    $("div").queue(function () {

        //alert($(this).html());

        $(this).dequeue();//出隊列，當前元素執行完才能夠執行下一個元素

    });

    $("div").clearQueue();//清除隊列

 

    //在樣式爲「courseBlock」的第一個集合中，從他的子集中找出全部的「p」元素,而後從第三個「P」元素開始選擇，選取2個「P」元素截止

    //slice(x,y)   x表明開始選取子集的位置。第一個元素是0.若是是負數，則能夠從集合的尾部開始選起。

    //slice(x)     y表明結束選取本身的位置，若是不指定，則就是自己的結尾。

    cp = $(".courseBlock").eq(0).children().last().find("p").slice(2, 4).text();

    //相等

    cp = $(".courseBlock").eq(0).find(".courseSummary p").slice(2, 4).text();

 

    //first()：獲取第一個元素html

    cp = $("#bodyMain").children().first().html();

 

    //last()：獲取最後一個元素的html

    cp = $("#bodyMain").children().last().html();

 

    //has：判斷是否有「courseSummary」的樣式，若是有，就給背景附上紅色

    $("#bodyMain").children().first().has(".courseSummary").css("background-color", "red");

    //表示得到HTML中全部使用了abc這個樣式的元素

 

    //:animated   只有對不在執行動畫效果的元素執行一個動畫特效，固然本身能夠去掉試試，不要這個，一直點擊的話，就會不停的累積

    //stop([clearQueue],[jumpToEnd])   中止全部在指定元素上正在運行的動畫。

    $("#btnClick").click(function () {

        $("#divSetData:not(:animated)").animate({ left: "+=20" }, 1000);

    });

 

    //:contains(text) 匹配包含給定文本的元素

    cp = $("div:contains('我是')").each(function () {

        //alert($(this).html());

    });

 

    //:empty  匹配全部不包含子元素或者文本的空元素

    cp = $("div:empty").attr("propp");

 

    //:hidden 匹配全部不可見元素，或者type爲hidden的元素

    //相反  :visible   是匹配全部的可見元素  這裏就不舉例了

    cp = $("div:hidden").html();

    cp = $("input:hidden").attr("value1");

 

    //[attribute=value]  匹配給定的屬性是某個特定值的元素

    cp = $("input[name='youkown']").each(function () {

        //alert($(this).val());

    });

    //[attribute!=value] 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素。

    cp = $("input[name!='youkown']").each(function () {

        //alert($(this).val());

    });

 

    //[attribute^=value]  匹配給定的屬性是以某些值開始的元素

    cp = $("input[name^='ou']").val();

 

    //[attribute$=value]  匹配給定的屬性是以某些值結尾的元素

    cp = $("input[name$='s']").val();

 

    //[attribute*=value]  匹配給定的屬性是以包含某些值的元素

    cp = $("input[name*='sk']").val();

 

    //[selector1][selector2][selectorN]  複合屬性選擇器，須要同時知足多個條件時使用。

    //$("input[id][name$='man']")

 

    //:selected  匹配全部選中的option元素

    cp = $("select option:selected").text();

    //手動添加一個選項進去，而後再循環顯示

    var option = "<option value='4'>White</option>";

    $("#Select").append(option);

    $("#Select").children().each(function (index,dom) {

        var text=$(this).text();

        var value = $(this).val();

        //alert(text + "-" + value);

    });

 

    //addClass(class|fn)  爲每一個匹配的元素添加指定的類名。

    //removeClass([class|fn])   從全部匹配的元素中刪除所有或者指定的類。

    $("#Select").addClass("select");

    $("#Select").removeClass("select");

 

    //toggleClass(class|fn[,sw])   若是存在這個樣式就刪除這個樣式，若是不存樣式，就添加這個樣式。

    $("#Select").toggleClass("select");

 

    //hasClass(class) //檢查當前的元素是否含有某個特定的類，若是有，則返回true。這其實就是 is("." + class)。

    cp = $("#Select").hasClass("select");

    //is(expr|obj|ele|fn)   根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合，若是其中至少有一個元素符合這個給定的表達式就返回true。

    cp = $("#Select").is(".select");

 

 

    //map()和each()二者的區別

    //map()方法主要用來遍歷操做數組和對象，each()主要用於遍歷jquery對象。

    //each()返回的是原來的數組，並不會新建立一個數組。

    //map()方法會返回一個新的數組。若是在沒有必要的狀況下使用map，則有可能形成內存浪費。

    cp=$("input").map(function () {

        return $(this).val();

    }).get().join("|");

      

    //next() : 取得一個包含匹配的元素集合中每個元素緊鄰的後面同輩元素的元素集合。 還有nextAll()  查找當前元素以後全部的同輩元素

    //get(index)  取集合的index元素，返回的是dom對象，因此無法用JQuery對象

    //dom對象和JQuery對象的區別：var cr=document.getElementById("cr"); //dom對象,Js固有的一組對象

    //                           var cr = $("#cr"); //轉換成jquery對象

    //jquery提供了兩種方法將一個jquery對象轉換成一個dom對象，即[index]和get(index)

    cp = $("#TextControl").next().get(0).innerHTML;

    //prev():取得一個包含匹配的元素集合中每個元素緊鄰的前一個同輩元素的元素集合。 還有prevAll()   查找當前元素以前全部的同輩元素

    cp = $("#TextControl").prev().get(0).value;

 

    //siblings()  取得一個包含匹配的元素集合中每個元素的全部惟一同輩元素的元素集合。能夠用可選的表達式進行篩選。

    $(".courseBlock").eq(0).children().last().find("p:last").siblings().each(function (index, dom) {

        //console.log($(dom).html());

    });

 

    //andSelf()  加入先前所選的加入當前元素中,包括本身

    $("#Select").find("option").andSelf().addClass("border");

 

    //appendTo(content)  把全部匹配的元素追加到另外一個指定的元素元素集合中。

    //A.appendTo(B)和A.append(B)的區別在於：appendTo是將A的內容追加到B元素中去，而append是將B的內容添加到A元素中去

    var content = "<code>我是代碼</code>";

    $(content).appendTo("#divSetData");

 

    //after(content|fn)  在每一個匹配的元素以後插入內容。

    //insertAfter(content)  把全部匹配的元素插入到另外一個、指定的元素元素集合的後面。

    $("#NewDiv").after(content);

    $(content).insertAfter("#NewDiv");

 

    //before(content|fn)  在每一個匹配的元素以前插入內容。

    //insertBefore(content)  把全部匹配的元素插入到另外一個、指定的元素元素集合的前面。

    $("#NewDiv").before(content);

    $(content).insertBefore("#NewDiv");

 

    //wrap(html|ele|fn)   把全部匹配的元素用其餘元素的結構化標記包裹起來。

    content = "<div class='wrap'></div>";

    $("#NewDiv").wrap(content);

 

    //unwrap()  這個方法將移出元素的父元素

    //$("#NewDiv").unwrap();

 

    //wrapInner(htm|ele|fnl)  將內容包裹在元素裏面

    $("#NewDiv").wrapInner(content);

 

    //clone([Even[,deepEven]]) 克隆匹配的DOM元素而且選中這些克隆的副本。

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

    $("#NewBtn").click(function () {

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

    });

 

    //remove([expr])   從DOM中刪除全部匹配的元素,包括本身。

    $("#OldDiv").remove();

    $("input").remove(".btnClass");//從DOM中刪除匹配內容的元素

 

    //replaceWith(content|fn)   將全部匹配的元素替換成指定的HTML或DOM元素。

    $("#NewDiv").replaceWith("<div class='ccc'></div>");

 

    //empty() 清空匹配的元素集合中全部的子節點。

    $("#NewDiv").empty();

 

    //offset([coordinates])   獲取匹配元素在當前視口的相對偏移。

    $("#NewBtn").offset({ top: 50, left: 60 });

    console.log($("#NewBtn").offset().top);

    console.log($("#NewBtn").offset().left);

 

    //position() 獲取匹配元素相對父元素的偏移。

    console.log($("#NewBtn").position().top);

    console.log($("#NewBtn").position().left);

    console.log(cp);

 

    //width([val|fn])  設置或獲取寬度   

    //height([val | fn])   設置或獲取高度   

    $("#NewBtn").width(100);

    $("#NewBtn").height(100);

     

    //bind(type,[data],fn)    爲每一個匹配元素的特定事件綁定事件處理函數。

    $("#BindBtn").bind({

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

        mouseover: function () { $("body").css("background-color", "Blue"); },

        mouseout: function () { $("body").css("background-color", "#FFFFFF"); }

    });

    //unbind(type,[data|fn]])   bind()的反向操做，從每個匹配的元素中刪除綁定的事件。

    //$("#BindBtn").unbind("click")

 

    //one(type, [data], fn)  爲每個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。

    $("#OneBtn").one("click", function () {

        alert($(this).val());

    });

 

    //change([[data],fn])  觸發每一個匹配元素的change事件

    $("input[type='text']").change(function () {

        console.log($(this).val());

    });

 

    //focus([[data],fn])  觸發每個匹配元素的focus事件。  

    //$("input[type=text]").focus(function () {

    //    this.blur();  //令人沒法使用文本框

    //});

 

    //toggle([speed],[easing],[fn])  若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的。

    //用於肯定顯示 / 隱藏的開關。如：true - 顯示元素，false - 隱藏元素

    $("#BtnShowHide").click(function () {

        $("#Poor").toggle(1000);

    });

     

    //slideToggle([speed],[easing],[fn])    經過高度變化來切換全部匹配元素的可見性，並在切換完成後可選地觸發一個回調函數。

    //slideDown([speed],[easing],[fn])  經過高度變化（向下增大）來動態地顯示全部匹配的元素

    //slideUp([speed,[easing],[fn]])   經過高度變化（向上減少）來動態地隱藏全部匹配的元素

    $("#BtnSlide").click(function () {

        $("#Poor").slideToggle("slow", "linear");

    });

 

    //fadeToggle([speed,[easing],[fn]])   經過不透明度的變化來開關全部匹配元素的淡入和淡出效果

    //fadeIn([speed],[easing],[fn])    經過不透明度的變化來實現全部匹配元素的淡入效果(顯示)

    //fadeOut([speed],[easing],[fn])   經過不透明度的變化來實現全部匹配元素的淡出效果(隱藏)

    $("#BtnFad").click(function () {  

        $("#Poor").fadeToggle("slow");

    });

 

    

    

 

    //delay(duration,[queueName])   設置一個延時來推遲執行隊列中以後的項目。

    $("#BtnDelay").click(function () {

        $("#Poor").slideUp(1000).delay(1000).fadeIn(1000);

    });

     

    //jQuery.ajax(url,[settings])    經過 HTTP 請求加載遠程數據。

    $.ajax({

        type: "post",//get,post 

        url: "xxx.asp",

        data: {

            id:1

        },

        dataType: "html",//預期服務器返回的數據類型

        async: true,//異步請求

        success: function (data) {

 

        }

    });

 

    //jQuery.each(object, [callback])

    //通用例遍方法，可用於例遍對象和數組。

    //不一樣於例遍 jQuery 對象的 $().each() 方法，此方法可用於例遍任何對象。

    //回調函數擁有兩個參數：第一個爲對象的成員或數組的索引，第二個爲對應變量或內容。

    //若是須要退出 each 循環可以使回調函數返回 false，其它返回值將被忽略。

    $.each([1, 2, 3], function (i, n) {

        console.log("key:" + i + "  " + "value:" + n);

    });

    $.each({ name: "流", age: 15 }, function (i, n) {

        console.log("key:" + i + "  " + "value:" + n);

    });

 

    //jQuery.type(obj)    檢測obj的數據類型。

    console.log($.type(3));

    //jQuery.isNumeric(value)  肯定它的參數是不是一個數字。

    console.log($.isNumeric("-10"));

    //jQuery.trim(str)   去掉字符串起始和結尾的空格。

    var c = "  hello, how are you?  ";

    console.log($.trim(c));

    //jQuery.merge(first,second)  合併兩個數組，但不會去除重複元素

    console.log($.merge([0, 1, 2], [2, 3, 4]));

    //jQuery.unique(array)   刪除數組中重複元素。只處理刪除DOM元素數組，而不能處理字符串或者數字數組。

    console.log($.unique([0, 1, 2, 2, 3, 3, 4]).reverse());

 

    //jQuery.parseJSON(json)  接受一個JSON字符串，返回解析後的對象。

    //若是你什麼都不傳入，或者一個空字符串、null或undefined，parseJSON都會返回 null 。

    var jsonObj = $.parseJSON('{"name":"陳鋒","age":"16"}');

    console.log(jsonObj.name + "今年：" + jsonObj.age);

 

    //jQuery.proxy(function,context)

    //這個函數還有另外一種用法，jQuery.proxy( scope, name )

    //第一個參數是要設定的做用域對象。第二個參數是將要設置做用域的函數名（必須是第一個做用域對象的一個屬性）

    var obj = {

        name: "王一鳴",

        age: 15,

        sleep: function () {

            console.log(obj.name + "今年：" + obj.age);

        }

    };

    $.proxy(obj, obj.sleep());

 

 

    var add=EnumList.method.add; //獲取add的值1

});

 

//定義JS枚舉類型

var EnumList = {

    /*

    **method枚舉類型

    */

    method: {

        add: 1,

        update: 2,

        del: 3

    }

};</span></pre>







-------------------------------------------

參考資料：

1.http://blog.csdn.net/smartsmile2012/article/list/2