jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由约翰·雷西格（John Resig）在2006年1月的BarCamp NYC上发布第一个版本。目前是由Dave Methvin领导的开发团队进行开发。全球前10000个访问最高的网站中，有65%使用了jQuery，是目前最受欢迎的JavaScript库。
jQuery教程
认识jQuery
- jQuery 是一个 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
- jQuery 很容易学习。
- jQuery 是为事件处理特别设计的。
- jQuery 拥有可操作 HTML 元素和属性的强大方法。
- 通过 jQuery，可以很容易地添加新元素/内容。
- 通过 jQuery，可以很容易地删除已有的HTML元素。
- 通过 jQuery，可以很容易地对 CSS 元素进行操作
- 官方网站
- 官方API
- w3school教程
引入jQuery
jQuery 库可以通过一行简单的标记被添加到网页中。
本地引入
下载地址
Google CDN
Microsoft CDN
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有段落
- $(".test").hide() - 隐藏所有 class="test" 的所有元素
- $("#test").hide() - 隐藏所有 id="test" 的元素
jQuery选择器
jQuery 元素选择器
- jQuery 使用 CSS 选择器来选取 HTML 元素。
- $("p") 选取
元素。 - $("p.intro") 选取所有 class="intro" 的
元素。 - $("p#demo") 选取所有 id="demo" 的
元素。
jQuery 属性选择器
- jQuery 使用 XPath 表达式来选择带有给定属性的元素。
- $("[href]") 选取所有带有 href 属性的元素。
- $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
- $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
- $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
- jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
- 下面的例子把所有
元素的背景颜色更改为红色：$("p").css("background-color","red");
jQuery事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 部分的事件处理方法中：
实例：
This is a heading
This is a paragraph.
This is another paragraph.
jQuery效果
隐藏/显示
- jQuery hide()演示一个简单的 jQuery hide() 方法。
- jQuery hide()另一个 hide() 演示。如何隐藏部分文本。
- jQuery toggle()通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是hide，show，toggle等方法完成后所执行的函数名称。
淡入淡出
- jQuery fadeIn() 用于淡入已隐藏的元素。
- jQuery fadeOut() 方法用于淡出可见元素。
- jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。 - jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是hide，show，toggle等方法完成后所执行的函数名称。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
滑动
- jQuery slideDown() 方法用于向下滑动元素。
- jQuery slideUp() 方法用于向上滑动元素。
- jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
语法：
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
动画
- jQuery animate() 方法用于创建自定义动画。
提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用；它把
$("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");
});
jQuery 停止动画
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
参考
jQuery Callback 函数
Callback 函数在当前动画 100% 完成之后执行。如果您希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数。否则会出错
jQuery - Chaining
通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
实例：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
提示：当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery HTML
jQuery DOM 操作：jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
提示：DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”
jQuery - 获得内容和属性
获得内容 - text()、html() 以及 val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
实例:
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
获取属性 - attr()
实例:
$("button").click(function(){
alert($("#w3s").attr("href"));
});
jQuery - 设置内容和属性
设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
实例：
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text()、html() 以及 val() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
实例：
$("#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 world!
(index: " + i + ")";
});
});
设置属性 - attr()
实例:(改变（设置）链接中 href 属性的值)
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
attr() 方法也允许您同时设置多个属性
实例：（同时设置 href 和 title 属性）
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
attr() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
实例：（带有回调函数的 attr() 方法）
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery - 添加元素
添加新的 HTML 内容
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
实例：
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("img").after("Some text after");
$("img").before("Some text before");
append() 和 prepend() 、after() 和 before()方法能够通过参数接收无限数量的新元素。可通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。、
实例：
function appendText()
{
var txt1="Text.
"; // 以 HTML 创建新元素
var txt2=$("").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}
function afterText()
{
var txt1="I "; // 以 HTML 创建新元素
var txt2=$("").text("love "); // 通过 jQuery 创建新元素
var txt3=document.createElement("big"); // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素
}
jQuery - 删除元素
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
实例：
$("#div1").remove();
$("#div1").empty();
- 过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子：
实例：（删除 class="italic" 的所有元素）
$("p").remove(".italic");
jQuery - 获取并设置 CSS 类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
实例：
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
//add单个class
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
//add多个class
$("button").click(function(){
$("#div1").addClass("important blue");
});
//remove class
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
//添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
- css() - 设置或返回样式属性
返回 CSS 属性
语法：css("propertyname");
实例：$("p").css("background-color");
设置 CSS 属性
语法：css("propertyname","value");
实例：$("p").css("background-color","yellow");
设置多个 CSS 属性
语法：css({"propertyname":"value","propertyname":"value",...});
实例：$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery - 尺寸
width()设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth()返回元素的宽度（包括内边距）。
innerHeight()返回元素的高度（包括内边距）
outerWidth()返回元素的宽度（包括内边距和边框）
outerHeight()返回元素的高度（包括内边距和边框）
outerWidth(true) 返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true) 返回元素的高度（包括内边距、边框和外边距）
更多实例
//返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度
$(document).width();
$(document).height();
$(window).width();
$(window).height()
//设置指定的``元素的宽度和高度
$("#div1").width(500).height(500);
jQuery 遍历
jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
遍历方法中最大的种类是树遍历（tree-traversal）。
jQuery 遍历 - 祖先
向上遍历 DOM 树
parent()
返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
实例：
$(document).ready(function(){
$("span").parent();
});
parents()
返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (
实例:(返回所有
$(document).ready(function(){
$("span").parents("ul");
});
parentsUntil()
返回介于两个给定元素之间的所有祖先元素。
实例：（返回介于 元素之间的所有祖先元素）
$(document).ready(function(){
$("span").parentsUntil("div");
});
jQuery 遍历 - 后代
向下遍历 DOM 树
children()
返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
实例：
$(document).ready(function(){
$("div").children();
});
实例：（例子返回类名为 "1" 的所有 的直接子元素）
$(document).ready(function(){
$("div").children("p.1");
});
find()
返回被选元素的后代元素，一路向下直到最后一个后代。
实例:
$(document).ready(function(){
$("div").find("span");
});
实例:(返回 的所有后代)
$(document).ready(function(){
$("div").find("*");
});
jQuery 遍历 - 同胞
在 DOM 树中水平遍历
siblings()
返回被选元素的所有同胞元素。
实例:
$(document).ready(function(){
$("h2").siblings();
});
实例:(返回属于
$(document).ready(function(){
$("h2").siblings("p");
});
next()
返回被选元素的下一个同胞元素。该方法只返回一个元素。
实例:
$(document).ready(function(){
$("h2").next();
});
nextAll()
返回被选元素的所有跟随的同胞元素。
实例:
$(document).ready(function(){
$("h2").nextAll();
});
nextUntil()
返回介于两个给定参数之间的所有跟随的同胞元素。
实例:(返回介于
$(document).ready(function(){
$("h2").nextUntil("h6");
});
prev()
返回被选元素的前一个同胞元素。该方法只返回一个元素。类比于next()
prevAll()
返回被选元素的所有前面的同胞元素。类比于nextAll()
prevUntil()
返回介于两个给定参数之间的所有前面的同胞元素。类比于nextUntil()
jQuery 遍历 - 过滤
缩写(小)搜索元素的范围
jQuery first()
返回被选元素的首个元素。
实例：（选取首个 元素内部的第一个 $(document).ready(function(){
$("div p").first();
});
jQuery last()
返回被选元素的最后一个元素。
实例:(选择最后一个 元素中的最后一个 $(document).ready(function(){
$("div p").last();
});
jQuery eq()
返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
实例:(选取第二个
$(document).ready(function(){
$("p").eq(1);
});
jQuery filter() 方法
允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
实例:(返回带有类名 "intro" 的所有
$(document).ready(function(){
$("p").filter(".intro");
});
jQuery not() 方法
返回不匹配标准的所有元素。提示：not() 方法与 filter() 相反。
实例:(返回不带有类名 "intro" 的所有
$(document).ready(function(){
$("p").not(".intro");
});
jQuery - AJAX
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery - AJAX load() 加载
jQuery load()
jQuery load() 方法是简单但强大的 AJAX 方法。从服务器加载数据，并把返回的数据放入被选元素中。
语法：$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
实例：（把文件 "demo_test.txt" 的内容加载到指定的 元素中）
$("#div1").load("demo_test.txt");
实例：（把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 元素中）
$("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
实例：
$("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() 方法
通过 HTTP GET 请求从服务器上请求数据。
语法：$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
实例:（使用 $.get() 方法从服务器上的一个文件中取回数据）
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
jQuery $.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 + "\nStatus: " + status);
});
});
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 仍在运行！");
});
});
你可能感兴趣的:(jQuery 教程)