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/