JQuery预习笔记
来源：互联网 发布：苹果教育软件 编辑：程序博客网 时间：2024/05/13 00:43
- jquery简介
jQuery 库可以通过一行简单的标记被添加到网页中。
1、what
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示： 除此之外，Jquery还提供了大量的插件。
2、why
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
很多大公司都在使用 jQuery， 例如:Google Microsoft IBM Netflix
jquery安装
jQuery 安装
网页中添加 jQuery
可以通过以下方法添加 jQuery：
- 从 jquery.com 下载 jQuery 库
- 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
下载 jQuery
有两个版本的 jQuery 可供下载：
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 jquery.com 中下载。
jQuery 库是一个 JavaScript 文件，可以使用 HTML 的 <script> 标签引用它：
<head> <script src="jquery-1.10.2.min.js"></script> </head>
提示： 将下载的文件放在网页的同一目录下，就可以使用jQuery。
替代方案
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。
百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。
如需从百度、又拍云、新浪、谷歌或微软引用 jQuery，请使用以下代码之一
Baidu CDN:
<head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> </head>
又拍云 CDN:
<head> <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script> </head>
jQuery 语法
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例: $(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
$("p")
代码演示
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
$("#test")
代码演示：
$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(".test")
代码演示：
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
独立文件中使用 jQuery 函数
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：
演示文档：
<head> <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script> </head>
jQuery 事件
1、what什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。
常见DOM事件：
鼠标事件
键盘事件
表单事件
文档/窗口事件
click
keypress
submit
load
dblclick
keydown
change
resize
mouseenter
keyup
focus
scroll
mouseleave
blur
unload
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$("p").click();
$("p").click(function(){ // action goes here!! });
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在jQuery 语法 章节中已经提到过。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：
$("p").click(function(){
$(this).hide();
});
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
jQuery 效果 – 隐藏和显示
jQuery 效果- 隐藏和显示
隐藏、显示、切换，滑动，淡入淡出，以及动画
jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
代码演示：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
})
语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：
代码演示：
$("button").click(function(){ $("p").hide(1000); });
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
代码演示：
$("button").click(function(){ $("p").toggle(); });
语法:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
jQuery 效果 – 淡入淡出
jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
可选的callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
代码演示：
$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow");$("#div3").fadeIn(3000); });
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：
代码演示:
$("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：
代码演示：
$("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); });
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：
代码演示：
$("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); });
jQuery 效果 - 滑动
jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法：
代码演示:
$("#flip").click(function(){ $("#panel").slideDown(); });
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
语法:
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法：
代码演示：
$("#flip").click(function(){ $("#panel").slideUp(); });
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法：
代码演示：
$("#flip").click(function(){ $("#panel").slideToggle(); });
jQuery 效果 – 动画
jQuery animate() 方法允许您创建自定义的动画。
注：实例运行过一次后，需刷新页面方可再次运行实例
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素：
$("button").click(function(){ $("div").animate({left:'250px'}); });
jQuery animate() - 操作多个属性
$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); });
可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从jquery.com 下载Color Animations 插件。
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
代码演示：
$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
代码演示：
$("button").click(function(){ $("div").animate({ height:'toggle' }); });
jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); });
下面的例子把 <div> 元素往右边移动了 100 像素，然后增加文本的字号：
代码演示：
$("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); });
jQuery 效果 – 停止动画
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法，不带参数：
$("#stop").click(function(){ $("#panel").stop(); });
jQuery Callback 方法
Callback 函数在当前动画 100% 完成之后执行。
jQuery 动画的问题
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子：$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。
以下实例在隐藏效果完全实现后回调函数:
$("button").click(function(){ $("p").hide("slow",function(){ alert("The paragraph is now hidden"); }); });
以下实例没有回调函数，警告框会在隐藏效果完成前弹出：
$("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); });
jQuery Chaining
通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
jQuery 方法链接
直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。
不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
提示： 这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
如果需要，我们也可以添加多个方法调用。
提示：当进行链接时，代码行会变得很差。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。
如下书写也可以很好地运行：
$("#p1").css("color","red") .slideUp(2000) .slideDown(2000);
jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。
jQuery HTML
jQuery 捕获
jQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
DOM = Document Object Model（文档对象模型） DOM 定义访问 HTML 和 XML 文档的标准： "W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。"
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
$("#btn1").click(function(){ alert("Text: " + $("#test").text()); });$("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });
下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：
$("#btn1").click(function(){ alert("Value: " + $("#test").val()); });
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
$("button").click(function(){ alert($("#w3s").attr("href")); });
jQuery 设置
设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
下面的例子演示如何通过 text()、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"); });
text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html()：
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); });$("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; }); });
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
$("button").click(function(){ $("#w3s").attr("href","//www.w3cschool.cn/jquery"); });
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性：
$("button").click(function(){ $("#w3s").attr({ "href" : "//www.w3cschool.cn/jquery", "title" : "jQuery 教程" }); });
attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法：
$("button").click(function(){ $("#w3cschool").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });
jQuery 添加元素
通过 jQuery，可以很容易地添加新元素/内容。
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素内部的结尾插入指定内容
- prepend() - 在被选元素内部的开头插入指定内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容。
实例
$("p").append("Some appended text.");
jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
实例
$("p").prepend("Some prepended text.");
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。
不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：
实例
function appendText() { var txt1="<p>Text.</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("Text."); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM $("p").append(txt1,txt2,txt3); // 追加新元素 }
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
$("img").after("在后面添加文本"); $("img").before("在前面添加文本");
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：
function afterText() { var txt1="<b>I </b>"; // 使用 HTML 创建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本 }
jQuery 删除元素
通过 jQuery，可以很容易地删除已有的 HTML 元素。
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
$("#div1").remove();
jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素
$("#div1").empty();
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素：
$("p").remove(".italic");
jQuery CSS 类
jQuery - 获取并设置 CSS 类
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：
$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });
您也可以在 addClass() 方法中规定多个类：
实例
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass() 方法
下面的例子演示如何在不同的元素中删除指定的 class 属性：
$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });
jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
实例
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
jQuery css() 方法
jQuery css() Method
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");
下面的例子将返回首个匹配元素的 background-color 值：
实例
$("p").css("background-color");
设置 CSS 属性
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值：
实例
$("p").css("background-color","yellow");
设置多个 CSS 属性
如需设置多个 CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
实例
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 尺寸
jQuery 尺寸 方法
jQuery 提供多个处理尺寸的重要方法：
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
下面的例子返回指定的 <div> 元素的宽度和高度：
$("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "</br>"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt); });
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
下面的例子返回指定的 <div> 元素的 inner-width/height：
$("button").click(function(){ var txt=""; txt+="Inner width: " + $("#div1").innerWidth() + "</br>"; txt+="Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt); });
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
下面的例子返回指定的 <div> 元素的 outer-width/height：
$("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt); });
jQuery 遍历
什么是遍历？
jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
遍历 DOM
jQuery 提供了多种遍历 DOM 的方法。
遍历方法中最大的种类是树遍历（tree-traversal）。
jQuery 遍历 - 祖先
祖先是父、祖父或曾祖父等等。
通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。
向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
- parent()
- parents()
- parentsUntil()
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，您能够向下遍历 DOM 树，以查找元素的后代。
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
- children()
- find()
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
下面的例子返回每个 <div> 元素的所有直接子元素：
实例
$(document).ready(function(){
$("div").children();
});
您也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
$(document).ready(function(){ $("div").children("p.1"); });
jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){ $("div").find("span"); });
下面的例子返回 <div> 的所有后代：
$(document).ready(function(){ $("div").find("*"); });
jQuery 遍历 - 同胞(siblings)
同胞拥有相同的父元素。
通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历：
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
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(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
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"); });
jQuery AJAX 简介
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新
什么是 AJAX？
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。
您可以在我们的jQuery Ajax 参考手册学会 jQuery Ajax 的具体应用。
您可以在我们的AJAX 教程中学到更多有关 AJAX 的知识。
关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
如果没有 jQuery，AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
jQuery – AJAX load() 方法
jQuery - AJAX load() 方法
jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
这是示例文件（"demo_test.txt"）的内容：
<h2>jQuery and AJAX is FUN!!!</h2> <p id="p1">This is some text in a paragraph.</p>
下面的例子会把文件 "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("External content loaded successfully!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); });
jQuery – AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
如需学习更多有关 GET 和 POST 以及两方法差异的知识，请阅读我们的HTTP 方法 - GET 对比 POST。
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
$("button").click(function(){ $.get("demo_test.php",function(data,status){ alert("Data: " + data + "nStatus: " + status); }); });
$.get() 的第一个参数是我们希望请求的 URL（"demo_test.php"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
提示： 这个 PHP 文件 ("demo_test.php") 类似这样：
<?php echo "This is some text from an external PHP file."; ?>
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
$("button").click(function(){ $.post("demo_test_post.html", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("Data: " + data + "nStatus: " + status); }); });
$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.php")。
然后我们连同请求（name 和 city）一起发送数据。
"demo_test_post.php" 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
提示： 这个 PHP 文件 ("demo_test_post.php") 类似这样：
<?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';$city = isset($_POST['city']) ? htmlspecialchars($_POST['city']) : ''; echo 'Dear ' . $name; echo 'Hope you live well in ' . $city; ?>
jQuery其他
jQuery - noConflict() 方法
如何在页面上同时使用 jQuery 和其他框架？
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 is still working!"); }); });
您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：
var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery is still working!"); }); });
如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：
$.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery is still working!"); }); });
jQuery 实例
jQuery 选择器
$(this).hide()
演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。
$("p").hide()
演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。
$("#test").hide()
演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。
jQuery 事件
jQuery click()
演示 jQuery jQuery click() 事件.
jQuery dblclick()
演示 jQuery dblclick() 事件。
jQuery mouseenter()
演示 jQuery mouseenter() 事件。
jQuery mouseleave()
演示 jQuery mouseleave() 事件。
jQuery mousedown()
演示 jQuery mousedown() 事件。
jQuery mouseup()
演示 jQuery mouseup() 事件。
jQuery hover()
演示 jQuery hover() 事件。
jQuery focus() 和 blur()
演示 jQuery focus() 和 blur() 事件。
jQuery 隐藏/显示
jQuery hide()
演示 jQuery hide() 方法。
jQuery hide() 和 show()
演示jQuery hide() 和 show() 方法。
jQuery toggle()
jQuery toggle() 用于切换 hide() 和 show() 方法。
jQuery hide()
另外一个隐藏文本的实例。
jQuery 淡入淡出
jQuery fadeIn()
演示 jQuery fadeIn() 方法。
jQuery fadeOut()
演示 jQuery fadeOut() 方法。
jQuery fadeToggle()
演示 jQuery fadeToggle() 方法。
jQuery fadeTo()
演示 jQuery fadeTo() 方法
jQuery 滑动
jQuery slideDown()
演示 jQuery slideDown() 方法。
jQuery slideUp()
演示 jQuery slideUp() 方法。
jQuery slideToggle()
演示 jQuery slideToggle() 方法。
jQuery 动画
jQuery animate()
演示简单的 jQuery animate() 方法。
jQuery animate() - 设置多个css属性
演示通过 jQuery animate() 方法 改变样式。
jQuery animate() - 使用相关值
演示如何在 jQuery animate() 方法中使用相关值。
jQuery animate() - 使用预定义值
演示通过 animate() 方法预定义 "hide", "show", "toggle" 值。
jQuery animate()
演示更多 jQuery animate() 方法实例
jQuery animate()
演示更多 jQuery animate() 方法实例 (多个 animate() 回调).
jQuery 停止动画
jQuery stop() 滑动
演示 jQuery stop() 方法。
jQuery stop() 动画 (带参数)
演示 jQuery stop() 方法。
jQuery HTML 获取 和 属性
jQuery text() 和 html() - 获取文本和内容
使用jQuery text() 和 html() 方法获取内容。
jQuery val() - 获取值
使用jQuery val() 方法获取表单的字段值。
jQuery attr() - 获取属性值
使用jQuery attr() 方法获取属性值
jQuery HTML 设置内容和属性
jQuery text(), html(), 和 val() - 设置内容
使用 jQuery text(), html() 和 val() 方法设置内容 。
jQuery text() 和 html() - 设置内容并使用回调函数
使用 text() 和 html() 设置内容并使用回调函数
jQuery attr() - 设置属性值
使用 jQuery attr() 方法设置属性值 。
jQuery attr() - 设置 多个属性值
使用jQuery attr() 方法设置多个属性值。
jQuery attr() - 设置属性值并使用回调函数
设置属性值 + 并使用回调函数调用attr().
jQuery HTML 添加元素/内容
jQuery append()
在选取元素的末尾添加内容
jQuery prepend()
在选取元素的开头添加内容
jQuery append() -插入多个元素
创新新的 text/HTML 元素, jQuery 和 JavaScript/DOM。添加在新元素文本后。
jQuery after() 和 before()
在选取元素的前后添加 HTML 元素。
jQuery after() - 插入多个元素
创新新的 text/HTML 元素,jQuery和 JavaScript/DOM。在选取元素的末尾插入新元素。
jQuery HTML 移除元素/内容
jQuery remove()
移除选取的元素
jQuery empty()
移除选取元素的所有子元素
jQuery remove() - 使用参数
过滤元素并移除
jQuery Get 和 设置 CSS 类
jQuery addClass()
不同元素添加 class 属性
jQuery addClass() - 多个类
使用 addClass() 方法添加多个类
jQuery removeClass()
移除指定元素的类
jQuery toggleClass()
在选取的元素切换（添加/删除）类
jQuery css() 方法
jQuery css() - 返回 CSS 属性
返回第一个匹配元素的css属性值
jQuery css() - 设置 CSS 属性
设置 所有配置元素指定的 CSS 属性
jQuery css() - 设置 CSS 属性
设置多个匹配元素的 CSS 属性
jQuery 尺寸
jQuery - 返回 width() 和 height()
返回指定元素的 width 和 height
jQuery - 返回 innerWidth() 和 innerHeight()
返回指定元素的 inner-width/height
jQuery - 返回 outerWidth() 和 outerHeight()
返回指定元素的 outer-width/height
jQuery - 返回 outerWidth(true) 和 outerHeight(true)
返回指定元素的 outer-width/height (包含外边框)
jQuery - 返回 width() 和 height() of document 和 window
返回 HTML 文档和窗口的 width 和 height
jQuery - 设置 width() 和 height()
设置指定元素的 width 和 height
jQuery 遍历 - 祖先
jQuery parent()
演示 jQuery parent() 方法。
jQuery parents()
演示 jQuery parents() 方法。
jQuery parentsUntil()
演示 jQuery parentsUntil() 方法。
jQuery 遍历 - 后代
jQuery children()
演示 jQuery children() 方法。
jQuery find()
演示 jQuery find() 方法。
jQuery 遍历 - 同胞(siblings)
jQuery siblings()
演示 jQuery siblings() 方法。
jQuery next()
演示 jQuery next() 方法。
jQuery nextAll()
演示 jQuery nextAll() 方法。
jQuery nextUntil()
演示 jQuery nextUntil() 方法。
jQuery AJAX load() 方法
jQuery load()
异步载入文件内容并插入到 <div> 元素中。
jQuery load()
异步载入文件内容中指定的元素内容并插入到 <div> 元素.
jQuery load() - 使用回调函数(callback)
使用 jQuery load() 方法的回调函数。
jQuery AJAX get() 和 post() 方法
jQuery get()
使用 $.get() 方法从服务端异步获取数据
jQuery post()
使用 $.post() 方法从服务端异步获取数据
jquery参考手册
jQuery 选择器
选择器
实例
选取
*
$("*")
所有元素
#id
$("#lastname")
id="lastname" 的元素
.class
$(".intro")
class="intro" 的所有元素
.class,.class
$(".intro,.demo")
class 为 "intro" 或 "demo" 的所有元素
element
$("p")
所有 <p> 元素
el1,el2,el3
$("h1,div,p")
所有 <h1>、<div> 和 <p> 元素
:first
$("p:first")
第一个 <p> 元素
:last
$("p:last")
最后一个 <p> 元素
:even
$("tr:even")
所有偶数 <tr> 元素
:odd
$("tr:odd")
所有奇数 <tr> 元素
:first-child
$("p:first-child")
属于其父元素的第一个子元素的所有 <p> 元素
:first-of-type
$("p:first-of-type")
属于其父元素的第一个 <p> 元素的所有 <p> 元素
:last-child
$("p:last-child")
属于其父元素的最后一个子元素的所有 <p> 元素
:last-of-type
$("p:last-of-type")
属于其父元素的最后一个 <p> 元素的所有 <p> 元素
:nth-child(n)
$("p:nth-child(2)")
属于其父元素的第二个子元素的所有 <p> 元素
:nth-last-child(n)
$("p:nth-last-child(2)")
属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数
:nth-of-type(n)
$("p:nth-of-type(2)")
属于其父元素的第二个 <p> 元素的所有 <p> 元素
:nth-last-of-type(n)
$("p:nth-last-of-type(2)")
属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数
:only-child
$("p:only-child")
属于其父元素的唯一子元素的所有 <p> 元素
:only-of-type
$("p:only-of-type")
属于其父元素的特定类型的唯一子元素的所有 <p> 元素
parent > child
$("div > p")
<div> 元素的直接子元素的所有 <p> 元素
parent descendant
$("div p")
<div> 元素的后代的所有 <p> 元素
element + next
$("div + p")
每个 <div> 元素相邻的下一个 <p> 元素
element ~ siblings
$("div ~ p")
<div> 元素同级的所有 <p> 元素
:eq(index)
$("ul li:eq(3)")
列表中的第四个元素（index 值从 0 开始）
:gt(no)
$("ul li:gt(3)")
列举 index 大于 3 的元素
:lt(no)
$("ul li:lt(3)")
列举 index 小于 3 的元素
:not(selector)
$("input:not(:empty)")
所有不为空的输入元素
:header
$(":header")
所有标题元素 <h1>, <h2> ...
:animated
$(":animated")
所有动画元素
:focus
$(":focus")
当前具有焦点的元素
:contains(text)
$(":contains('Hello')")
所有包含文本 "Hello" 的元素
:has(selector)
$("div:has(p)")
所有包含有 <p> 元素在其内的 <div> 元素
:empty
$(":empty")
所有空元素
:parent
$(":parent")
选择所有含有子元素或者文本的父级元素。
:hidden
$("p:hidden")
所有隐藏的 <p> 元素
:visible
$("table:visible")
所有可见的表格
:root
$(":root")
文档的根元素
:lang(language)
$("p:lang(de)")
所有带有以 "de" 开头的 lang 属性值的 <p> 元素
[attribute]
$("[href]")
所有带有 href 属性的元素
[attribute=value]
$("[href='default.htm']")
所有带有 href 属性且值等于 "default.htm" 的元素
[attribute!=value]
$("[href!='default.htm']")
所有带有 href 属性且值不等于 "default.htm" 的元素
[attribute$=value]
$("[href$='.jpg']")
所有带有 href 属性且值以 ".jpg" 结尾的元素
[attribute|=value]
$("[title|='Tomorrow']")
所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串
[attribute^=value]
$("[title^='Tom']")
所有带有 title 属性且值以 "Tom" 开头的元素
[attribute~=value]
$("[title~='hello']")
所有带有 title 属性且值包含单词 "hello" 的元素
[attribute*=value]
$("[title*='hello']")
所有带有 title 属性且值包含字符串 "hello" 的元素
:input
$(":input")
所有 input 元素
:text
$(":text")
所有带有 type="text" 的 input 元素
:password
$(":password")
所有带有 type="password" 的 input 元素
:checkbox
$(":checkbox")
所有带有 type="checkbox" 的 input 元素
:submit
$(":submit")
所有带有 type="submit" 的 input 元素
:reset
$(":reset")
所有带有 type="reset" 的 input 元素
:button
$(":button")
所有带有 type="button" 的 input 元素
:image
$(":image")
所有带有 type="image" 的 input 元素
:file
$(":file")
所有带有 type="file" 的 input 元素
:enabled
$(":enabled")
所有启用的 input 元素
:disabled
$(":disabled")
所有禁用的 input 元素
:selected
$(":selected")
所有选定的 input 元素
:checked
$(":checked")
所有选中的 input 元素
Query 事件方法
事件方法触发器或添加一个函数到被选元素的事件处理程序。
下面的表格列出了所有用于处理事件的 jQuery 方法。
方法
描述
bind()
向元素添加事件处理程序
blur()
添加/触发 blur 事件
change()
添加/触发 change 事件
click()
添加/触发 click 事件
dblclick()
添加/触发 double click 事件
delegate()
向匹配元素的当前或未来的子元素添加处理程序
die()
在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
error()
在版本 1.8 中被废弃。添加/触发 error 事件
event.currentTarget
在事件冒泡阶段内的当前 DOM 元素
event.data
包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget
返回当前调用的 jQuery 事件处理程序所添加的元素
event.isDefaultPrevented()
返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped()
返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped()
返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace
返回当事件被触发时指定的命名空间
event.pageX
返回相对于文档左边缘的鼠标位置
event.pageY
返回相对于文档上边缘的鼠标位置
event.preventDefault()
阻止事件的默认行为
event.relatedTarget
返回当鼠标移动时哪个元素进入或退出
event.result
包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation()
阻止其他事件处理程序被调用
event.stopPropagation()
阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
event.target
返回哪个 DOM 元素触发事件
event.timeStamp
返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type
返回哪种事件类型被触发
event.which
返回指定事件上哪个键盘键或鼠标按钮被按下
focus()
添加/触发 focus 事件
focusin()
添加事件处理程序到 focusin 事件
focusout()
添加事件处理程序到 focusout 事件
hover()
添加两个事件处理程序到 hover 事件
keydown()
添加/触发 keydown 事件
keypress()
添加/触发 keypress 事件
keyup()
添加/触发 keyup 事件
live()
在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
load()
在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件
mousedown()
添加/触发 mousedown 事件
mouseenter()
添加/触发 mouseenter 事件
mouseleave()
添加/触发 mouseleave 事件
mousemove()
添加/触发 mousemove 事件
mouseout()
添加/触发 mouseout 事件
mouseover()
添加/触发 mouseover 事件
mouseup()
添加/触发 mouseup 事件
off()
移除通过 on() 方法添加的事件处理程序
on()
向元素添加事件处理程序
one()
向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
$.proxy()
接受一个已有的函数，并返回一个带特定上下文的新的函数
ready()
规定当 DOM 完全加载时要执行的函数
resize()
添加/触发 resize 事件
scroll()
添加/触发 scroll 事件
select()
添加/触发 select 事件
submit()
添加/触发 submit 事件
toggle()
在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
trigger()
触发绑定到被选元素的所有事件
triggerHandler()
触发绑定到被选元素的指定事件上的所有函数
unbind()
从被选元素上移除添加的事件处理程序
undelegate()
从现在或未来的被选元素上移除事件处理程序
unload()
在版本 1.8 中被废弃。添加事件处理程序到 unload 事件
jQuery 效果方法
下面的表格列出了所有用于创建动画效果的 jQuery 方法。
方法
描述
animate()
对被选元素应用"自定义"的动画
clearQueue()
对被选元素移除所有排队函数（仍未运行的）
delay()
对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()
移除下一个排队函数，然后执行函数
fadeIn()
逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()
逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()
把被选元素逐渐改变至给定的不透明度
fadeToggle()
在 fadeIn() 和 fadeOut() 方法之间进行切换
finish()
对被选元素停止、移除并完成所有排队动画
hide()
隐藏被选元素
queue()
显示被选元素的排队函数
show()
显示被选元素
slideDown()
通过调整高度来滑动显示被选元素
slideToggle()
slideUp() 和 slideDown() 方法之间的切换
slideUp()
通过调整高度来滑动隐藏被选元素
stop()
停止被选元素上当前正在运行的动画
toggle()
hide() 和 show() 方法之间的切换
jQuery HTML / CSS 方法
下面的表格列出了所有用于处理 HTML 和 CSS 的 jQuery 方法。
下面的方法适用于 HTML 和 XML 文档。除了：html() 方法。
方法
描述
addClass()
向被选元素添加一个或多个类名
after()
在被选元素后插入内容
append()
在被选元素的结尾插入内容
appendTo()
在被选元素的结尾插入 HTML 元素
attr()
设置或返回被选元素的属性/值
before()
在被选元素前插入内容
clone()
生成被选元素的副本
css()
为被选元素设置或返回一个或多个样式属性
detach()
移除被选元素（保留数据和事件）
empty()
从被选元素移除所有子节点和内容
hasClass()
检查被选元素是否包含指定的 class 名称
height()
设置或返回被选元素的高度
html()
设置或返回被选元素的内容
innerHeight()
返回元素的高度（包含 padding，不包含 border）
innerWidth()
返回元素的宽度（包含 padding，不包含 border）
insertAfter()
在被选元素后插入 HTML 元素
insertBefore()
在被选元素前插入 HTML 元素
offset()
设置或返回被选元素的偏移坐标（相对于文档）
offsetParent()
返回第一个定位的祖先元素
outerHeight()
返回元素的高度（包含 padding 和 border）
outerWidth()
返回元素的宽度（包含 padding 和 border）
position()
返回元素的位置（相对于父元素）
prepend()
在被选元素的开头插入内容
prependTo()
在被选元素的开头插入 HTML 元素
prop()
设置或返回被选元素的属性/值
remove()
移除被选元素（包含数据和事件）
removeAttr()
从被选元素移除一个或多个属性
removeClass()
从被选元素移除一个或多个类
removeProp()
移除通过 prop() 方法设置的属性
replaceAll()
把被选元素替换为新的 HTML 元素
replaceWith()
把被选元素替换为新的内容
scrollLeft()
设置或返回被选元素的水平滚动条位置
scrollTop()
设置或返回被选元素的垂直滚动条位置
text()
设置或返回被选元素的文本内容
toggleClass()
在被选元素中添加/移除一个或多个类之间切换
unwrap()
移除被选元素的父元素
val()
设置或返回被选元素的属性值（针对表单元素）
width()
设置或返回被选元素的宽度
wrap()
在每个被选元素的周围用 HTML 元素包裹起来
wrapAll()
在所有被选元素的周围用 HTML 元素包裹起来
wrapInner()
在每个被选元素的内容周围用 HTML 元素包裹起来
jQuery 遍历方法
方法
描述
add()
把元素添加到匹配元素的集合中
addBack()
把之前的元素集添加到当前集合中
andSelf()
在版本 1.8 中被废弃。addBack() 的别名
children()
返回被选元素的所有直接子元素
closest()
返回被选元素的第一个祖先元素
contents()
返回被选元素的所有直接子元素（包含文本和注释节点）
each()
为每个匹配元素执行函数
end()
结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态
eq()
返回带有被选元素的指定索引号的元素
filter()
把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
find()
返回被选元素的后代元素
first()
返回被选元素的第一个元素
has()
返回拥有一个或多个元素在其内的所有元素
is()
根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true
last()
返回被选元素的最后一个元素
map()
把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象
next()
返回被选元素的后一个同级元素
nextAll()
返回被选元素之后的所有同级元素
nextUntil()
返回介于两个给定参数之间的每个元素之后的所有同级元素
not()
从匹配元素集合中移除元素
offsetParent()
返回第一个定位的父元素
parent()
返回被选元素的直接父元素
parents()
返回被选元素的所有祖先元素
parentsUntil()
返回介于两个给定参数之间的所有祖先元素
prev()
返回被选元素的前一个同级元素
prevAll()
返回被选元素之前的所有同级元素
prevUntil()
返回介于两个给定参数之间的每个元素之前的所有同级元素
siblings()
返回被选元素的所有同级元素 Returns all sibling elements of the selected element
slice()
把匹配元素集合缩减为指定范围的子集
jQuery AJAX 方法
AJAX 是一种与服务器交换数据的技术，可以在补充在整个页面的情况下更新网页的一部分。
下面的表格列出了所有的 jQuery AJAX 方法：
方法
描述
$.ajax()
执行异步 AJAX 请求
$.ajaxPrefilter()
在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项
$.ajaxSetup()
为将来的 AJAX 请求设置默认值
$.ajaxTransport()
创建处理 Ajax 数据实际传送的对象
$.get()
使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON()
使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getScript()
使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
$.param()
创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）
$.post()
使用 AJAX 的 HTTP POST 请求从服务器加载数据
ajaxComplete()
规定 AJAX 请求完成时运行的函数
ajaxError()
规定 AJAX 请求失败时运行的函数
ajaxSend()
规定 AJAX 请求发送之前运行的函数
ajaxStart()
规定第一个 AJAX 请求开始时运行的函数
ajaxStop()
规定所有的 AJAX 请求完成时运行的函数
ajaxSuccess()
规定 AJAX 请求成功完成时运行的函数
load()
从服务器加载数据，并把返回的数据放置到指定的元素中
serialize()
编码表单元素集为字符串以便提交
serializeArray()
编码表单元素集为 names 和 values 的数组
jQuery 杂项方法
方法
描述
data()
向被选元素附加数据，或者从被选元素获取数据
each()
为每个匹配元素执行函数
get()
获取由选择器指定的 DOM 元素
index()
从匹配元素中搜索给定元素
$.noConflict()
释放变量 $ 的 jQuery 控制权
$.param()
创建数组或对象的序列化表示形式（可在生成 AJAX 请求时用于 URL 查询字符串中）
removeData()
移除之前存放的数据
size()
在版本 1.8 中被废弃。返回被 jQuery 选择器匹配的 DOM 元素的数量
toArray()
以数组的形式检索所有包含在 jQuery 集合中的所有 DOM 元素
jQuery 属性
方法
描述
context
在版本 1.10 中被废弃。包含被传递到 jQuery 的原始上下文
jquery
包含 jQuery 的版本号
jQuery.fx.interval
改变以毫秒计的动画运行速率
jQuery.fx.off
对所有动画进行全局禁用或启用
jQuery.support
包含表示不同浏览器特性或漏洞的属性集（主要用于 jQuery 的内部使用）
length
包含 jQuery 对象中元素的数目
阅读全文
0 0
- JQuery预习笔记
- jQuery预习笔记
- jQuery预习
- jQuery预习资料
- Java+HTML预习笔记_20140610
- Linux进程管理预习笔记
- 预习
- 预习
- 编译原理预习笔记------名词理解
- 数据结构预习笔记（栈和队列）
- 【预习笔记】为了应试而学习Spring-AOP相关
- 【预习笔记】读几个Java集合类源代码—ArrayList
- 【预习笔记】读几个Java集合类源代码—LinkedList
- C语言预习笔记（预处理和结构体）
- 预习AJAX1
- 预习报告
- 预习报告
- 进程预习
- Static 关键字详解
- JAVA 基本功秘籍
- 【Angular】angular-HttpClient 与服务器通讯 Get Post Put Delete Http 拦截器 请求讲解
- [JSP]Servlet/与内置对象/3.0注解新特性/表单通过servlet提交案例
- 关于Druid执行connection.close()，connection不回收问题
- JQuery预习笔记
- [生而为人-思考] Knowledge Cooking -5th 分享会记录
- 条款1：仔细选择你的容器
- ReactiveCocoa导入
- 648. Replace Words
- memcached（1） 简单的介绍
- bitmap的六种压缩方式，Android图片压缩
- linux下用 free -m 查看内存说明
- 源于百度分享的“一键分享”
