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