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(){
#         "http://blog.51cto.com/viewpic.php?refimg=" + this.src=\'#\'" //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/