JQUERY 详细说明文档

jQuery中文文档孙本强2010-11-10目录部分常用方法速查 (2)选择器 (2)表单选择器 (4)属性 (5)节点匹配 (6)文本处理 (12)Css (13)事件 (15)动画效果 (18)Ajax (20)其他 (24)Ajax (24)1.load(url,[data],[callback]) (24)2.jQuery.get(url,[data],[callback]) (25)3.jQuery.post(url,[data],[callback],[type]) (26)4.jQuery.getScript(url,[callback]) (27)5.jQuery Ajax事件 (27)6.jQuery.ajax(options) (29)7.jQuery.ajaxSetup(options) (31)8.serialize()与serializeArray() (31)部分常用方法速查$()如果()内是css选择器：找到相应的节点包装成JQuery对象DOM对象：直接包装成JQuery对象一段HTML代码：先创建DOM对象，再包装成JQuery对象$("<div></div>").appendTo($(obj))返回jQuery$(#id)根据给定的ID匹配一个元素。

返回jQuery$(element)根据给定的元素名匹配所有元素返回Array<Element(s)>$(.class)根据给定的类匹配元素。

返回Array<Element(s)>$(*)匹配所有元素返回Array<Element(s)>$(selector1,selector2,selectorN)将每一个选择器匹配到的元素合并后一起返回。

返回Array<Element(s)>选择器parent>child取得<div>下的所有<span>子节点$("div>span")返回Array<Element(s)>:first选取所有<div>元素中第一个<div>元素$("div:first")返回jQuery:last选取所有<div>元素中最后一个<div>元素$("div:last")返回jQuery:not(Selector)选取所有class不是mytest的<div>元素$("div:not(.mytest)")返回Array<Element(s)>:even查找表格的偶数行，从0开始计数$("tr:even")返回Array<Element(s)>:odd查找表格的奇数行，从0开始计数$("tr:odd")返回Array<Element(s)>:eq(index)匹配一个给定索引值的元素，从0开始计数$("tr:eq(1)")返回Array<Element(s)>:gt(index)匹配所有大于给定索引值的元素，从0开始计数$("tr:gt(0)")返回Array<Element(s)>:lt(index)匹配所有小于给定索引值的元素，从0开始计数$("tr:lt(2)")返回Array<Element(s)>:animated选取当前正在执行动画的所有元素$(":animated")返回Array<Element(s)>:contains(string)选取所有文本内容包含“关键词”的<div>元素$("div:contains('关键词')")返回Array<Element(s)>:has查找所有含有<p>子元素的<div>父元素$("div:has(p)")返回Array<Element(s)>:empty选取所有空<div></div>的元素$("div:empty")返回Array<Element(s)>:visible查找所有可见元素$("tr:visible")返回Array<Element(s)>[attribute=value]选取文本输入框的input元素$("input[type=text]")返回Array<Element(s)>[attribute!=value]选取所有不是hidden的input元素，注意，没有type属性的input也会被选取$("input[type!=hidden]")返回Array<Element(s)>[attribute^=value]选取开头为mailto:的所有a链接$("a[href^='mailto']")返回Array<Element(s)>[attribute$=value]选取所有结尾为.jpg的img图片$("img[src$='.jpg']")返回Array<Element(s)>表单选择器:input查找所有的input元素（包括input,textarea,select和button）$(":input")返回Array<Element(s)>:password查找所有密码框$(":password")返回Array<Element(s)>:text查找所有单行文本框$(":text")返回Array<Element(s)>:radio查找所有单选按钮$(":radio")返回Array<Element(s)>:checkbox查找所有复选框$(":checkbox")返回Array<Element(s)>:checked查找所有选中的checkbox,radio$("input:checked")返回Array<Element(s)>:selected查找所有选中的选项元素$("select:selected")返回Array<Element(s)>属性attr(key)attr(key,value)设置一个属性的值HTML:<img src="test.jpg"/>jQuery:$("img").attr("src");Result:test.jpg返回jQueryremoveAttr(key)删除一个属性HTML:<img src="test.jpg"/>jQuery:$("img").removeAttr("src");Result:[<img/>]返回jQueryaddClass(class)追加指定的类名HTML:<p>Hello</p>jQuery:$("p").addClass("selected highlight");Result:[<p class="selected highlight">Hello</p>]如果要替换样式，用attr()返回jQueryremoveClass()移除样式Html:<p class="red">你最喜欢的是？</p>JQuery:$("p").removeClass("red");Result:<p>你最喜欢的是？</p>可以同时移除多个样式：$("p").removeClass("red bold");或者全部移除样式：$("p").removeClass();返回jQuerytoggleClass()如果节点存在该样式，则移除，不存在，则追加$("p").toggleClass("blue");返回jQueryhasClass(class)判断节点是否存在该样式，返回布尔值$("p").hasClass("blue");该方法等价于：$("p").is(".blue");返回jQueryhtml()取得或设置文本内容类似innerHTML()仅可用于html文档返回String/jQuerytext()取得或设置文本内容类似innerText()可以用于html和xml文档返回String/jQueryval()取得或设置input文本框的值Html：<input type="text"id="searchbox"value="搜索的内容…"/> JQuery:$("searchbox").focus(function(){if(this.val()=="搜索的内容…"){this.val("")}});$("searchbox").blur(function(){if(this.val()==""){this.val(this.defaultValue)}});this.defaultValue表示input文本框的默认value通过val()还能做到将表单多选框,checkbox,radio事先选中：$(":checkbox").val(["check2","check3"]);$(":radio").val(["radio2"]);返回String/Array节点匹配each(callback)为每一个匹配的元素执行一个函数迭代两个图像，并设置它们的src属性注意此处this指代的是DOM对象而非jQuery对象HTML:<img/><img/>jQuery:$("img").each(function(i){this.src="test"+i+".jpg";});Result:[<img src="test0.jpg"/>,<img src="test1.jpg"/>]返回jQuerysize()/length获取对象中元素的个数$("img").size();$("img").length;返回Numberindex([subject])匹配的元素，并返回相应元素的索引值，从0开始计数HTML:<ul><li id="foo">foo</li><li id="bar">bar</li><li id="baz">baz</li></ul>jQuery:$('li').index($('#bar'));//1$('li').index($('li:gt(0)'));//1$('#bar').index('li');//1$('#bar').index();//1返回Numberget()/get(index)get():以数组形式取得所有匹配的节点集合get(index):index存在则从中选择某一个DOM节点HTML:<img src="test1.jpg"/><img src="test2.jpg"/>jQuery:$("img").get(0);Reslut:[<img src="test1.jpg"/>]返回Array<Element>/Elementeq(index)以对象形式获取第index个元素，位置从0算起获取匹配的第二个元素HTML:<p>This is just a test.</p><p>So is this</p>jQuery:$("p").eq(1)Result:[<p>So is this</p>]补充.get(index)和.eq(index)的区别.get(index)返回的是一个html数组.eq(index)返回的是一个Jquery对象$("ul li").get(1).css("color","red");//这个是错误的$("ul li").eq(1).css("color","red");//这个是正确的同理将JQuery对象转换为DOM对象可以使用get alert一个非JQuery对象，如：var$cr=$("#cr");var cr=$cr.get(0);alert(cr.checked);返回jQueryfirst()获取匹配的第一个元素$('li').first()等价于$('li:first')返回jQuerylast()获取匹配的最后一个元素$('li').last()等价于$('li:last')返回jQueryfilter(fn)筛选出与指定函数返回值匹配的元素集合保留子元素中不含有ol的元素。