jquery常用基本用法，让你爱上它！

---------------基础语法---------

添加一个下属节点
var $h=$("<p>第一段文字</p>");
$("#h11").append($h);

添加一个样式
$("li").addClass("normalStyle"); 

添加一个属性
$("li").css("color","blue");

移除id为tr1的第二个表框
$("#tr1 td:eq(1)").remove();

克隆一个按钮并显示在id为tr1的元素后面
    $("#btn").click(function(){
        $(this).clone().insertAfter($("#tr1"));
    });

设置id为key的 属性
$("#key").attr("color","#ccc");


点击以动画出现 toggle 表示它下面的方法依次调用
$(function(){
    $("h2").toggle(function(){
        $(this).next("p").slideUp();
    },function(){
        $(this).next("p").slideDown();
    });    
});
<h2>点击出现下面</h2>
<p style=" height:60px; background:#faa; border:solid 1px #d00;">一段文字</p>


# ////////////////////////////////////////////////////////////////////////////////  
# //                               目        录                                 //  
# //                                                                            //  
# // 1: 核心部分                                                                //  
# // 2: DOM操作                                                                 //  
# // 3: css操作                                                                 //  
# // 4: javascript处理                                                          //  
# // 5: 动态效果                                                                //  
# // 6: event事件                                                               //  
# // 7: ajax支持                                                                //  
# //                                                                            //  
# ////////////////////////////////////////////////////////////////////////////////  
#   
#   
# ////////////////////////////////////////////////////////////////////////////////  
# //                               一：核心部分                                 //  
# ////////////////////////////////////////////////////////////////////////////////  
#   
# /** (1) 
#  * $() 
#  * 运行：点击文档中所有a标签时将弹出对话框 
#  * 说明：$("a") 是一个jQuery选择器；$本身表示一个jQuery类，所有$()是构造一个 jQuery对象； 
#  *       click() 是这个对象的方法。同理$ (document)也是一个jQuery对象，ready(fn)是$(document)的方法， 
#  *       表示当document全部下载完毕时执行函数。 
#  */  
# /* 
#   $(document).ready(function(){ 
#           // do something here 
#         $("a").click(function() { 
#         alert("Hello world!"); 
#         }); 
#  
# }); 
# */  
#   
# /** (2) 
#  *  html() 
#  *  运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容 
#  */   
# /* 
#         function jq(){   
#         alert($("div > p").html());   
#         } 
# */  
#           
# /** (3)  
#  *  appendTo()  
#  *  运行：当点击id为test的元素时，向body中添加“<div><p>Hello</p>< /div>”  
#  */   
# /* 
#         function jq(){ 
#         $("<div><p>Hello</p></div>").appendTo("body"); 
#         } 
# */  
#           
# /** (4) 
#  * css() 
#  * 运行：当点击id为test的元素时，背景色变成黑色 
#  * 说明：原文为$(document.body).background("black"); 在 jQuery1.2及以上版本中,@符号应该去除,background方法被css方法取代 
#  */   
# /* 
#         function jq(){ 
#         $(document.body).css("background-color","black"); 
#         } 
# */  
#   
#  /** (5) 
#   * $(elems) 
#   * 运行：当点击id为test的元素时，隐藏form1表单中的所有元素。 
#   * 说明：限制jQuery作用于一组特定的DOM元素 
#   * 参数： elem：一组通过jQuery对象压缩的DOM元素 
#   */  
#   /*  
#   function jq(){  
#    $(form1.elements ).hide();  
# }  
# */  
#   
# /** (6) 
#  * $(obj) 
#  * 运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容。 
#  * 说明：复制一个jQuery对象 
#  */  
#  /* 
#  function jq(){ 
#     var f = $("div"); 
#     alert($(f).find("p").html()); 
# } 
# */  
#   
# /** (7) 
#  * each(fn) 
#  * 运行：当点击id为test的元素时，img标签的src都变成了2.jpg 
#  * 说明：将函数作用于所有匹配的对象上 
#  */  
#  /* 
#  function jq(){ 
#    $("img").each(function(){ 
#         this.src = "http://news.xinhuanet.com/ent/2006-08/23/xinsrc_592080323084167412218.jpg"; }); 
# } 
# */  
#   
# /** (8) 
#  * get(num) 
#  * 运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个<p> 标签的内容 
#  * 说明：获取匹配元素，get(num)返回匹配元素中的某一个元素 
#  * 参数：get (Number): 期望限制的索引，从0 开始 
#  * 注意：get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$("p").eq(1)对象的内容用jQuery方法html()，而取$("p").get(1)的内容用innerHTML 
#  */  
#  /*  
#  function jq(){  
#     alert($("p").get(1).innerHTML);  
# }  
# */  
#   
# /** (9) 
#  * eq(pos) 
#  * 运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个<p> 标签的内 
#  * 说明：减少匹配对象到一个单独的dom元素 
#  * 参数：pos (Number): 期望限制的索引，从0 开始 
#  * 注意：get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$("p").eq(1)对象的内容用jQuery方法html()，而取$("p").get(1)的内容用innerHTML 
#  */  
#  /* 
#  function jq(){ 
#     alert($("p").eq(1).html()) 
# } 
# */  
#   
# /** (10) 
#  * index(obj) 
#  * 运行：当点击id为test的元素时，两次弹出alert对话框分别显示0，1 
#  * 说明：返回对象索引 
#  * 参数：obj (Object): 要查找的对象 
#  */  
#  /* 
#  function jq(){ 
#     alert($("div").index(document.getElementById('test1'))); 
#     alert($("div").index(document.getElementById('test2'))); 
# } 
# */  
#   
# /** (11) 
#  * size()或Length 
#  * 运行：当点击id为test的元素时，弹出alert对话框显示2，表示找到两个匹配对象 
#  * 说明：当前匹配对象的数量，两者等价 
#  */  
# /* 
#  function jq(){ 
#     //alert($("img").length); 
#     alert($("img").size()); 
# } 
# */  
#   
#   
# ////////////////////////////////////////////////////////////////////////////////  
# //                               二：DOM操作                                  //  
# ////////////////////////////////////////////////////////////////////////////////  
# /** (1) 
#  *  attr("属性名")或attr("属性名","属性值") 
#  *  运行：先弹出对话框显示id为test的连接url(1.html)，在将其url改为2.html，当弹出对话框后会看到转向到2.html 
#  *  说明： jquery自1.2.3版本取消了直接的href等相关操作属性的方法，只能使用attr方式。包括src属性等 
#  */  
#  /* 
# function jq(){ 
#    alert($("#test").attr("href")); 
#    $("#test").attr("href","2.html"); 
# } 
# */  
#   
# /** (2) 
#  *  after("html代码") 
#  *  运行：在匹配元素后插入一段 html <b>Hello</b>；<a href="http://yijianfengvip.blog.163.com/blog/#" id="test" onClick="jq()"& gt;jQuery</a><b>Hello</b> 
#  *  说明：执行完后在界面可看见执行效果 
#  */  
#  /* 
#  function jq(){ 
#        $("#test").after("<b>Hello</b>"); 
# } 
# */  
# /** (3) 
#  *  after(elem)或after(elems) 
#  *  运行：将指定对象elem或对象组elems插入到在匹配元素后 
#  *  说明：执行后相当于  <a href="http://yijianfengvip.blog.163.com/blog/#" onClick="jq()">jQuery& lt;/a><p id="test">after</p> 
#  */  
# /*  
#   function jq(){  
#      $("#test").after($("#hello"));  
# }  
# */  
#   
# /** (4) 
#  *  append(html) 
#  *  运行：在匹配元素内部，且末尾插入指定html 
#  *  说明：同理还有 append(elem)  append(elems) before(html) before(elem) before(elems)请执行参照 append和after的方来测试、理解！ 
#  */  
#  /* 
#  function jq(){ 
#      $("#test").append("<b>Hello</b>"); 
# } 
# */  
# /** (5) 
#  * appendTo(html) 
#  * 运行：在匹配元素内部，且末尾插入指定html 
#  * 说明：appendTo()与append() 正好相反 
#  */  
#  /* 
# function jq(){ 
#       $("<b>Hello</b>").appendTo($("#test")); 
# } 
# */  
# /** (6) 
#  * appendTo(html) 
#  * 运行：复制一个id为hello的对象并且放在id为test的元素内部未尾 
#  * 说明：原元素无保持无变化 
#  */  
#  /*  
# function jq(){  
#      $("#hello").clone().appendTo($("#test"));  
# }  
# */  
# /** (7) 
#  * empty() 
#  * 运行：删除匹配对象的所有子节点 
#  */  
#  /* 
# function jq(){ 
#     $("#delete").empty(); 
# } 
# */  
# /** (8) 
#  * prepend(elem/elems/html) 
#  * 运行：在匹配元素的内部且开始处插入 
#  * 说明：比较：append(elem),appendTo(expr),prepend(elem) ,append在匹配元素内部结束处插入,appendTo 与append匹配相反 
#  */  
#  /* 
#  function jq(){ 
#     $ ("#delete").prepend($("#test1")) 
#     alert($ ("#delete").html()); 
# } 
# */  
# /** (8) 
#  * after(elem) 
#  * 运行：在匹配元素的外部后面开始插入 
#  * 说明：比较：before(elem)在匹配元素的外部前面开始插入,insertAfter(elem)与 after相反匹配,insertBefore(elem)与before匹配相反 
#  */  
#  /*  
# function jq(){  
#     $ ("#delete").before($("#test1"))  
# }  
# */  
# /** (9) 
#  * remove() 
#  * 运行：移除匹配对象 
#  * 说明：注意区分empty()，empty()移出匹配对象的子节点，remove()，移出匹配对象 
#  */  
#  /* 
#  function jq(){ 
#     $ ("#delete").remove(); 
# } 
# */  
# /**(10) 
#  * wrap(htm) 
#  * 运行：将匹配对象包含在给出的html代码内 
#  * 说明：wrap(elem) 将匹配对象包含在给出的对象内(只是一种包装，原对象不变) 
#  */  
#  /* 
#  function jq(){ 
#     //$("#delete").wrap("<b></b>"); 
#     $("#delete").wrap($("#content")); 
# } 
# */  
# /**(11) 
#  *  add(el) 
#  *  运行：在匹配对象的基础上在附加指定的dom元素 
#  *  说明：add(els)在匹配对象的基础上在附加指定的一组对象，els是一个数组 
#  */  
# /* 
# function jq(){ 
#      var f=$("p").add("b"); 
#      //var f=$("p").add([document.getElementById("a"), document.getElementById("b")]) 
#      for(var i=0;i < $(f).size();i++){ 
#      alert($(f).eq(i).html());} 
# } 
# */  
# /**(12) 
#  * parents() 
#  * 运行：一依次以匹配结点的父节点的内容为对象,一般一个文档还有<body> 和<html>，依次类推下去 
#  * 说明：parents(expr)在parents()的基础上之取符合表达式的对象 
#  * 注意：新版本中取代老版本的ancestors() 
#  */  
#  /* 
#  function jq(){ 
#      var f= $("span").parents(); 
#      for(var i=0;i < $(f).size();i++){ 
#       alert($(f).eq(i).html());} 
# } 
# */  
#   
# /** (13)  
#  * children()  
#  * 运行：返回匹配对象的所有子结点  
#  * 说明：children(expr)返回匹配对象的子介点中符合表达式的节点,与之对应的有parent()和parent(expr)  
#  */  
#    
#  /* 
#  function jq(){ 
#     //alert($("#delete").children("span").html()); 
#     alert($("#delete").children().html()); 
# } 
# */  
#   
# /** (14) 
#  *  contains( String text ) returns Array<Element> 
#  *  运行：匹配元素根据提供的test 
#  *  说明：contents( ) returns jQuery 
#  */  
#  /* 
# function jq(){ 
#     //$("p:contains('just')").css("text-decoration", "underline"); //pass 
#     //alert($("p:contains('just')").css("text-decoration", "underline").html()); //pass 
#     //$("p").contents().wrap("<b/>");  //pass   Find all the text nodes inside a paragraph and wrap them with a bold tag. 
#     // $("p").not(".green, #blueone").css("text-decoration", "underline")//pass emoves elements matching the specified expression from the set of matched elements. 
# } 
# */  
#   
# /** (15) 
#  * filter( Function fn ) returns jQuery 
#  * 运行：首先选择所有的div并设计其css,然后过滤掉除index为1或id为delete的元素，并且设置其css 
#  * 说明：过滤元素，把不匹配的 filter中定义的方法都过滤掉(当function return true时选择，否则过滤) 
#  */  
#  /* 
#  function jq(){ 
#      $("div").css("background", "#b4b0da") 
#             .filter(function (index) { 
#                   return index == 1 || $(this).attr("id") == "delete"; 
#                 }) 
#             .css("border", "3px double red"); 
# } 
# */  
# /** (15)  
#  *  find("elem")  
#  */  
#  /* 
#  function jq(){ 
#     alert($("div").find("#span").html()); 
#     alert($("#delete").find("span").html()); 
#     alert($("div").find("span").html()); 
# } 
# */  
# /** 
#  * is(expr) 
#  * 运行：判断对象是否符合表达式,返回boolen值 
#  */  
#  /* 
# function jq(){ 
#     alert($("#p").is("#p")); 
# } 
# */  
#   
# /** 
#  * next() 
#  * 运行：返回匹配对象下一个兄弟节点 
#  * 说明：next(expr)  返回匹配对象下一个符合条件的兄弟节点中;prev(),prev,(expr) 参照next理解 
#  */  
#    
# /* 
# function jq(){ 
#         alert($("p").next().html()); 
#         alert($("p").next("#one").html()); 
# } 
# */  
#   
# /**  
#  * toggleClass(String)  
#  * 运行：将当前对象添加一个样式，不是当前对象则移出此样式，返回的是处理后的对象  
#  */  
#  /* 
#  function jq(){ 
#     $("p").toggleClass("selected"); 
# } 
# */  
#   
# /** 
#  * removeAttr (name) 
#  * 运行：将对象的指定属性移出 
#  */  
# /* 
#  function jq(){ 
#      $("img"). removeAttr("src"); 
# } 
# */  
# function jq(){  
#      //alert($("#payoutListTable").size());  
#      //alert($("#payoutListTable").find("#tr2").html());  
#      //alert($("#payoutListTable").html());  
#      alert($("html").html());  
# }  
# ////////////////////////////////////////////////////////////////////////////////  
# //                               三：css操作                                  //  
# ////////////////////////////////////////////////////////////////////////////////  
# /* 
#  *css(name) 
#  *css(prop) 
#  *css(key, value) 
#  *说明：css(name)  获取样式名为name的样式；css(prop)  prop是一个hash对象，用于设置大量的css样式；css(key, value)  用于设置一个单独得css样式 
#  * 
#  */  
#  /* 
# function jq(){ 
#      //$("#b").css({ color: "red", background: "blue" }); 
#      //$("#b").css("color","red"); 
#      //alert($("#b").css("color")); 
# } 
# */  
#   
# ////////////////////////////////////////////////////////////////////////////////  
# //                               四：javascript处理                           //  
# ////////////////////////////////////////////////////////////////////////////////  
# /** 
#  * 
#  */  
#  /* 
# function jq(){ 
#      if($.browser.msie) { 
#         alert("这是一个IE浏览器");} 
#     else if($.browser.opera) { 
#         alert("这是一个opera浏览器");} 
#     else alert("others"); 
# } 
# */  
# /** 
#  * $.each(obj, fn) 
#  * 说明：obj为对象或数组，fn为在obj上依次执行的函数，obj可以为一个hash对象，依次将hash中每组对象传入到函数中 
#  */  
#  /* 
# function jq(){ 
#    //$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); }); 
#    $.each({ name: "John", lang: "JS" },  function(i){ alert( "Name: " + i + ", Value: " + this )}); 
# } 
# */  
# /**  
#  *  
#  */  
#  /* 
#  function jq(){ 
#         var settings = { validate: false, limit: 5, name: "foo" }; 
#         var options = { validate: true, name: "bar" }; 
#         $.extend(settings, options); 
#         $.each(settings,  function(i){ alert( i + "=" + this ); }); 
# } 
# */  
# /** 
#  * $.grep(array,fn) 
#  * 说明：通过函数fn来过滤array，将array中的元素依次传给fn，fn必须返回一个boolen，如 fn返回true，将被过滤 
#  */  
#  /* 
#  function jq(){ 
#    var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; }); 
#         $.each(arr, function(i){ alert(i); }); 
# } 
# */  
# /* 
# function jq(){ 
#   var arr = $.merge([0,1,2],[2,1,3]) 
#   $.each(arr,function(i){ alert(arr[i]); }); 
# } 
# */  
# /**  
#  * $.trim(str  
#  * 说明：移出字符串两端的空格  
#  */  
#  /* 
#  function jq(){ 
#   var arr ="Hello World!~   " 
#   var arrTrim=$.trim(arr); 
#   alert(arr.length); 
#   alert(arrTrim.length); 
# } 
# */  
#   
#   
#   
#   
# ////////////////////////////////////////////////////////////////////////////////  
# //                               五：动态效果                                 //  
# ////////////////////////////////////////////////////////////////////////////////  
#   
# /** 
#  * hide(speed) 
#  */  
# /* 
# function jq(){ 
#   //$("#one").hide(); 
#   //$("#one").hide("slow");//speed有3级 ("slow", "normal",  "fast") 
#   //$("#one").hide(1300); //也可以是自定义的速度 
#   //$("#one").hide(1300,function(){alert("hide");});//执行hide后招待指定方法 
# } 
# */  
# /** 
#  * hide(speed) 
#  */  
#  /* 
# function jq2(){ 
#   //$("#one").show(); 
#   //$("#one").show("slow"); 
#   //$("#one").show(1300,function(){alert("shwo");}); 
# } 
# */  
# /**  
#  * fadeIn(speeds)  
#  */  
# /* 
# function jq(){ 
#   $("#one").fadeIn("slow"); 
#   //$("#one").hide("slow");//speed有3级 ("slow", "normal",  "fast") 
#   //$("#one").hide(1300); //也可以是自定义的速度 
#   //$("#one").hide(1300,function(){alert("hide");});//执行hide后招待指定方法 
# } 
# */  
# /** 
#  * fadeOut(speeds) 
#  */  
#  /* 
# function jq2(){ 
#   $("#one").fadeOut("slow"); 
#   //$("#one").hide("slow");//speed有3级 ("slow", "normal",  "fast") 
#   //$("#one").hide(1300); //也可以是自定义的速度 
#   //$("#one").hide(1300,function(){alert("hide");});//执行hide后招待指定方法 
# } 
# */  
# /**  
#  * fadeTo(speed, opacity, callback)  
#  */  
# /* 
# function jq(){ 
#   $("#one").fadeTo("slow",0.2,function(){alert("fadeTo 0.2");}); 
# } 
# */  
# /** 
#  * slideDown(speed, callback) 
#  */  
# /* 
# function jq(){ 
#   $("#one").slideUp("slow",function(){alert("slideUp");}); 
# } 
# */  
# /**  
#  * slideDown(speed,callback)  
#  */  
#  /* 
# function jq2(){ 
#   $("#one").slideDown("slow",function(){alert("slideDown");}); 
# } 
# */  
# /** 
#  * slideToggle(speed,callback) 
#  */  
# function jq2(){  
#   $("#one").slideToggle("slow",function(){alert("slideToggle");});  
# }  
#   
# ////////////////////////////////////////////////////////////////////////////////  
# //                               六：event事件                                //  
# ////////////////////////////////////////////////////////////////////////////////  
# /** 
#  *  hover(fn,fn) 
#  */  
# /* 
# $(function(){ 
#   $("#one").hover( 
#                   function(){$(this).addClass("red");}, 
#                   function(){ $(this).removeClass("red"); 
#                   }); 
# }) 
# */  
#   
# /** 
#  * toggle(fn,fn) 
#  */  
#  /* 
# $(function(){ 
#   $("#one").toggle ( 
#                     function(){$(this).addClass("red");}, 
#                     function(){ $(this).removeClass("red"); 
#                     }); 
# }) 
# */  
# /**  
#  * bind(type, fn)  
#  */  
#  /* 
# $(function(){ 
#   $("#one").bind("click",function(){ 
#                                     alert("click"); 
#                                     $("#one").unbind("click"); 
#                                     }); 
# }) 
# */  
# ////////////////////////////////////////////////////////////////////////////////  
# //                               七：ajax支持                                 //  
# ////////////////////////////////////////////////////////////////////////////////  
# /** 
#  通用方式： 
# $.ajax(prop)    通过一个ajax请求，回去远程数据，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：当请求完成后出发函数 
#  */  
#  /* 
#  // 示例： 
#    function pageselectCallback(page_id, jq) { 
#          $.ajax({ 
#                type: "POST", 
#                url: "../account/alloplist.action?pageNo=" + (page_id*1+1), 
#                data: "timedesc=" + $("#TiemDese").val()+"&userid=<c:out value='${userid}'/>", 
#                success: function(msg) { 
#                    $("#tabs-3").html(msg); 
#                } 
#            }); 
#      } 
#   //说明：些示例为翻页的ajax请求jquery处理, 
#           传递方式为post,指定了请求路径(URL),传递的参数数据，如果操作成功将更新id为 tabs-3的标签 

#  */

来源本人博客：http://yijianfengvip.blog.163.com/blog/static/175273432201111231459588/

      本文转自yjflinchong 51CTO博客，原文链接：http://blog.51cto.com/yjflinchong/1165081，如需转载请自行联系原作者