1.选择器
$("p")
$("#id")
$(".class")
$("[href='#']")
$("[href$='.jpg']")
2.事件
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时） $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件 $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
3.jQuery效果
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
slideDown()
slideUp()
slideToggle()
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$("button").click(function(){
$("div").animate({left:'250px'});
});
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
4.jQuery操作HTML
text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 css() 方法设置或返回被选元素的一个或多个样式属性。 css("propertyname"); $("p").css("background-color"); css("propertyname","value"); $("p").css("background-color","yellow"); css({"propertyname":"value","propertyname":"value",...}); $("p").css({"background-color":"yellow","font-size":"200%"}); width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。 $("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "</br>"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt); }); innerWidth() 方法返回元素的宽度（包括内边距）。 innerHeight() 方法返回元素的高度（包括内边距）。 $("button").click(function(){ var txt=""; txt+="Inner " + $("#div1").innerWidth() + "</br>"; txt+="Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt); }); outerWidth() 方法返回元素的宽度（包括内边距和边框）。 outerHeight() 方法返回元素的高度（包括内边距和边框）。 $("button").click(function(){ var txt=""; txt+="Outer " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt); }); outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。 outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。 $("button").click(function(){ var txt=""; txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt); });
$("button").click(function(){
$("#div1").width(500).height(500);
});
5.jQuery遍历
jQuery 遍历 - each() 方法 输出每个 li 元素的文本： $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); 定义和用法 each() 方法规定为每个匹配元素规定运行的函数。 提示：返回 false 可用于及早停止循环。 语法 $(selector).each(function(index,element)) 参数 描述 function(index,element) 必需。为每个匹配元素规定运行的函数。 index - 选择器的 index 位置 element - 当前的元素（也可使用 "this" 选择器）
jQuery 遍历 - 祖先
jQuery parent() 方法 parent() 方法返回被选元素的直接父元素。 该方法只会向上一级对 DOM 树进行遍历。 下面的例子返回每个 <span> 元素的的直接父元素： $(document).ready(function(){ $("span").parent(); }); jQuery parents() 方法 parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。 下面的例子返回所有 <span> 元素的所有祖先： $(document).ready(function(){ $("span").parents(); }); 您也可以使用可选参数来过滤对祖先元素的搜索。 下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素： $(document).ready(function(){ $("span").parents("ul"); }); jQuery parentsUntil() 方法 parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素： $(document).ready(function(){ $("span").parentsUntil("div"); });
jQuery 遍历 - 后代 jQuery children() 方法 children() 方法返回被选元素的所有直接子元素。 该方法只会向下一级对 DOM 树进行遍历。 $(document).ready(function(){ $("div").children(); }); 您也可以使用可选参数来过滤对子元素的搜索。 下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素： $(document).ready(function(){ $("div").children("p.1"); }); jQuery find() 方法 find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。 $(document).ready(function(){ $("div").find("span"); }); 下面的例子返回 <div> 的所有后代： $(document).ready(function(){ $("div").find("*"); });
jQuery 遍历 - 同胞 jQuery siblings() 方法 siblings() 方法返回被选元素的所有同胞元素。 下面的例子返回 <h2> 的所有同胞元素： $(document).ready(function(){ $("h2").siblings(); }); 您也可以使用可选参数来过滤对同胞元素的搜索。 下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素： $(document).ready(function(){ $("h2").siblings("p"); }); jQuery next() 方法 next() 方法返回被选元素的下一个同胞元素。 该方法只返回一个元素。 下面的例子返回 <h2> 的下一个同胞元素： $(document).ready(function(){ $("h2").next(); }); jQuery nextAll() 方法 nextAll() 方法返回被选元素的所有跟随的同胞元素。 下面的例子返回 <h2> 的所有跟随的同胞元素： $(document).ready(function(){ $("h2").nextAll(); }); jQuery nextUntil() 方法 nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。 下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素： $(document).ready(function(){ $("h2").nextUntil("h6"); }); jQuery prev(), prevAll() & prevUntil() 方法 prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
jQuery 遍历 - 过滤 jQuery first() 方法 first() 方法返回被选元素的首个元素。 下面的例子选取首个 <div> 元素内部的第一个 <p> 元素： $(document).ready(function(){ $("div p").first(); }); jQuery last() 方法 last() 方法返回被选元素的最后一个元素。 下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素： $(document).ready(function(){ $("div p").last(); }); jQuery eq() 方法 eq() 方法返回被选元素中带有指定索引号的元素。 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）： $(document).ready(function(){ $("p").eq(1); }); jQuery filter() 方法 filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。 下面的例子返回带有类名 "intro" 的所有 <p> 元素： $(document).ready(function(){ $("p").filter(".intro"); }); jQuery not() 方法 not() 方法返回不匹配标准的所有元素。 提示：not() 方法与 filter() 相反。 下面的例子返回不带有类名 "intro" 的所有 <p> 元素： $(document).ready(function(){ $("p").not(".intro"); });
6.jQuery AJAX
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法。 load() 方法从服务器加载数据，并把返回的数据放入被选元素中 $(selector).load(URL,data,callback); 必需的 URL 参数规定您希望加载的 URL。 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。 可选的 callback 参数是 load() 方法完成后所执行的函数名称。 下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中： $("#div1").load("demo_test.txt"); 也可以把 jQuery 选择器添加到 URL 参数。 下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中： $("#div1").load("demo_test.txt #p1"); 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数： responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 xhr - 包含 XMLHttpRequest 对象 下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息： $("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功！"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); }); jQuery - AJAX get() 和 post() 方法 HTTP 请求：GET vs. POST 两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。 GET - 从指定的资源请求数据 POST - 向指定的资源提交要处理的数据 GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。 POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。 jQuery $.get() 方法 $.get() 方法通过 HTTP GET 请求从服务器上请求数据。 $.get(URL,callback); 必需的 URL 参数规定您希望请求的 URL。 可选的 callback 参数是请求成功后所执行的函数名。 下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据： $("button").click(function(){ $.get("demo_test.asp",function(data,status){ alert("Data: " + data + " Status: " + status); }); }); jQuery $.post() 方法 $.post() 方法通过 HTTP POST 请求从服务器上请求数据。 语法： $.post(URL,data,callback); 必需的 URL 参数规定您希望请求的 URL。 可选的 data 参数规定连同请求发送的数据。 可选的 callback 参数是请求成功后所执行的函数名。 下面的例子使用 $.post() 连同请求一起发送数据： $("button").click(function(){ $.post("demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("Data: " + data + " Status: " + status); }); });
7.JQuery.noConflict()
jQuery 和其他 JavaScript 框架 正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。 如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？ 其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。 其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。 jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。 jQuery noConflict() 方法 noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。 当然，您仍然可以通过全名替代简写的方式来使用 jQuery： $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍在运行！"); }); }); 您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子： var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍在运行！"); }); }); 如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"： $.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍在运行！"); }); });