jQuery手册：http://jquery.cuishifeng.cn/
一、选择器
1. id选择器、类名选择器、元素选择器、多选择器
//id选择器 $("#myDiv"); //类名选择器 $(".myClass"); //元素选择器 $("div"); //多选择器 $("div,span,p.myClass")
2. 层级选择器
//元素层级选择器 $('form input'); //给定父元素, 查找子元素 $("form > input"); //匹配所有紧接在 label元素后的input元素 $("label + input"); //匹配 form元素之后的所有 siblings 元素（与form同级的元素） $("form ~ input");
3. 基本选择器、内容选择器、可见性选择器
// 获取第一个元素 $('li:first'); //匹配最后一个元素 $('li:last'); //去除所有与给定选择器匹配的元素 //在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)） $("input:not(:checked)"); //匹配索引为偶数的元素，0开始 $("tr:even"); //匹配索引为奇数的元素，0开始 $("tr:odd"); //匹配一个给定索引值的元素，0开始 $("tr:eq(1)"); //匹配所有大于给定索引值的元素， 0开始 $("tr:gt(0)"); //匹配所有小于给定索引值的元素, 0开始 $("tr:lt(2)"); //匹配如 h1, h2, h3之类的标题元素 $(":header").css("background", "#EEE"); //匹配所有正在执行动画效果的元素 $("div:animated"); //匹配当前获取焦点的元素 $(':focus'); //匹配包含给定文本的元素 $("div:contains('John')"); //匹配所有不包含子元素或者文本的空元素 $("td:empty"); //匹配含有选择器所匹配的元素的元素 $("div:has(p)"); //匹配含有子元素或者文本的元素， 包含子元素或者文本的空元素会被过滤掉 $("td:parent"); //匹配所有不可见元素display:none，或者type为hidden的元素 $("tr:hidden"); //匹配所有的可见元素 $("tr:visible");
4. 属性选择器
//查找所有含有 id 属性的 div 元素 $("div[id]"); //查找所有 name 属性是 newsletter 的 input 元素 $("input[name='newsletter']").attr("checked", true); //查找所有 name 属性不是 newsletter 的 input 元素 $("input[name!='newsletter']").attr("checked", true); //查找所有 name 以 'news' 开始的 input 元素 $("input[name^='news']"); //查找所有 name 以 'letter' 结尾的 input 元素 $("input[name$='letter']"); //查找所有 name 包含 'man' 的 input 元素 $("input[name*='man']"); //找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 $("input[id][name$='man']");
5. 子元素选择器
//在每个 ul 中查找第一个 li $("ul li:first-child"); //在每个 ul 中查找最后一个 li $("ul li:last-child"); //在每个 ul 查找第 2 个li, 从1开始 $("ul li:nth-child(2)"); //在 ul 中查找是唯一子元素的 li, 即ul中只有一个li元素 $("ul li:only-child");
6. 表单选择器、表单对象选择器
//查找所有的input元素 $(":input"); //查找所有文本框, 即type="text" $(":text"); //查找所有密码框 type="password" $(":password"); //查找所有单选按钮 type="radio" $(":radio"); //查找所有复选框 type="checkbox" $(":checkbox"); //查找所有提交按钮 ,理论上只匹配 type="submit" 的input或者button，但是现在的很多浏/览器，button元素默认的type即为submit。为了防止歧义或者误操作，建议所有的button在使用时都添加type属性。 $(":submit"); //匹配所有图像域 type="image" $(":image"); //查找所有重置按钮 type="reset" $(":reset"); //查找所有按钮 type="button" 和 <button> $(":button"); //查找所有文件域 type="file" $(":file"); //查找所有可用的input元素, 非disabled $("input:enabled"); //查找所有不可用的input元素 disabled="disabled" $("input:disabled"); //查找所有选中的复选框元素 //匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说， //获取选中推荐使用 :selected //checked="checked" $("input:checked"); //匹配所有选中的option元素 $("select option:selected");
二、CSS处理
1. 样式操作
//获取属性值 $("p").css("color"); //设置属性值 $("p").css("color","red"); $("p").css({ "color": "#ff0011", "background": "blue" });
2. 位置操作
//获取匹配元素在当前视口的相对偏移。 返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。 var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top ); //获取匹配元素相对父元素的偏移。 //返回的对象包含两个整型属性：top 和 left。 //为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。 var p = $("p:first"); var position = p.position(); $("p:last").html( "left: " + position.left + ", top: " + position.top ); //获取匹配元素相对滚动条顶部的偏移。 //此方法对可见和隐藏元素均有效。 var p = $("p:first"); $("p:last").text( "scrollTop:" + p.scrollTop() ); //设置相对滚动条顶部的偏移 $("div.demo").scrollTop(300); //scrollLeft() 获取匹配元素相对滚动条左侧的偏移。对可见和隐藏元素均有效。
3.尺寸操作
//取得匹配元素当前计算的高度值（px） //在 jQuery 1.2 以后可以用来获取 window 和 document 的高 $("p").height(); $("p").height(20); //width() 与height()一样 //获取第一个匹配元素内部区域高度（包括补白、不包括边框）。 //此方法对可见和隐藏元素均有效。 var p = $("p:first"); $("p:last").text( "innerHeight:" + p.innerHeight() ); //innerWidth()与innerHeight() 一样 //获取第一个匹配元素外部高度（默认包括补白和边框）。 //方法对可见和隐藏元素均有效。 //设置为 true 时，计算边距在内。 var p = $("p:first"); $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) ); //outerWidth() 与 outerHeight() 一样
三、动画效果
1. 基本操作：show、hide、toggle
//显示隐藏的匹配元素 //如果选择的元素是可见的，这个方法将不会改变任何东西。 //语法：show([speed,[easing],[fn]]) //speed 可选值： "slow","normal", "fast" 或具体的数值（如1000，单位毫秒） //easing 可选值：默认是 "swing"，还可以是 "linear" //fn 可选值：在动画完成时执行的函数，每个元素执行一次。 $("p").show(); $("p").show("slow"); $("p").show("fast",function(){ $(this).text("Animation Done!"); }); $("p").show(4000,function(){ $(this).text("Animation Done..."); }); //hide([speed,[easing],[fn]]) 与show相反 //如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 //语法：toggle([speed],[easing],[fn]) $('#foo').toggle(showOrHide); //相当于 if (showOrHide) { $('#foo').show(); } else { $('#foo').hide(); }
2. 滑动：slideUp、slideDown、SlideToggle
//开始元素时候隐藏的，通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。 //这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。 //语法：slideDown([speed],[easing],[fn]) $(".btn2").click(function(){ $("p").slideDown(); }); //slideUp([speed,[easing],[fn]]) 与 slideDown()相反 //开始元素时候显示的，通过高度变化（向上减小）来动态地隐藏所有匹配的元素 //slideToggle([speed],[easing],[fn]) //通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
3. 淡入淡出：fadeIn、fadeOut、fadeTo、fadeToggle
//通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。 //这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 //语法：fadeIn([speed],[easing],[fn]) $("p").fadeIn("slow"); // fadeOut([speed],[easing],[fn]) 与 fadeIn相反 $("p").fadeOut("slow"); // fadeToggle([speed,[easing],[fn]]) //把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。 //fadeTo([[speed],opacity,[easing],[fn]]) $("p").fadeTo("slow", 0.66);
4. 自定义：animate
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
语法：animate(params,[speed],[easing],[fn])
//点击按钮后div元素的几个不同属性一同变化 $("#go").click(function(){ $("#block").animate({ "90%", height: "100%", fontSize: "10em", borderWidth: 10 }, 1000 ); }); //让指定元素左右移动 $("#right").click(function(){ $(".block").animate({left: '+50px'}, "slow"); }); $("#left").click(function(){ $(".block").animate({left: '-50px'}, "slow"); }); //在600毫秒内切换段落的高度和透明度 $("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow"); //用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1） $("p").animate({ left: 50, opacity: 'show' }, 500);
5. 关闭页面上所有的动画效果：jQuery.fx.off
当把这个属性设成false之后，可以重新开启所有动画。
//执行一个禁用的动画 jQuery.fx.off = true; $("input").click(function(){ $("div").toggle("slow"); });
四、属性操作
1. 属性和CSS操作
//设置或返回被选元素的属性值。 $("img").attr("src"); $("img").attr("src","test.jpg"); $("img").attr({ src: "test.jpg", alt: "Test Image" }); $("img").attr("title", function() { return this.src }); //从每一个匹配的元素中删除一个属性 $("img").removeAttr("src"); //获取在匹配的元素集中的第一个元素的属性值。 $("input[type='checkbox']").prop("checked"); $("input[type='checkbox']").prop("disabled", true); $("input[type='checkbox']").prop("checked", true); $("input[type='checkbox']").prop({ disabled: true }); //removeProp(name) 用来删除由.prop()方法设置的属性集 //为每个匹配的元素添加指定的类名。 $("p").addClass("selected"); $("p").addClass("selected1 selected2"); $('ul li:last').addClass(function() { return 'item-' + $(this).index(); }); //从所有匹配的元素中删除全部或者指定的类。 $("p").removeClass("selected"); $("p").removeClass(); $('li:last').removeClass(function() { return $(this).prev().attr('class'); }); //如果存在（不存在）就删除（添加）一个类。 $("p").toggleClass("selected"); $('div.foo').toggleClass(function() { if ($(this).parent().is('.bar') { return 'happy'; } else { return 'sad'; } });
2. 文本操作：html()、text()、val()
五、文档操作
//向每个匹配的元素内部追加内容（内部结束位置插入）。 $("p").append("<b>Hello</b>"); //把所有匹配的元素追加到另一个指定的元素元素集合中。 $("p").appendTo("div"); //向每个匹配的元素内部前置内容（内部开始位置插入）。 $("p").prepend("<b>Hello</b>"); //把所有匹配的元素前置到另一个、指定的元素元素集合中。 $("p").prependTo("#foo"); //在每个匹配的元素之后插入内容（外部之后追加）。 $("p").after("<b>Hello</b>"); //在每个匹配的元素之前插入内容（外部之前追加）。 ("p").before("<b>Hello</b>"); //把所有匹配的元素插入到另一个、指定的元素元素集合的后面。 $("p").insertAfter("#foo"); //把所有匹配的元素插入到另一个、指定的元素元素集合的前面。 $("p").insertBefore("#foo"); //把所有匹配的元素用其他元素的结构化标记包裹起来。 //把所有的段落用一个新创建的div包裹起来 $("p").wrap("<div class='wrap'></div>"); //这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。 $("p").unwrap(); //将所有匹配的元素替换成指定的HTML或DOM元素。 $("p").replaceWith("<b>Paragraph. </b>"); //用匹配的元素替换掉所有 selector匹配到的元素。 $("<b>Paragraph. </b>").replaceAll("p"); //删除匹配的元素集合中所有的子节点。 $("p").empty(); //从DOM中删除所有匹配的元素。 $("p").remove(); //从DOM中删除所有匹配的元素。 //这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。 //与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。 $("p").detach(); //克隆匹配的DOM元素并且选中这些克隆的副本。 //在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。 //true/false 表示事件处理函数是否会被复制。 $("b").clone().prependTo("p"); $("button").click(function(){ $(this).clone(true).insertAfter(this); });
六、筛选
//获取当前链式操作中第N个jQuery对象，返回jQuery对象. //当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。 //当参数为负数时为反向选取，比如-1为倒数第一个 $("p").eq(1); //获取第一元素 $('li').first(); //获取最后个元素 $('li').last() //检查当前的元素是否含有某个特定的类，如果有，则返回true。 //其实就是 is("." + class)。 $("div").click(function(){ if ( $(this).hasClass("protected") ) $(this) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: 0 }); }); //筛选出与指定表达式匹配的元素集合。 $("p").filter(".selected"); $("p").filter(".selected, :first"); $("p").filter(function(index) { return $("ol", this).length == 0; }); //根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。 $("input[type='checkbox']").parent().is("form"); //将一组元素转换成其他数组（不论是否是元素数组） $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") ); //给含有ul的li加上背景色 $('li').has('ul').css('background-color', 'red'); //从匹配元素的集合中删除与指定表达式匹配的元素 $("p").not( $("#selected")[0] ); //选取一个匹配的子集 $("p").slice(0, 1).wrapInner("<b></b>"); //取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 $("div").children(); $("div").children(".selected"); //搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 $("p").find("span"); //找到每个段落的后面紧邻的同辈元素。 $("p").next(); //查找当前元素之后所有的同辈元素。 $("div:first").nextAll().addClass("after"); //查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。 $('#term-2').nextUntil('dt').css('background-color', 'red'); var term3 = document.getElementById("term-3"); $("#term-1").nextUntil(term3, "dd").css("color", "green"); //返回第一个匹配元素用于定位的父节点。 $("p").offsetParent().css("background-color","red"); //查找每个段落的父元素 $("p").parent(); $("p").parent(".selected"); //找到每个段落紧邻的前一个同辈元素。 $("p").prev(); $("p").prev(".selected"); //找到每个div的所有同辈元素。 $("div").siblings(); $("div").siblings(".selected"); //查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容 $("p").contents().not("[nodeType=1]").wrap("<b/>"); $("iframe").contents().find("body").append("I'm in an iframe!");
七、事件及事件对象
1. 事件
//DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 $(document).ready(function(){ // 在这里写你的代码... }); $(function($) { // 你可以在这里继续使用$作为别名... }); //在选择元素上绑定一个或多个事件的事件处理函数。 //语法： on(events,[selector],[data],fn) //events 事件，如'click' //data:当一个事件被触发时要传递event.data给事件处理函数。 //fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。 $("p").on("click", function(){ alert( $(this).text() ); }); function myHandler(event) { alert(event.data.foo); } $("p").on("click", {foo: "bar"}, myHandler); //在选择元素上移除一个或多个事件的事件处理函数。 $("p").off(); //为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。 $("p").one("click", function(){ alert( $(this).text() ); }); //在每一个匹配的元素上触发某类事件。 $("form:first").trigger("submit"); $("p").click( function (event, a, b) { // 一个普通的点击事件时，a和b是undefined类型 // 如果用下面的语句触发，那么a指向"foo",而b指向"bar" } ).trigger("click", ["foo", "bar"]); $("p").bind("myEvent", function (event, message1, message2) { alert(message1 + ' ' + message2); }); $("p").trigger("myEvent", ["Hello","World!"]); //一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。 $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); //当元素失去焦点时触发 blur 事件。 $("p").blur(); $("p").blur( function () { alert("Hello World!"); } ); //当元素的值发生改变时，会发生 change 事件。 $("input[type='text']").change( function() { // 这里可以写些验证代码 }); //触发每一个匹配元素的click事件。 $("p").click(); $("p").click( function () { $(this).hide(); }); //当双击元素时，会发生 dblclick 事件。 $("p").dblclick( function () { alert("Hello World!"); }); //当元素获得焦点时，触发 focus 事件。 $("input[type=text]").focus(function(){ this.blur(); }); //当键盘或按钮被按下时，发生 keydown 事件。 $(window).keydown(function(event){ switch(event.keyCode) { // ... // 不同的按键可以做不同的事情 // 不同的浏览器的keycode不同 // 更多详细信息: http://unixpapa.com/js/key.html // 常用keyCode： 空格 32 Enter 13 ESC 27 } }); //当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。 $("input").keyup(function(){ $("input").css("background-color","#D6D6FF"); }); //当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。 $("button").mousedown(function(){ $("p").slideToggle(); }); //当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。 $("p").mouseenter(function(){ $("p").css("background-color","yellow"); }); //鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。 //与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。 $("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4"); }); //当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。 $(document).mousemove(function(e){ $("span").text(e.pageX + ", " + e.pageY); }); //当鼠标指针从元素上移开时，发生 mouseout 事件。 $("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); }); //当鼠标指针位于元素上方时，会发生 mouseover 事件。 $("p").mouseover(function(){ $("p").css("background-color","yellow"); }); //当在元素上放松鼠标按钮时，会发生 mouseup 事件。 $("button").mouseup(function(){ $("p").slideToggle(); }); //当调整浏览器窗口的大小时，发生 resize 事件。 $(window).resize(function(){ alert("Stop it!"); }); //当用户滚动指定的元素时，会发生 scroll 事件。 $(window).scroll( function() { /* ...do something... */ } ); $("div").scroll(function() { $("span").text(x+=1); }); //当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。 $("input").select(); $(":text").select( function () { /* ...do something... */ } ); //当提交表单时，会发生 submit 事件。 $("form:first").submit(); $("form").submit( function () { //阻止表单提交 return false; } );
2. 事件对象
//当前DOM元素 $("p").click(function(event) { alert( event.currentTarget === this ); // true }); //event.data //根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值。 $("a").click(function(event){ alert( event.isDefaultPrevented() ); // false event.preventDefault(); alert( event.isDefaultPrevented() ); // true }); //鼠标相对于文档的左边缘的位置。 event.pageX //event.pageY //阻止默认事件行为的触发。 event.preventDefault() //这个属性返回事件触发时距离1970年1月1日的毫秒数。 //这可以很方便的检测某个jQuery函数的性能。 event.timeStamp //event.type 事件类型 //针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。 //event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。 $('#whichkey').bind('keydown',function(e){ $('#log').html(e.type + ': ' + e.which ); });
八、Ajax
1. jQuery.ajax(url,[settings])：通过 HTTP 请求加载远程数据。
$.ajax() 返回其创建的 XMLHttpRequest 对象。这是一个最主要的方法，其余方法都是对它的简单封装。
如：
jQuery.getJSON(url, [data], [callback])
jQuery.getScript(url, [callback])
jQuery.post(url, [data], [callback], [type])
$.ajax({ type:"get", //get或post url:"", //(默认: 当前页地址) 发送请求的地址。 username:'',//用于响应HTTP访问认证请求的用户名 password:'',//用于响应HTTP访问认证请求的密码 data: {},//发送到服务器的数据。将自动转换为请求字符串格式。 dataType: 'json',//预期服务器返回的数据类型。可用值:xml/html/script/json/jsonp/text dataFilter:function (data, type) { // 对Ajax返回的原始数据进行预处理 return data // 返回处理后的数据 }, timeout: 2000, //设置请求超时时间（毫秒）。此设置将覆盖全局设置。 crossDomain: false, //同域请求为false contentType: "application/x-www-form-urlencoded", //这是默认值, application/json async:true, //true表示异步请求,注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 beforeSend: function(XHR){ //发送请求前可修改 XMLHttpRequest 对象的函数 //返回false可以取消本次ajax请求 }, complete: function(XHR, TS){ //请求完成后回调函数 (请求成功或失败之后均调用)。 //参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串。 }, success: function(data, textStatus, jqXHR){ //请求成功后的回调函数 // data 可能是 xmlDoc, jsonObj, html, text, 等等... //this调用本次AJAX请求时传递的options参数 }, error: function (XMLHttpRequest, textStatus, errorThrown) { //请求失败时调用此函数 // 通常 textStatus 和 errorThrown 之中 // 只有一个会包含信息 // this调用本次AJAX请求时传递的options参数 }, statusCode:{404: function() { //如果响应状态是404，将触发警报 alert('page not found'); } });
2. jQuery.ajaxSetup([options]) 设置全局 AJAX 默认选项。
3. load(url, [data], [callback]) 载入远程 HTML 文件代码并插入至 DOM 中。
//加载文章侧边栏导航部分至一个无序列表。 $("#links").load("/Main_Page #p-Getting-Started li"); $("#feeds").load("feeds.html"); $("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });
4. 序列表表格内容为字符串。
$("form").serialize()
5. 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
//[ // {name: 'firstname', value: 'Hello'}, // {name: 'lastname', value: 'World'}, // {name: 'alias'}, // this one was empty // ] var fields = $("select, :radio").serializeArray(); jQuery.each( fields, function(i, field){ $("#results").append(field.value + " "); });
九、工具
//获取浏览器渲染引擎版本号。 if ( $.browser.msie ){ alert( $.browser.version ); } //通用遍历方法，可用于遍历对象和数组。 $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); }); //用一个或多个其他对象来扩展一个对象，返回被扩展的对象。 var settings = { validate: false, limit: 5, name: "foo" }; //合并 settings 和 options，修改并返回 settings。 var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); var empty = {}; //合并 defaults 和 options, 不修改 defaults。 var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; var settings = jQuery.extend(empty, defaults, options); //使用过滤函数过滤数组元素。 //此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。 //过滤数组中小于 0 的元素。 $.grep( [0,1,2], function(n,i){ return n > 0; }); //排除数组中大于 0 的元素，使用第三个参数进行排除。 $.grep( [0,1,2], function(n,i){ return n > 0; }, true); //将类数组对象转换为数组对象。 //类数组对象有 length 属性，其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。 <div>First</div><div>Second</div><div>Third</div><div>Fourth</div> var arr = jQuery.makeArray(document.getElementsByTagName("div")); arr.reverse(); // 使用数组翻转函数 //将一个数组中的元素转换到另一个数组中。 $.map( [0,1,2], function(n){ return n + 4; }); $.map( [0,1,2], function(n){ return n > 0 ? n + 1 : null; }); //确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。 var arr = [ 4, "Pete", 8, "John" ]; jQuery.inArray("John", arr); //3 jQuery.inArray(4, arr); //0 jQuery.inArray("David", arr); //-1 jQuery.inArray("Pete", arr, 2); //-1 //把jQuery集合中所有DOM元素恢复成一个数组。 $('li').toArray(); //合并两个数组 //返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique() $.merge( [0,1,2], [2,3,4] ); //解析一个字符串到一个XML文件。 var xml = '<rss version="2.0"><channel><title>RSS Title</title></channel></rss>', xmlDoc = $.parseXML( xml ), $xml = $( xmlDoc ), $title = $xml.find( 'title' ); // append "RSS Title" to #someElement $( '#someElement' ).append( $title.text() ); // change the title to "XML Title" $title.text( 'XML Title' ); // append "XML Title" to #anotherElement $( '#anotherElement' ).append( $title.text() ); //一个空函数 $.noop //jQuery 1.4 新增。返回一个新函数，并且这个函数始终保持了特定的作用域。 //语法：jQuery.proxy(function,context) //另外一个用法：jQuery.proxy( scope, name )。第一个参数是要设定的作用域对象。第二个参数是将要设置作用域的函数名（必须是第一个作用域对象的一个属性）。 //一个DOM节点是否包含另一个DOM节点。 //语法：jQuery.contains(container,contained) //检测obj的数据类型。 jQuery.type(true) === "boolean" jQuery.type(3) === "number" jQuery.type("test") === "string" jQuery.type(function(){}) === "function" jQuery.type([]) === "array" jQuery.type(new Date()) === "date" jQuery.type(/test/) === "regexp" //jQuery 1.4 新增。测试对象是否是空对象（不包含任何属性）。 jQuery.isEmptyObject({}) // true jQuery.isEmptyObject({ foo: "bar" }) // false //测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）。 jQuery.isPlainObject({}) // true jQuery.isPlainObject("test") // false //确定它的参数是否是一个数字。 $.isNumeric("-10"); // true $.isNumeric(16); // true $.isNumeric(0xFF); // true $.isNumeric("0xFF"); // true $.isNumeric("8e5"); // true (exponential notation string) $.isNumeric(3.1415); // true $.isNumeric(+10); // true $.isNumeric(0144); // true (octal integer literal) $.isNumeric(""); // false $.isNumeric({}); // false (empty object) $.isNumeric(NaN); // false $.isNumeric(null); // false $.isNumeric(true); // false $.isNumeric(Infinity); // false $.isNumeric(undefined); // false //去掉字符串起始和结尾的空格。 $.trim(" hello, how are you? "); //将表单元素数组或者对象序列化。是.serialize()的核心方法。 var params = { 1680, height:1050 }; var str = jQuery.param(params); $("#results").text(str); //width=1680&height=1050 //接受一个字符串，并且直接抛出一个包含这个字符串的异常。 //语法：jQuery.error(message) //代表 jQuery 版本号的字符串。 alert( 'You are running jQuery version: ' + $.fn.jquery );
十、jQuery核心
1. jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); $("input[type=checkbox]").check(); $("input[type=radio]").uncheck();
2. jQuery.extend(object)
扩展jQuery对象本身。
jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery.min(2,3); // => 2 jQuery.max(4,5); // => 5
3. jQuery.noConflict([extreme])
运行这个函数将变量$的控制权让渡给第一个实现它的那个库。
这有助于确保jQuery不会与其他库的$对象发生冲突。 在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。 '''注意:'''这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库'''之前'''使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的。
jQuery.noConflict(); // 使用 jQuery jQuery("div p").hide(); // 使用其他库的 $() $("content").style.display = 'none';
4. data([key],[value])
在元素上存放或读取数据,返回jQuery对象。
$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah设置为hello
5. removeData([name|list])
在元素上移除存放的数据。
$("#btn2").click(function(){
$("div").removeData("greeting");
alert("Greeting is: " + $("div").data("greeting"));
});
6. 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。从0开始，返回的是DOM对象，类似的有eq(index),不过eq(index)返回的是jQuery对象。
$("img").get(0);
$("img").get().reverse();
7. length
jQuery 对象中元素的个数。
这个函数的返回值与 jQuery 对象的size()属性一致。
$("img").length;
8. each(callback)
以每一个匹配的元素作为上下文来执行一个函数。
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});