Copyright © 2010
Licensed by Rebecca Murphey under the Creative Commons Attribution-Share Alike 3.0 United States license. You are free to copy, distribute, transmit, and remix this work, provided you attribute the work to Rebecca Murphey as the original author and reference the GitHub repository for the work. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license. Any of the above conditions can be waived if you get permission from the copyright holder. For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to the license.
Table of Contents
$
vs $()
$.fn.hover
$.fn.toggle
$.fn.animate
自定义效果
$.fn.load
$.data
而不是 $.fn.data
List of Examples
true
的值
false
的值
for
循环
while
循环
while
循环,在条件判断部分对计数器i进行自加
do-while
循环
i
的值?
i
的值
$.fn.end
恢复你原来的选择器
$.fn.html
方法作为一个 setter 使用
$.fn.data
存储元素之间的关系
$.fn.bind
方法绑定事件
$.fn.bind
方法将数据绑定到事件
$.fn.one
方法转换处理函数
$.fn.delegate
委托事件
$.fn.live
委托事件
jQuery.fx.speeds
自定义动画速度
$.fn.animate
自定义效果
$.fn.load
to populate an element
$.fn.load
to populate an element based on a selector
jQuery正迅速地变成前端开发人员必需技能。 这本书的目的是提供jQuery JavaScript库的概述;当你完成这本书阅读的时候, 你应该能够用jQuery完成基本的任务并且有能继续学习的坚实基础。 这本书是作为课堂教学教材设计的,但你会发现它对自学也很有用。
这是一个需要动手的课程。我们将会花费一点时间说明一个概念, 然后你将会有机会去做一个与这个概念有关的练习。 可能有些练习会让你觉得烦琐;其它的可能是十足令人气馁的。 这些练习都是没有评分的; 练习的目的只是让你在工作中能轻松地解决使用jQuery常会出现的问题。 练习的示例解决方案都被包含在示例代码中。
这本书用到的代码托管在 Github的库里。 你也可以下载代码的.zip或者.tar文件,解压后在你的服务器上使用。 如果你愿意使用git,欢迎你复制或fork这个库。
在大部分的课程中你会需要以下的工具:
Firefox浏览器
Firefox附加组件Firebug
纯文本编辑器
Ajax部分:本地服务器(例如MAMP、WAMP), 或者可以访问远程服务器的FTP、SSH客户端
JavaScript可以内嵌在页面里,也可以引用外部使用script标签的文件。 引用JavaScript的先后顺序很重要:脚本必须在依赖其的脚本前被引用。
出于页面性能考虑,应在离HTML结尾尽可能近的地方引用JavaScript。 数量较多的JavaScript文件应在部署的时候合并起来。
Example 1.1. 页面内嵌JavaScript的例子
Example 1.2. 引用外部JavaScript的例子
调试工具对JavaScript开发来说是很重要的。 Firefox提供了一款叫Firebug的调试器,这个调试器可以通过附件组件获得; Safari和Chrome则内嵌了调试控制台。
各种控制台的功用:
用来编写JavaScript的单行或多行编辑器
用来查看生成的页面源代码的监视器
用来检查网络请求情况的网络或资源视图
当你在编写JavaScript代码的时候,可以通过如下的方法在控制台输出消息:
输出普通日志消息:console.log()
输出可浏览的对象的日志:console.dir()
输出警告日志:console.warn()
输出错误日志:console.error()
还有其他的控制台方法,但是它们可能会因为浏览器而有所不同。 控制台还提供了设置断点、查看代码中的表达式等方法以供调试使用。
这本书大多数的章节都以一个或多个练习来作出结论。 其中的一些练习,你可以直接在Firebug里完成; 其他的你需要像独立的练习指导的那样,在jQuery脚本标签后引用其他的脚本。
在一些情况下,你需要按顺序查阅jQuery的文档来完成一个练习, 毕竟这本书没有覆盖所有的相关信息。 这是故意的,因为jQuery有很庞大的文档库, 学习如何在文档中找答案是一个很重要的学习过程。
解决问题的几点建议:
首先,你需要确定你完全理解了你要解决的问题。
接下来,确定你要从哪个元素入手解决问题,然后决定如何获得这些元素。 使用Firebug核实你确实获得了你想要的元素
最后,确定你要如何处理这些元素以解决问题。 在写代码前先写注释解释你将如何处理将会很有帮助。
不要害怕犯错误!不要在第一次的时候就试图让你的代码完美! 犯错误然后尝试不同解决方法是学习这个库的一个部分,通过尝试,你会变成一个更好的开发者。 练习的示例解决方案可以从示例代码的/solutions
目录获得。
可以被jQuery对象调用的方法使用$.fn.methodName
描述。 jQuery命名空间中存在的但是不能被jQuery对象调用的方法使用$.methodName
描述。 如果你不能理解这些,不用担心,随着你对本书阅读的深入,这些概念会越来越清晰。
Example 1.3. 例子的样式
//示例代码以这种样式显示
评论以这种样式显示。
关于标题的批注以这种样式显示。
有很多文章和博客涉及jQuery的一些方面。 其中有一些是了不起的;一些是完全错误的。 当你在阅读这些关于jQuery的文章时,要确定它说的是你正在使用的版本, 不要马上复制粘贴代码——花点时间去理解文章里的代码。
这里有一些很优秀的资源可供学习jQuery的过程中使用。 这些jQuery资源最重要的地方是jQuery的源代码:它以代码的形式包含了库里的所有文档。 这不是一个黑盒子——你对库的理解将随着你重复的阅读而呈现指数级的深入—— 我非常建议将这些资源添加到你浏览器的书签中以便经常查阅。
jQuery源代码
jQuery 文档
jQuery 论坛
宜人的书签们
Freenod上的#jquery IRC频道
jQuery 构建在 JavaScript 之上,是一个丰富和极具表现力的语言。这一章节将覆盖 JavaScript 的基本概念,除一些常见陷阱外,大家在此之前不需要使用过 JavaScript。 除个别的地方外也不需要有程序设计经验,有过其它编程语言的使用经验也会对 javaScript 的学习有所帮助。
如果你有兴趣了解更多JavaScript语言,我强力推荐你阅读由Douglas Crockford编写的JavaScript: The Good Parts。
理解语句,变量名称,空格,制表符,以及其他的一些基本javascript语法
Example 2.1. 一个简单的变量声明
var foo = 'hello world';
Example 2.2. 引号外的空格和制表符是没有意义的
var foo = 'hello world';
Example 2.3. 括号内的表达式拥有更高的优先级
2 * 3 + 5; // 返回11,先进行乘法运算 2 * (3 + 5); // 返回16,先进行的是括号内的加法运算
Example 2.4. 制表符只是为了增加代码可读性,并没有什么其他的作用
var foo = function() { console.log('hello'); };
通过基本运算符可以方便的操作数据的值
Example 2.5. 连接字符串
var foo = 'hello'; var bar = 'world'; console.log(foo + ' ' + bar); // 'hello world'
Example 2.6. 乘法和除法
2 * 3; 2 / 3;
Example 2.7. 自加和自减
var i = 1; var j = ++i; // 自加运算符在i之前: j 等于 2; i 等于 2 var k = i++; // 自加运算符在i之后: k 等于 2; i 等于 3
在javascript中,对数字和字符串的操作,偶尔会得到意料之外的结果
Example 2.8. 如果把数字和字符串相加,最后得到字符串
var foo = 1; var bar = '2'; console.log(foo + bar); // 12. uh oh
Example 2.9. 把字符串强制转换成数字类型
var foo = 1; var bar = '2'; // 把字符串转换成数字 console.log(foo + Number(bar));
上例中,当Number对象的构造函数作为一个函数被调用的时候,它会把传入的参数自动转换成数字。除了这种方法,你还可以使用一元运算符+进行强制类型转换,如下例所示。
Example 2.10. 使用一元运算符的+号,把运算符后的变量转换成数字类型。
console.log(foo + +bar);
逻辑运算符使用and和or对操作数进行逻辑判断
Example 2.11. 逻辑与和逻辑或操作符
var foo = 1; var bar = 0; var baz = 2; foo || bar; // 返回1,也就是返回true,判断结果为真。 bar || foo; // 返回1。 foo && bar; // 返回0,也就是返回false,判断结果为假。 foo && baz; // 返回baz的,返回值为2,判断结果为真。 baz && foo; // 返回1,判断结果为真。
也许无法从例子中清晰的反应出来,其中或运算符( ||
) 返回第一个值为真的操作数, 如果两个操作数的值都为假,则返回最后一个操作数。 类似的,与运算符( &&
) 返回第一个值为假的运算符,如果两个操作数的值都为真,则返回最后一个操作数
跳到the section called “真与假” 查看更多关于什么时候判断运算结果为true
和什么时候判断运算结果为 false
的资料。
你有的时候会看到开发者使用以下语句代替if进行流程控制
// 当foo的值为真的时候执行doSomething来处理foo foo && doSomething(foo); // 如果baz为真,则把baz的值赋给bar // 否则bar的值为函数craetBar的返回值 var bar = baz || createBar();
这种风格的代码非常的简洁和优雅,但是同时,特别对于初学者而言,往往晦涩难懂。把它放在这里是希望当你在阅读到这类代码的时候可以读懂。但是如果你还不能够理解它的本质,且没有熟练掌握的话,我们不建议你使用此类代码
比较运算符用来判断两个操作数是否相等
Example 2.12. 比较运算符
var foo = 1;
var bar = 0;
var baz = '1';
var bim = 2;
foo == bar; // 返回false,返回假。
foo != bar; // 返回true,返回真。
foo == baz; 返回真,(注意!)
foo === baz; // 返回false
foo !== baz; // 返回true
foo === parseInt(baz); // 返回true
foo > bim; // 返回false
bim > baz; // 返回true
foo <= baz; // 返回true
有时,你需要当符合某种特定条件的时候再运行你的代码。你可以通过流程控制语句if-else
,来让代码在符合某种条件的时候运行。
Example 2.13. 流程控制
var foo = true; var bar = false; if (bar) { // 这里的代码将不会运行。 console.log('hello!'); } if (bar) { // 这里的代码不会运行。 } else { if (foo) { // 这里的代码会运行 } else { // 如果foo和bar都为false,则这里的代码会被运行。 } }
虽然当if
语句后面只跟有一行代码时,该代码不加括号也是可以运行的。但是为了代码可读性,代码前后通常也加上括号
请注意,不要在if
/esle
代码段中多次定义同一个函数,这会引起意想不到的结果
为了熟练的使用流程控制语句,我们必须要知道在变量值中哪些类型的值会被判定为真,哪些类型的值会被判定为假,有时看起来像是假的值却被判定为真
Example 2.14. 被判断义为 true
的值
'0'; //字符串0。 'any string';//任意字符串。 []; // 一个空数组。 {}; // 一个空对象。 1; // 不为0的数。
Example 2.15. 被判定为false
的值
0; ''; // 一个空串。 NaN; // JavaScript中的 "not-a-number"(NaN是一个不确定的数)。 null; undefined; // 注意 -- undefined 可以被重新定义!
Example 2.16. 三元运算符
// 如果bar为1则,foo值为1。 // 否则,foo的值为0。 var foo = bar ? 1 : 0;
三元运算符不一定必须要把返回值赋值给变量。
Example 2.17. 一个switch分支语句
switch (foo) { case 'bar': alert('the value was bar -- yay!'); break; case 'baz': alert('boo baz :('); break; default: alert('everything else is just ok'); break; }
Switch语句在JavaScript中并不是经常被人们用到,通常人们可以通过创建 一个对象来更好的完成这项工作,下面就是一个例子。
var stuffToDo = { 'bar' : function() { alert('the value was bar -- yay!'); }, 'baz' : function() { alert('boo baz :('); }, 'default' : function() { alert('everything else is just ok'); } }; if (stuffToDo[foo]) { stuffToDo[foo](); } else { stuffToDo['default'](); }
我们在以后的章节来了解对象。
循环语句可以让一段代码执行一定的次数。
Example 2.18. 循环语句
// logs 'try 0', 'try 1', ..., 'try 4' for (var i=0; i<5; i++) { console.log('try ' + i); }
在 Example 2.18, “循环语句”,即使我们在变量名 i
前使用关键字var,这也并不意味着 i
变量的作用域在 循环体内。我们将在后面的章节讨论变量的作用域。
for
循环由以下几个部分构成
for ([initialisation初始化]; [conditional条件判断]; [iteration迭代]) [loopBody循环体]
初始化部分在循环开始前执行一次。可以在此声明循 欢中需要用到的变量
条件判断部分在每次循环前执行,它的返回值决定了 循环是否继续。如果返回值为false,那么循环将被终止
迭代部分该部分在每次循环结束时执行,你可以借此改变重要变 量的状态和值。通常在这里进行自加和自减运算,让循环更接近终止。
循环体 每次循环时执行,你可以在( {...}
)中放入你想运行的代码。
这是一个典型的 for
循环:
Example 2.19. 典型的for
循环
for (var i = 0, limit = 100; i < limit; i++) { // 代码将要执行100次。 console.log('Currently at ' + i); // 最后输出的i值为99。 }
while
循环和if
语句类似,除了它的函数体 会一直循环执行,直到条件部分返回false。
while ([条件判断]) [循环体]
这里是一个典型的 while
循环:
Example 2.20. 典型的 while
循环
var i = 0; while (i < 100) { // 代码会被执行100次。 console.log('Currently at ' + i); i++; // i的自加。 }
你会看到我们在循环体内进行计数器i的自加运算。事实上我们也可以在条件判断部分进行自加运算,比如:
Example 2.21. while
循环,在条件判断部分对计数器i进行自加
var i = -1; while (++i < 100) { // 这里的代码会被执行100次 console.log('Currently at ' + i); }
注意我们是从-1
开始并且把自加运算符放在变量前(++i
).
该循环和while循环类似,循环体在条件判断之前执行。
do [循环体] while ([条件判断])
这是一个 do-while
循环:
Example 2.22. 一个 do-while
循环
do { // 即使条件判断返回值为false,循环体还是被执行了一次。 alert('Hi there!'); } while (false);
这些循环类型很少用,仅仅在至少执行一次的情况下才需要这种循环。无论如何,意识到这一点就很好。
通常,一个循环的终止从条件语句来判断其结果并不一定是true,它可能是在循环体中使用了break
语句而停止了循环。
Example 2.23. 停止循环
for (var i = 0; i < 10; i++) { if (something) { break; } }
你不需要执行更多的循环体就可以继续循环。这里将使用 continue
语句。
Example 2.24. 跳过下一个循环迭代
for (var i = 0; i < 10; i++) { if (something) { continue; } // 以下语句将被执行 // 如果条件"something" 没有匹配 console.log('I have been reached'); }
JavaScript 有一些保留的 “关键字,” 或者这些单词在语言中有其它含义。 除非你以那样的含义使用它们,否则你应该避免在你的代码中使用这些关键字。
break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile
数组是一列没有索引的数值。它们是存储一组相同类型(如字符串)数组项的便捷方法,尽管实际上,一个数组可以包含多种类型数组项,甚至包含其它数组。
Example 2.25. 简单数组
var myArray = [ 'hello', 'world' ];
Example 2.26. 通过索引访问数组项
var myArray = [ 'hello', 'world', 'foo', 'bar' ]; console.log(myArray[3]); // logs 'bar'
Example 2.27. 测试数组长度
var myArray = [ 'hello', 'world' ]; console.log(myArray.length); // logs 2
Example 2.28. 改变数组项值
var myArray = [ 'hello', 'world' ]; myArray[1] = 'changed';
当数组值可能以 Example 2.28, “改变数组项值” 的方式改变时,它们通常不被考虑。
Example 2.29. 加入元素到数组中
var myArray = [ 'hello', 'world' ]; myArray.push('new');
Example 2.30. 关于数组
var myArray = [ 'h', 'e', 'l', 'l', 'o' ]; var myString = myArray.join(''); // 'hello' var mySplit = myString.split(''); // [ 'h', 'e', 'l', 'l', 'o' ]
对象包含一个或多个key-value对。其中 key 可以是任何字符。value 部分可以是任何数值类型:a number, a string, an array, a function, 甚至可以是另外一个 object。
[Definition: 当这些数值中有一个函数时,它们调用对象的一个 method 方法。] 否则,它们调用属性。
恰好,JavaScript 中所有东西都是一个对象 - 数组、函数、成员、甚至字符串 — 它们都拥有属性和方法。
Example 2.31. 创建一个对象常量
var myObject = { sayHello : function() { console.log('hello'); }, myName : 'Rebecca' }; myObject.sayHello(); // logs 'hello' console.log(myObject.myName); // logs 'Rebecca'
当创建一个对象常量时,你应该注意每一对 key-value 中的 key 都能被写成任何有效的 javaScript 标识符,一个字符串(带引号) 或是一个数值:
var myObject = { validIdentifier: 123, 'some string': 456, 99999: 789 };
对象常量在代码组织上非常有用;更多信息,请阅读 Rebecca Murphey 写得 Using Objects to Organize Your Code。
函数是包含需要反复执行的代码块。函数可以没有参数或包含多个参数,能返回任意一个值。
函数的创建有多种方法:
Example 2.32. 函数申明
function foo() { /* do something */ }
Example 2.33. 命名函数表达式
var foo = function() { /* do something */ }
在设置一个函数名时我更喜欢命名函数表达式,这有相当的深度和技术因素。 你可能在其它的 JavaScript 代码中看到过这两种方法的使用。
Example 2.34. 一个简单函数
var greet = function(person, greeting) { var text = greeting + ', ' + person; console.log(text); }; greet('Rebecca', 'Hello');
Example 2.35. 函数返回一个值
var greet = function(person, greeting) { var text = greeting + ', ' + person; return text; }; console.log(greet('Rebecca','hello'));
Example 2.36. 函数返回另一个函数
var greet = function(person, greeting) { var text = greeting + ', ' + person; return function() { console.log(text); }; }; var greeting = greet('Rebecca', 'Hello'); greeting();
JavaScript中一个常见的模式是自执行匿名函数。这个模式创建一个函数表述式然后立即执行函数。这个模式为避免你在代码中乱用全局命名空间将非常有用 -- 没有在函数内声明的变量在函数外也是可见的
Example 2.37. 一个自执行的匿名函数
(function(){ var foo = 'Hello world'; })(); console.log(foo); // undefined!
在 JavaScript 中, 函数是"一等公民" -- 它们能赋予变量或作为参数传递给其它函数。函数作为参数传递在 jQuery 中是一个非常普遍的习惯。
Example 2.38. 以参数的方式传递一个匿名函数
var myFn = function(fn) { var result = fn(); console.log(result); }; myFn(function() { return 'hello world'; }); // logs 'hello world'
Example 2.39. 以参数的方式传递一个命名函数
var myFn = function(fn) { var result = fn(); console.log(result); }; var myOtherFn = function() { return 'hello world'; }; myFn(myOtherFn); // logs 'hello world'
JavaScript 提供了一个方法来测试变量类型。但是,其结果可能是令人困惑的 -- 比如,一个数组类型是 "object"。
当准备检测特定值的类型时,通常惯例是使用 typeof
运算符。
Example 2.40. 测试各种变量的类型
var myFunction = function() { console.log('hello'); }; var myObject = { foo : 'bar' }; var myArray = [ 'a', 'b', 'c' ]; var myString = 'hello'; var myNumber = 3; typeof myFunction; // 返回 'function' typeof myObject; // 返回 'object' typeof myArray; // returns 'object' -- careful! typeof myString; // 返回 'string'; typeof myNumber; // 返回 'number' typeof null; // returns 'object' -- careful! if (myArray.push && myArray.slice && myArray.join) { // 可能是个数组 // (这叫动态类型"duck typing") } if (Object.prototype.toString.call(myArray) === '[object Array]') { // 定义一个数组! // 这是一个被广泛验证过的可靠方法 // to 判断一个特殊值是不是一个数组。 }
jQuery 提供了实用方法来帮助你检测一个任意值的类型。这些内容将在后面涉及。
"Scope" 引用的变量在指定时间内的一段代码中的可用性refers to the variables that are available to a piece of code at a given time. 一个不标准的作用域将导致令人沮丧的调试体验。
当使用 var
关键字描述函数中的一个变量时,它作为那个函数中的代码仅仅是个变量 -- 而函数外的代码不能访问这个变量。在其它方面,定义为 inside 的函数 will 能访问到所描述的变量。
此外,在函数里没有使用 var
关键字描述的变量对函数来讲不是局部的 -- JavaScript 将贯穿所有作用域直到 window 作用域以发现之前定义的变量位置。如果变量之前没有定义,它将创建一个全局变量,这会是一个意想不到的结果。
Example 2.41. 函数访问同一作用域内定义的变量
var foo = 'hello'; var sayHello = function() { console.log(foo); }; sayHello(); // logs 'hello' console.log(foo); // also logs 'hello'
Example 2.42. 代码作用域外定义的变量不能访问该变量Code outside the scope in which a variable was defined does not have access to the variable
var sayHello = function() { var foo = 'hello'; console.log(foo); }; sayHello(); // logs 'hello' console.log(foo); // doesn't log anything
Example 2.43. 拥有相同名字的变量可以以不同的值存在不同的作用域中
var foo = 'world'; var sayHello = function() { var foo = 'hello'; console.log(foo); }; sayHello(); // logs 'hello' console.log(foo); // logs 'world'
Example 2.44. 函数定义后可看见变量值的改变
var myFunction = function() { var foo = 'hello'; var myFn = function() { console.log(foo); }; foo = 'world'; return myFn; }; var f = myFunction(); f(); // logs 'world' -- uh oh
Example 2.45. Scope insanity
// 一个自执行的匿名函数 (function() { var baz = 1; var bim = function() { alert(baz); }; bar = function() { alert(baz); }; })(); console.log(baz); // baz 在函数外没有定义 bar(); // bar 在匿名函数外被定义 // 因为它没有描述为var;而且, // 因为它是作为 baz 在同一作用域中被定义的, // 它能访问 baz 即使其它代码 // 在函数之外 bim(); // bim 没有在匿名函数外定义, // 于是其结果将是一个错误
闭包是作用域概念的一个扩展 — 函数能访问函数创建时作用域的变量functions have access to variables that were available in the scope where the function was created. 如果这很困惑,不要担心:通过例子你能更好的理解闭包。
在 Example 2.44, “函数定义后可看见变量值的改变” 我们了解到函数是如何访问到改变的变量值we saw how functions have access to changing variable values. 这种行为同样存在于循环的函数定义中 -- The same sort of behavior exists with functions defined within loops -- 函数观察到变量在函数定义后的改变,产生5次点击警告。the function "sees" the change in the variable's value even after the function is defined, resulting in all clicks alerting 5.
Example 2.46. 如何锁定i
的值?
/* this won't behave as we want it to; */ /* every click will alert 5 */ for (var i=0; i<5; i++) { $('click me
').appendTo('body').click(function() { alert(i); }); }
Example 2.47. 以一个闭包的方式锁定i
的值
/* fix: “close” the value of i inside createFunction, so it won't change */ var createFunction = function(i) { return function() { alert(i); }; }; for (var i=0; i<5; i++) { $('click me
').appendTo('body').click(createFunction(i)); }
你不能安全的操作此文档,除非文档处于 “ready.” 状态 jQuery 会为你检测准备状态是否就绪; 代码包含的 $(document).ready()
只有在页面被 JavaScript 代码执行时才运行。
Example 3.1. A $(document).ready() block
$(document).ready(function() { console.log('ready!'); });
这是 $(document).ready()
的简写,那样你就可以不时查看它; 然而, 如果你使用jQuery并不是那样娴熟,我建议你最好别用它。
Example 3.2. $(document).ready() 简写
$(function() { console.log('ready!'); });
你也能传递一个命名函数到 $(document).ready()
用来替换匿名函数的传递。
Example 3.3. 用命名函数替代匿名函数传递
function readyFn() { // 代码在文档准备好后就运行 } $(document).ready(readyFn);
这是 jQuery 最基础的概念,意思是 “选择一些元素然后通过它们做一些事” 除一些非标准的选择器外,jQuery 支持大部分的 CSS3 选择器。若要了解完整的选择器参考, 请访问http://api.jquery.com/category/selectors/.
以下是一些通用选择技术的例子
Example 3.4. 通过ID选择元素
$('#myId'); // 每一页ID都必须是唯一的
Example 3.5. 通过类名选择元素
$('div.myClass'); // 如果指定元素类型性能将得以提升
Example 3.6. 通过属性选择元素
$('input[name=first_name]'); // 当心,这可能会非常慢
Example 3.7. 通过组合CSS选择器选择元素
$('#contents ul.people li');
Example 3.8. 伪选择器
$('a.external:first'); $('tr:odd'); $('#myForm :input'); // 在一个form中选择所有的输入项 $('div:visible'); $('div:gt(2)'); // 除去1,3之外的所有项 $('div:animated'); // 所有当前项动态区分 all currently animated divs
当你使用 作为参考, 这里的jQuery代码被用于检测此元素是显示还是隐藏,为了清楚也添加了注释: 一旦你已经指定一个选择器,你将希望知道它是否正常工作。你可能倾向于这样做: 这不会工作的。当你使用 相反,你需要测试选择器的长度属性,并告诉你包含了多少元素。如果回答是 0, 当以布尔值使用时候起长度属性将被赋予 false // 当长度属性作为布尔值时它的计算值将为 false。 Example 3.9. 测试选择器是否包含多个元素 每次你指定了一个选择器,一段代码运行,jQuery 都不会为你做任何的 caching 工作。如果你已经指定了选择器而你又需要重新指定它时,它将在变量中保存选择器,而不是反复的指定它。 Example 3.10. 在变量中保存选择器 在 Example 3.10, “在变量中保存选择器”, 变量名以一个美元符号开始。不像在其它的语言中,在 JavaScript 中没有特定的指定美元符号 -- 而是使用其它字符 。我们在这里使用它是为了表明变量包含一个 jQuery 对象。这是惯例 -- 一种 匈牙利命名法 -- 这仅仅是惯例,而不是强制性的。 一旦你保存了选择器,你就能在保存的变量中调用 jQuery 方法,就像在原来的选择器中调用一样。 只有当你指定一个选择器后,选择器才会从页面取回元素。如果你添加元素到页面延迟了,你必须重新选择或将它们添加到存储在变量中的选择器中。当 DOM 改变时被保存的选择器不会自动更新。 有时你有一个选择器包含比此后的还要多;在这种情况下,你需要改善你的选择器。 jQuery 提供了多种方法用来校正你之后的精确 offers several methods for zeroing in on exactly what you're after. Example 3.11. 改善选择器 jQuery 提供了多个伪选择器帮助你发现表单中的元素;这些尤其有帮助,因为它能在使用标准CSS选择器的基于状态或类型的form元素中艰难区分these are especially helpful because it can be difficult to distinguish between form elements based on their state or type using standard CSS selectors. 选择 选择输入 选择选中输入 选择禁用表单元素 选择启用表单元素 选择 选择 选择 选择 选择 选择 选择被选中的选项 选择 选择 Example 3.12. 使用表单相关的伪选择器 一旦你指定一个选择器, 你就能调用它的方法。 这些方法通常带来两种不同的口味: getters 和 setters. Getters 返回第一个选择元素的属性;setters 设置所有选择元素为同一属性。 如果你调用一个选择器方法,其方法返回一个 jQuery 对象,你能继续调用这个对象的 jQuery 方法而不用处理分号。 Example 3.13. 链式 如果你要写个chain包含多个步骤,如果你以多行的方式处理 chain,那么你(和之后进来的人)可能会发现你的代码更具可读性。 Example 3.14. 格式化链式代码 如果你在链中修改你的选择器,jQuery 提供了 Example 3.15. 使用 链式是非常强大的,自从它随着 jQuery 流行起来后众多 JavaScript 库都加入了此功能。 然而,它必须被小心使用。大量的链式处理会给代码的修改和调试带来更大的困难。这里没有链要保持多久所必须遵守的规则 -- 仅仅知道它是比较容易被搬运的。 jQuery “overloads”(重载) 它的方法, 此方法被用于设置值或取得一个值 so the method used to set a value generally has the same name as the method used to get a value. 当方法被用于设置值时, 它将调用一次 setter. 当方法被用于取得(或读取)值时, 它将调用一次 getter. Setters 作用于选择器里的所有元素; getters 将取得选择器匹配的第一个元素。 Example 3.16. Example 3.17. html 方法作为一个 getter 使用 Setters 返回一个 jQuery 对象, 允许你在选择器中继续调用 jQuery 方法; getters 返回它们想要的 ,这意味着你不能在使用 getter 的返回值中继续调用 jQuery 方法。 jQuery 包含便捷的方法取得和设置元素的 CSS 属性。 CSS 属性通常包含一个连字符而在 JavaScript 中是 camel cased 形式。比如, CSS 属性 Example 3.18. 取得 CSS 属性 Example 3.19. Setting CSS properties 参数样式的注释我们将放在第二行 -- 一个对象将包含多个属性。这是传递多个参数到函数的通用方法,更多 jQuery setter 方法接受对象一次性设置多个值。 作为一个 getter, Example 3.20. 使用类 类用于存储元素的状态信息时也非常有用,比如表明选择的元素。 jQuery 提供了多个方法来获得和修改元素的大小和位置信息。 Example 3.21, “基本尺寸方法” 的代码简单描述了 jQuery 的尺寸功能; 若要获得有关jQuery尺寸方法完整的信息,请访问http://api.jquery.com/category/dimensions/. Example 3.21. 基本尺寸方法 一个元素属性能包含有应用的有用信息,所以取得和设置它们是非常重要的。 Example 3.22. 设置属性 这次, 我们分解对象为多行。记住,在 JavaScript 中,空白是无关紧要的,这样你就可以自由的使用它让你的代码更具可读性!最后成品时你能使用压缩工具将不需要的空白给去除掉。 Example 3.23. 取得属性 一旦你拥有jQuery选择器,你就能使用它作为起始点去发现其它的元素。 jQuery遍历方法完整的文档,请访问http://api.jquery.com/category/traversing/. 在遍历很长的文档时要小心 -- 完整的遍历有必要保留你的文档结构,除非你从服务端到客户端创建了完整应用,否则一些事将很难保证。一个或两个步骤的遍历是好的,但是当你从一个容器到另一个容器时需要避免遍历的发生。 Example 3.24. 使用遍历方法围绕DOM移动 你也能通过一个使用 Example 3.25. 通过选择器迭代 一旦你指定了一个选择器, 乐趣就开始了。你能改变,移动,删除和克隆元素。你还能通过简单的语法创建一个新元素。 有关 jQuery 操作方法的完整文档,请访问 http://api.jquery.com/category/manipulation/. 这里有一些方法帮助你改变已有的元素。在多数通常的任务中,你能执行内部HTML或元素属性的改变。jQuery 为这些操作的有序提供了简单, 跨浏览器的方法。你也能在典型的getter中使用相同的方法获取元素信息。 我们要看到的例子将贯穿这一节,但是特殊的,这有一些你可以使用的新的方法用于获取和设置元素信息。 改变这些元素是琐碎的,但请记住这些改变将作用于选择器的 all 元素, 因此如果你打算改变一个元素,在调用setter方法前请确认你的选择器。 当方法作为getters使用时,它们通常只工作在选择器的第一个元素,并且不会返回 jQuery 对象,所以你不能给它们链式添加方法。一个值得注意的例外是 获取或设置html文档。 获取或设置text文档;HTML将被剥离。 获取和设置提供属性的值 获取或设置作为整型选择器的第一个元素的pixels宽度。 获取或设置作为整型选择器的第一个元素的pixels高度。 为选择器中的第一个元素取得包含位置信息的对象,相对于它们第一个位置的祖先。这只有一个getter 获取或设置form元素的值。 Example 3.26. 改变一个元素的HTML 这里有一些移动DOM元素的方法;通常,这里有两个途径: 放置与另外元素有关的选择元素Place the selected element(s) relative to another element 放置一个与选择元素有关的元素Place an element relative to the selected element(s) 在例子中, jQuery 提供了 这个方法为你进行的更多检测将依赖于那些你已经选择的元素,是否你将需要保存那些你加入到页面的元素引用。如果你需要保存引用,你也将生效第一次处理 -- 放置与其它元素有关的选择元素 -- 在这个例子中,作为你放置元素的返回值。 Example 3.27. 使用不同的方法移动元素 当你使用 $.fn.appendTo 方法时, 你将移动元素;有时你想要以拷贝元素替代。在这种情况下, 你将首先使用 $.fn.clone 。 Example 3.28. 拷贝一个元素 如果你需要拷贝相关数据和事件,请确定传递 这里有两种方法将元素从页面删除: 如果你需要将数据和事件的持久性,你需要使用 如果你对一个元素做很多的操作, 如果你要留下元素而又要简单的删除它们的内容,你能使用 jQuery 提供了一个简单而优雅的途径,使用与你选择器同样的方法 Example 3.29. 创建新元素 This is a new paragraph Example 3.30. 创建一个包含属性对象的新元素 注意我们包含在第二个参数中的属性对象,属性名类被引用,而属性名的文本和链接却不是。属性名通常不被引用, 除非它们作为保留字(在这个例子中是作为类)。 当你创建一个新元素,它不会立刻添加到你的页面。一旦它被创建这里会有几个方法添加一个元素到页面里。 Example 3.31. 从页中获得一个新元素 New element 严格地讲,你不必在变量中保存创建的元素 -- 你能直接在$()后调用此方添加元素到页面。然后, 大多数时间你将引用添加的元素,而不需要在后面选择它。 你甚至能在添加元素的时候创建它,但这个例子请注意你不能获得新创建的元素的引用。 Example 3.32. 同一时刻创建和添加元素到页面 在页面创建新元素的语法非常简单,模版会忽略在反复添加到DOM时所产生的巨大性能代价。如果你添加更多的元素到同一容器里,你将连接所有的html到单一的字符串中,接着追加字符到容器里替换掉一次一个的元素追加方式。你能使用一个数组收集所有的片段,然后 jQuery 属性操作的能力是很广泛的。基本的改变是很简单的,但 $.fn.attr 方法也允许完成更多复杂的操作。 Example 3.33. 操作单一属性 Example 3.34. 操作多个属性 Example 3.35. 使用函数去确定新的属性值 Open the file Select all of the div elements that have a class of "module". Come up with three selectors that you could use to get the third item in the #myList unordered list. Which is the best to use? Why? Select the label for the search input using an attribute selector. Figure out how many elements on the page are hidden (hint: .length). Figure out how many image elements on the page have an alt attribute. Select all of the odd table rows in the table body. Open the file Select all of the image elements on the page; log each image's alt attribute. Select the search input text box, then traverse up to the form and add a class to the form. Select the list item inside #myList that has a class of "current" and remove that class from it; add a class of "current" to the next list item. Select the select element inside #specials; traverse your way to the submit button. Select the first list item in the #slideshow element; add the class "current" to it, and then add a class of "disabled" to its sibling elements. Open the file Add five new list items to the end of the unordered list #myList. Hint: Remove the odd list items Add another h2 and another paragraph to the last div.module Add another option to the select element; give the option the value "Wednesday" Add a new div.module to the page after the last one; put a copy of one of the existing images inside of it. 直到现在,我们已经在 jQuery 对象调用上完全使用了此方法。例子: 大部分对 jQuery 对象的方法调用都是这样的;这些方法表明自己是 然而,还有一些方法在选择器上不起作用;这些方法表明自己是 jQuery 命名空间的一部分,这是作为核心 jQuery 方法最好的思路。 这的区别对 jQuery 新手是难以分辨的。这的东西你需要记住: jQuery 选择器用于 这里有一些对象方法和核心方法拥有同样名字的例子,例如 jQuery 在 去除行间和末尾的空白。 在数组和对象上迭代。 还有一个方法 在数组中返回值索引,如果值不在数组中就为 -1 。 使用后面对象的属性改变第一个对象的属性。 如果你不打算改变任何对象你可传递 返回一个函数它总是运行在一个提供的作用域里 — 就是说, 如果你拥有一个带方法的对象,你能传递对象和方法名去返回一个总运行在对象作用域里的函数。 在 "JavaScript basics" 章节被提及,jQuery 提供一些基础的实用方法去检测特定值的类型。 Example 4.1. 校验任意值的类型e 作为你在 jQuery 的工作进展, As your work with jQuery progresses, 你将发现这里常有一些你准备作为元素要存储的数据。you'll find that there's often data about an element that you want to store with the element. 在 JavaScript 里,In plain JavaScript, 你可能直接将属性加入到 DOM 元素中,you might do this by adding a property to the DOM element, 但是你必须处理在一些浏览器中的内存泄露。but you'd have to deal with memory leaks in some browsers. jQuery 提供了一个简洁的方法存储相关数据到元素中,它帮你管理内存问题。offers a straightforward way to store data related to an element, and it manages the memory issues for you. Example 4.2. 存储和检索一个元素的相关数据 你能存储一个元素任何种类的数据,当你进行一个复杂应用开发时它们的重要性难以用语言表达 。这一课的目的,我们将使用 在这的例子中,我们可能需要在一组列表项和它的内部划分上建立一种关系。我们建立的这个关系在每一个单独时间里与这些条目相互作用,但是一个更好的解决方案是一旦这个关系创建好,通过使用 Example 4.3. 使用 除了传递 尽管 jQuery 消除了大部分 JavaScript 在浏览器间的差异性,这里仍有很多场合是你的代码需要知道浏览器的环境 there are still occasions when your code needs to know about the browser environment. jQuery 提供的 虽然不赞成使用 如果你在其它 JavaScript 库中实用了 当你把 jQuery 设为 no-conflict 模式时,你有替代 Example 4.4. 将 jQuery 设为 no-conflict 模式 你能通过在自执行的匿名函数中封装你的代码而继续使用标准的 Example 4.5. 在自执行匿名函数中使用 $ jQuery提供了简单的方法为元素绑定事件处理函数。 当事件发生的时候,所提供的函数将会执行。 函数的内容取决于被点击的元素。 想要获得关于jQuery事件的详细内容请访问http://api.jquery.com/category/events/。 事件处理的函数可以接收事件对象为参数。 事件对象可以用来判断事件的类型以达到阻止该事件的默认动作的目的 想要获得关于事件对象的详细内容请访问http://api.jquery.com/category/events/event-object/。 jQuery为常用的事件提供了简便的绑定方法,这些方法是日后最常用的方法。 这些方法是jQuery的 Example 5.1. 使用便捷的方式绑定 Example 5.2. 使用 Example 5.3. 使用 有时候你需要一个只执行一次的特殊处理函数,或者不希望有处理函数运行,或者需要运行另一个不同的处理函数。 jQuery为此提供了 Example 5.4. 使用 如果你想只在某个元素第一次被点击的时候而不是之后的每次都做一些复杂的初始化, 你可以使用 Example 5.5. 取消选择器下所有的点击事件处理函数绑定 Example 5.6. 取消特定点击事件处理函数绑定 由于复杂的应用和插件的共享,为了防止无意中取消了你不知道或者无从知道的事件的绑定, 为事件添加命名空间是很必要。 Example 5.7. 命名空间事件 Namespacing events 就如在概述中提到的一样,事件处理函数可以接收包含很多属性和方法的事件对象。 事件对象常使用preventDefault方法阻止事件默认动作的执行。 当然,事件对象还包含了其它的有用的属性和方法,包括: 事件触发时鼠标相对于页面左上角的位置。 事件的类型(例如“click”)。 按下的按钮或按键。 事件被绑定时传入的所有数据。 初始化事件的DOM元素。 阻止事件默认方法的执行(例如点击一个链接)。 停止事件影响其它元素。 除了事件对象之外,事件处理函数也可以通过 Example 5.8. 阻止链接被访问 jQuery提供了 Example 5.9. 以正确的方式触发事件处理函数 你将会频繁地使用jQuery添加新的元素到页面中,你将有可能需要绑定一些已经存在在页面上的事件到这些新元素上。 相对于在为页面添加元素的时候重复绑定事件,你可以使用事件委托。 通过事件委托将事件绑定到容器元素,当事件被触发的时候,可以知道事件是在哪个容器元素被触发。 如果这听起来很复杂,幸运地jQuery提供了 当大多数的人在处理后来才被添加到页面的元素时才使用委托,就算你从不添加更多的元素到页面,委托也有性能上的优势。 绑定事件处理器到成百上千的不同元素所需的时间并不是小数目,如果你有很多元素,你应该考虑将相关的事件委托到一个容器元素中。 从jQuery 1.3开始提供了 Example 5.10. 使用 Example 5.11. 使用 如果你需要移除已委托的事件,你不能只是简单地解除绑定。 对使用 Example 5.12. 解除委托事件的绑定 jQuery提供了两个相关事件助手函数让你减少打字次数。 在jQuery 1.4之前, Example 5.13. hover助手函数 和 Example 5.14. toggle助手函数 Open the file Set the value of the search input to the text of the label element Add a class of "hint" to the search input Remove the label element Bind a focus event to the search input that removes the hint text and the "hint" class Bind a blur event to the search input that restores the hint text and "hint" class if no search text was entered What other considerations might there be if you were creating this functionality for a real site? Open the file Hide all of the modules. Create an unordered list element before the first module. Iterate over the modules using Bind a click event to the list item that: Shows the related module, and hides any other modules Adds a class of "current" to the clicked list item Removes the class "current" from the other list item Finally, show the first tab. jQuery可以很容易让你添加简单的特效到你的页面。效果 可以用基本设置,也可以自定义持续时间,甚至 还可以执行一个CSS属性设置的自定义动画。 关于这章节更加完整的细节,请参考http://api.jquery.com/category/effects/. jquery常用的基本效果方法: 显示匹配的元素 隐藏匹配的元素 通过淡入的方式显示匹配元素 通过淡出的方式显示匹配元素 通过高度变化(向下增大)用滑动动画显示一个匹配元素 通过高度变化(向上减小)用滑动动画隐藏一个匹配元素 根据当前的元素display属性,用滑动动画显示或隐藏一个匹配元素 Example 6.1. 基本的动画效果 Example 6.2. 设置动画效果持续时间 jQuery 有一个对象 它可以覆盖或添加到这个对象。例如,您可能要更改动画默认持续时间,或者您可能要创建自定义动画速度。 Example 6.3. 增加 Example 6.4. 动画执行完后运行代码 注意,如果您选择不返回任何元素,您的 回调将不会执行!你可以通过测试是否选择任何元素来解决这个问题;如果没有, 你可以立即执行回调。 Example 6.5. 运行回调函数即使没设置任何参数 jQuery 使得通过 Example 6.6. 使用 颜色相关的属性是不能通过 [Definition: Easing Easing描述:出现在其中一个效果 - 无论是变化或是稳定的,或动画进行中在不同点位的速度。 ]jQuery包括两个easing缓冲方法:"linear" 和 "swing"。如果你想在你的动画更加自然的过渡,各种easing插件就可以用上。 在jQuery 1.4 版本中,我们使用$.fn.animate方法能容易的设置 per-property 。 Example 6.7. easing属性 关于easing选项的更多细节,请参见 http://api.jquery.com/animate/. jQuery提供了几种方法来设置动画。 停止运行当前匹配元素上的动画 在运行下一个动画前等待指定的毫秒数 当这个属性设置为true的时候,这个动画将不被转换;元素将立刻设置为它们的最终状态。这在旧 浏览器中特别有用;你也可以为你的用户提供这些选项。 Open the file Clicking on a headline in the #blog div should slide down the excerpt paragraph Clicking on another headline should slide down its excerpt paragraph, and slide up any other currently showing excerpt paragraphs. Hint: don't forget about the Open the file Hovering over an item in the main menu should show that item's submenu items, if any. Exiting an item should hide any submenu items. To accomplish this, use the Open the file Move the #slideshow element to the top of the body. Write code to cycle through the list items inside the element; fade one in, display it for a few seconds, then fade it out and fade in the next one. When you get to the end of the list, start again at the beginning. For an extra challenge, create a navigation area under the slideshow that shows how many images there are and which image you're currently viewing. (Hint: $.fn.prevAll will come in handy for this.) The XMLHttpRequest method (XHR) allows browsers to communicate with the server without requiring a page reload. This method, also known as Ajax (Asynchronous JavaScript and XML), allows for web pages that provide rich, interactive experiences. Ajax requests are triggered by JavaScript code; your code sends a request to a URL, and when it receives a response, a callback function can be triggered to handle the response. Because the request is asynchronous, the rest of your code continues to execute while the request is being processed, so it’s imperative that a callback be used to handle the response. jQuery provides Ajax support that abstracts away painful browser differences. It offers both a full-featured Most jQuery applications don’t in fact use XML, despite the name “Ajax”; instead, they transport data as plain HTML or JSON (JavaScript Object Notation). In general, Ajax does not work across domains. Exceptions are services that provide JSONP (JSON with Padding) support, which allow limited cross-domain functionality. Proper use of Ajax-related jQuery methods requires understanding some key concepts first. The two most common “methods” for sending a request to a server are GET and POST. It’s important to understand the proper application of each. The GET method should be used for non-destructive operations — that is, operations where you are only “getting” data from the server, not changing data on the server. For example, a query to a search service might be a GET request. GET requests may be cached by the browser, which can lead to unpredictable behavior if you are not expecting it. GET requests generally send all of their data in a query string. The POST method should be used for destructive operations — that is, operations where you are changing data on the server. For example, a user saving a blog post should be a POST request. POST requests are generally not cached by the browser; a query string can be part of the URL, but the data tends to be sent separately as post data. jQuery generally requires some instruction as to the type of data you expect to get back from an Ajax request; in some cases the data type is specified by the method name, and in other cases it is provided as part of a configuration object. There are several options: For transporting simple strings For transporting blocks of HTML to be placed on the page For adding a new script to the page For transporting JSON-formatted data, which can include strings, arrays, and objects As of jQuery 1.4, if the JSON data sent by your server isn't properly formatted, the request may fail silently. See http://json.org for details on properly formatting JSON, but as a general rule, use built-in language methods for generating JSON on the server to avoid syntax issues. For transporting JSON data from another domain For transporting data in a custom XML schema I am a strong proponent of using the JSON format in most cases, as it provides the most flexibility. It is especially useful for sending both HTML and data at the same time. The asynchronicity of Ajax catches many new jQuery users off guard. Because Ajax calls are asynchronous by default, the response is not immediately available. Responses can only be handled using a callback. So, for example, the following code will not work: Instead, we need to pass a callback function to our request; this callback will run when the request succeeds, at which point we can access the data that it returned, if any. In general, Ajax requests are limited to the same protocol (http or https), the same port, and the same domain as the page making the request. This limitation does not apply to scripts that are loaded via jQuery's Ajax methods. The other exception is requests targeted at a JSONP service on another domain. In the case of JSONP, the provider of the service has agreed to respond to your request with a script that can be loaded into the page using a Firebug (or the Webkit Inspector in Chrome or Safari) is an invaluable tool for working with Ajax requests. You can see Ajax requests as they happen in the Console tab of Firebug (and in the Resources > XHR panel of Webkit Inspector), and you can click on a request to expand it and see details such as the request headers, response headers, response content, and more. If something isn't going as expected with an Ajax request, this is the first place to look to track down what's wrong. While jQuery does offer many Ajax-related convenience methods, the core I generally use the $.ajax method and do not use convenience methods. As you'll see, it offers features that the convenience methods do not, and its syntax is more easily understandable, in my opinion. jQuery’s core Example 7.1. Using the core $.ajax method A note about the There are many, many options for the $.ajax method, which is part of its power. For a complete list of options, visit http://api.jquery.com/jQuery.ajax/; here are several that you will use frequently: Set to Whether to use a cached response if available. Defaults to A callback function to run when the request is complete, regardless of success or failure. The function receives the raw request object and the text status of the request. The scope in which the callback function(s) should run (i.e. what The data to be sent to the server. This can either be an object or a query string, such as The type of data you expect back from the server. By default, jQuery will look at the MIME type of the response if no dataType is specified. A callback function to run if the request results in an error. The function receives the raw request object and the text status of the request. The callback name to send in a query string when making a JSONP request. Defaults to "callback". A callback function to run if the request succeeds. The function receives the response data (converted to a JavaScript object if the dataType was JSON), as well as the text status of the request and the raw request object. The time in milliseconds to wait before considering the request a failure. Set to true to use the param serialization style in use prior to jQuery 1.4. For details, seehttp://api.jquery.com/jQuery.param/. The type of the request, "POST" or "GET". Defaults to "GET". Other request types, such as "PUT" and "DELETE" can be used, but they may not be supported by all browsers. The URL for the request. The If you don't need the extensive configurability of The convenience methods provided by jQuery are: Perform a GET request to the provided URL. Perform a POST request to the provided URL. Add a script to the page. Perform a GET request, and expect JSON to be returned. In each case, the methods take the following arguments, in order: The URL for the request. Required. The data to be sent to the server. Optional. This can either be an object or a query string, such as This option is not valid for A callback function to run if the request succeeds. Optional. The function receives the response data (converted to a JavaScript object if the data type was JSON), as well as the text status of the request and the raw request object. The type of data you expect back from the server. Optional. This option is only applicable for methods that don't already specify the data type in their name. Example 7.2. Using jQuery's Ajax convenience methods The Example 7.3. Using Example 7.4. Using jQuery’s ajax capabilities can be especially useful when dealing with forms. The jQuery Form Pluginis a well-tested tool for adding Ajax capabilities to forms, and you should generally use it for handling forms with Ajax rather than trying to roll your own solution for anything remotely complex. That said, there are a two jQuery methods you should know that relate to form processing in jQuery: Example 7.5. Turning form data into a query string Example 7.6. Creating an array of objects containing form data The advent of JSONP -- essentially a consensual cross-site scripting hack -- has opened the door to powerful mashups of content. Many prominent sites provide JSONP services, allowing you access to their content via a predefined API. A particularly great source of JSONP-formatted data is theYahoo! Query Language, which we'll use in the following example to fetch news about cats. Example 7.7. Using YQL and JSONP jQuery handles all the complex aspects of JSONP behind-the-scenes -- all we have to do is tell jQuery the name of the JSONP callback parameter specified by YQL ("callback" in this case), and otherwise the whole process looks and feels like a normal Ajax request.:visible
和 :hidden
伪选择器时, jQuery 会测试元素的真实可见性, 而不是它的CSS的可见性或显示 — 就是说, 如果physical height and width on the page 都大于零,它就可以看见. 然而,这个测试不能与 元素一起工作; 在这种情况下, jQuery 检测 CSS display
属性, 如果 它的 display
属性被设置成none
那就认为这个元素将隐藏。 即使 CSS 将影响它们的视觉渲染,元素也不会被添加到被隐藏的DOM中。 (请看这一章的后面操作小节有关如何创建和增加元素到DOM中的介绍。)
jQuery.expr.filters.hidden = function( elem ) {
var width = elem.offsetWidth, height = elem.offsetHeight,
skip = elem.nodeName.toLowerCase() === "tr";
// 元素的高度为0,宽度为0,
// 并且它不是
?
return width === 0 && height === 0 && !skip ?
// 所以它必须隐藏
true :
// 但是如果它拥有高度和宽度值
// 并且它不是
width > 0 && height > 0 && !skip ?
// 所以它必须显示
false :
// 如果我们到了这,元素拥有宽度
// 和高度, 但它也是一个 ,
// 所以检查显示属性以
// 确定是否隐藏
jQuery.curCSS(elem, "display") === "none";
};
jQuery.expr.filters.visible = function( elem ) {
return !jQuery.expr.filters.hidden( elem );
};
做包含任何元素的选择器?
if ($('div.foo')) { ... }
$()
指定一个选择器,一个对象将返回,对象也将计算为 true
。 即使你的选择器没有包含任何元素,包含 if
语句的代码仍将执行。if ($('div.foo').length) { ... }
保留的选择器
var $divs = $('div');
Note
Note
改善 & 过滤选择器
$('div.foo').has('p'); // 包含lt;p> 的元素
$('h1').not('.bar'); // h1 元素被包含 bar 这个类
$('ul li').filter('.current'); // 当前类的所有无序项
$('ul li').first(); // 第一项
$('ul li').eq(5); // 第六项
选择Form元素
元素 和 元素
type="button"
类型type="checkbox"
类型type="file"
输入类型type="image"
输入类型,
, 和
元素
type="password"
密码类型type="radio"
输入类型type="reset"
输入类型type="submit"
输入类型type="text"
输入类型$("#myForm :input'); // 取得所有接受输入的元素
使用选择器
链接
$('#content').find('h3').eq(2).html('new text for the third h3!');
$('#content')
.find('h3')
.eq(2)
.html('new text for the third h3!');
$.fn.end
方法帮你返回到你原来的选择器。$.fn.end
恢复你原来的选择器$('#content')
.find('h3')
.eq(2)
.html('new text for the third h3!')
.end() // 恢复选择器到 #content 中的所有 h3 部分 restores the selection to all h3's in #content
.eq(0)
.html('new text for the first h3!');
Note
Getters & Setters
$.fn.html
方法作为一个 setter 使用$('h1').html('hello world');
$('h1').html();
CSS, Styling, & Dimensions
Note
font-size
在 JavaScript 表示为 fontSize
。$('h1').css('fontSize'); // 返回"19px"的字体大小
$('h1').css('fontSize', '100px'); // 设置一个属性
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // 设置多个属性
为样式使用CSS类
$.fn.css
方法是有价值的; 然而, 通常要避免在产品代码中使用 setter, 因为你不想要在你的 JavaScript 中包含展示信息。相反,为类写CSS规则用以描述各种虚拟状态,简单的改变你需要影响的元素的类。var $h1 = $('h1');
$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');
if ($h1.hasClass('big')) { ... }
尺寸
$('h1').width('50px'); // 设置所有H1元素的宽度
$('h1').width(); // 获得第一个H1元素的宽度
$('h1').height('50px'); // 设置所有H1元素的高度
$('h1').height(); // 获得第一个H1元素的高度
$('h1').position(); // 返回对象的坐标位置
// 相对于第一个H1的信息
// 它的父类偏移位置
属性
$.fn.attr
方法充当getter和setter。在 $.fn.css
方法中, $.fn.attr
作为一个 setter 即能接受一键一值,也能作为一个对象包含一个或多个键/值对。$('a').attr('href', 'allMyHrefsAreTheSameNow.html');
$('a').attr({
'title' : 'all titles are the same too!',
'href' : 'somethingNew.html'
});
$('a').attr('href'); // 返回文档中第一个元素的链接
遍历
Note
$('h1').next('p');
$('div:visible').parent();
$('input[name=first_name]').closest('form');
$('#myList').children();
$('li.selected').siblings();
$.fn.each
的选择器对所有元素进行迭代,为每个元素都运行一次函数。函数将接收当前元素的索引和带有参数的DOM元素。在函数内部,默认情况下 DOM 元素作为this
是可用的。$('#myList li').each(function(idx, el) {
console.log(
'Element ' + idx +
'has the following html: ' +
$(el).html()
);
});
操作元素
获取和设置元素信息
Note
Note
$.fn.text
; 描述如下, 它在选择器中获得所有元素的文档。
$('#myDiv p:first')
.html('New first paragraph!');
移动,拷贝和删除元素
$.fn.insertAfter
和 $.fn.after
. $.fn.insertAfter
方法在你提供了参数的元素后面放置一个选择元素;$.fn.after
方法在选择元素后面放置一个带参数的元素。其它的方法允许这样的模式:$.fn.insertBefore
and $.fn.before
; $.fn.appendTo
and $.fn.append
; and $.fn.prependTo
and $.fn.prepend
.$.fn.insertAfter
, $.fn.insertBefore
,$.fn.appendTo
, and $.fn.prependTo
will be your tools of choice.// 将第一个列表项作为最后一项 make the first list item the last list item
var $li = $('#myList li:first').appendTo('#myList');
// 同一问题的另一种处理
$('#myList').append($('#myList li:first'));
// 注意这没有方法访问
// 我们移动的列表项,
// 返回列表自己
克隆元素
// 拷贝第一个列表条目到列表的末尾
$('#myList li:first').clone().appendTo('#myList');
Note
true
参数到 $.fn.clone
。 删除元素
$.fn.remove
和 $.fn.detach
。当你打算把选择器从页面永久删除时你将使用 $.fn.remove
;尽管方法返回删除的元素,那些元素也不会拥有它们关联的数据和事件。$.fn.detach
来代替。就像 $.fn.remove
, 它返回一个选择器, 也维护与选择有关的数据和事件,于是你能在最后恢复选择器。 Note
$.fn.detach
方法极有价值。在这个例子里,它有利于 $.fn.detach
页面元素,工作在它的代码里,于是当你操作时它将恢复到页面。把你从维护这些元素的数据和事件的高昂"DOM touches"中解救出来。$.fn.empty
去处理内部HTML元素。 创建新元素
$()
来创建新元素。$('
var $myNewElement = $('
$('ul').append('
Note
join
它们追加到同一字符串中。var myItems = [], $myList = $('#myList');
for (var i=0; i<100; i++) {
myItems.push('
操作属性
$('#myDiv a:first').attr('href', 'newDestination.html');
$('#myDiv a:first').attr({
href : 'newDestination.html',
rel : 'super-special'
});
$('#myDiv a:first').attr({
rel : 'super-special',
href : function() {
return '/new/' + $(this).attr('href');
}
});
$('#myDiv a:first').attr('href', function() {
return '/new/' + $(this).attr('href');
});
练习
Selecting
/exercises/index.html
in your browser. Use the file/exercises/js/sandbox.js
or work in Firebug to accomplish the following:
Traversing
/exercises/index.html
in your browser. Use the file/exercises/js/sandbox.js
or work in Firebug to accomplish the following:
Manipulating
/exercises/index.html
in your browser. Use the file/exercises/js/sandbox.js
or work in Firebug to accomplish the following:
for (var i = 0; i<5; i++) { ... }
Chapter 4. jQuery核心
$
vs $()
$('h1').remove();
$.fn
命名空间的一部分,或者是 “jQuery prototype,” 这是作为 jQuery 对象方法最好的思路。
$.fn
命名空间,它会自动接收和返回所选择的。$
命名空间里的方法通常是实用类型的方法,它们不会和选择器工作在一起;它们不会自动地处理任何参数,它们的返回值也将改变。$.each
和 $.fn.each
。在这些例子中,要正确地研究这些方法需要你非常仔细地阅读文档。 实用方法
$
命名空间中提供了多个实用方法。这些方法能帮助你完成例程(routine programming)任务。接下来有一些实用方法的例子;完整的 jQuery 实用方法的参考, 请访问http://api.jquery.com/category/utilities/.
$.trim(' 大量额外空白 ');
// 返回 '大量额外空白'
$.each([ 'foo', 'bar', 'baz' ], function(idx, val) {
console.log('element ' + idx + 'is ' + val);
});
$.each({ foo : 'bar', baz : 'bim' }, function(k, v) {
console.log(k + ' : ' + v);
});
Note
$.fn.each
,也可用于在一个选择的元素中进行迭代。var myArray = [ 1, 2, 3, 5 ];
if ($.inArray(4, myArray) !== -1) {
console.log('found it!');
}
var firstObject = { foo : 'bar', a : 'b' };
var secondObject = { foo : 'baz' };
var newObject = $.extend(firstObject, secondObject);
console.log(firstObject.foo); // 'baz'
console.log(newObject.foo); // 'baz'
$.extend
,作为第一个参数传递一个空对象。var firstObject = { foo : 'bar', a : 'b' };
var secondObject = { foo : 'baz' };
var newObject = $.extend({}, firstObject, secondObject);
console.log(firstObject.foo); // 'bar'
console.log(newObject.foo); // 'baz'
this
的设置意味着内部传递函数到第二个参数。var myFunction = function() { console.log(this); };
var myObject = { foo : 'bar' };
myFunction(); // 记录 window 对象
var myProxyFunction = $.proxy(myFunction, myObject);
myProxyFunction(); // 记录 myObject 对象
var myObject = {
myFn : function() {
console.log(this);
}
};
$('#foo').click(myObject.myFn); // 记录 DOM 元素 #foo
$('#foo').click($.proxy(myObject, 'myFn')); // 记录 myObject
校验类型
var myValue = [1, 2, 3];
// 使用 JavaScript 的 typeof 运算符去测试类型
typeof myValue == 'string'; // false
typeof myValue == 'number'; // false
typeof myValue == 'undefined'; // false
typeof myValue == 'boolean'; // false
// 使用严格的相等运算符去测试 null
myValue === null; // false
// 使用 jQuery 方法去测试
jQuery.isFunction(myValue); // false
jQuery.isPlainObject(myValue); // false
jQuery.isArray(myValue); // true
数据方法
$('#myDiv').data('keyName', { foo : 'bar' });
$('#myDiv').data('keyName'); // { foo : 'bar' }
$.fn.data
来存储其它元素的引用。$.fn.data
: 来存储划分条目的指针and then store a pointer to the div on the list item using$.fn.data
:$.fn.data
存储元素之间的关系$('#myList li').each(function() {
var $li = $(this), $div = $li.find('div.content');
$li.data('contentDiv', $div);
});
// 后来,我们不得不再一次发现 div;
// 我们能从列表项中读取到它
var $firstLi = $('#myList li:first');
$firstLi.data('contentDiv').html('new content');
$.fn.data
一个 key-value 对到存储数据外,你也能传递一个包含一个或更多键值对的对象。 特色 & 浏览器探测
$.support
对象, 和 $.browser
对象一样被废弃。关于这些对象的完整文档,请访问 http://api.jquery.com/jQuery.support/ 和 http://api.jquery.com/jQuery.browser/.$.support
对象主要用于检测浏览器所支持的功能;在为不同浏览器定制 JavaScript 代码时它被推荐作为“future-proof”方法来使用。$.browser
对象而鼓励使用 $.support
对象,但它仍保留在 jQuery 中而没删除。它提供了直接检测浏览器类型和版本的功能。 避免与其它库的冲突
$
变量,你会与 jQuery 发生冲突。为了避免这样的冲突,在你准备实用 jQuery 之前和将 jQuery 加载到你的页面后请你将 jQuery 设为 no-conflict 模式。$
的变量名所分配的选项。
$
;这是插件开发的一个标准模式,在别的地方作者不知道是否有别的库已经使用了 $
。
Chapter 5. 事件
概述
为元素绑定事件Connecting Events to Elements
$.fn.bind
方法的简便缩写, 例如$.fn.click
、$.fn.focus
、$.fn.blur
、$.fn.change
等。 bind这个方法一般用于绑定相同的事件处理函数到多个事件, 也用于为事件处理函数提供数据,或者在使用自定义事件时使用。$('p').click(function() {
console.log('click');
});
$.fn.bind
方法绑定事件$('p').bind('click', function() {
console.log('click');
});
$.fn.bind
方法将数据绑定到事件$('input').bind(
'click change', // 绑定到多个事件
{ foo : 'bar' }, // 传递数据
function(eventObject) {
console.log(eventObject.type, eventObject.data);
// 输出事件类型和{ foo : 'bar' } logs event type, then { foo : 'bar' }
}
);
绑定事件到只执行一次
$.fn.one
方法。$.fn.one
方法转换处理函数$('p').one('click', function() {
console.log('You just clicked this for the first time!');
$(this).click(function() { console.log('You have clicked this before!'); });
});
$.fn.one
方法是很好的选择。 取消事件绑定
$.fn.unbind
方法,通过传递事件类型为参数的方式取消事件处理函数的绑定。 如果你在事件中附加了已命名的函数,你可以通过将这个命名函数作为第二个参数传到 $.fn.unbind
方法中来单独取消绑定。$('p').unbind('click');
var foo = function() { console.log('foo'); };
var bar = function() { console.log('bar'); };
$('p').bind('click', foo).bind('click', bar);
$('p').unbind('click', bar); // foo依然被绑定到点击事件
命名空间事件
$('p').bind('click.myNamespace', function() { /* ... */ });
$('p').unbind('click.myNamespace');
$('p').unbind('.myNamespace'); // 取消这个命名空间中所有事件的绑定
在事件处理函数中的函数 Inside the Event Handling Function
this
关键字访问事件处理函数所绑定的DOM元素。 我们可以使用$(this)
将DOM元素转换成可以使用jQuery方法的jQuery对象,语法如下:var $this = $(this);
$('a').click(function(e) {
var $this = $(this);
if ($this.attr('href').match('evil')) {
e.preventDefault();
$this.addClass('evil');
}
});
触发事件处理函数
$.fn.trigger
方法在没有用户交互的情况下触发绑定到元素的事件处理函数。 当然这个方法还有自己用途,而不仅仅是被用来调用一个被绑定为点击事件处理的函数。 相反的,应该把需要调用的函数存储到变量里,当绑定的时候将变量名传递到方法里。 这样你可以在任何时候不使用$.fn.trigger
直接调用这个函数。var foo = function(e) {
if (e) {
console.log(e);
} else {
console.log('this didn\'t come from an event!');
}
};
$('p').click(foo);
foo(); // 不使用$('p').trigger('click')直接调用
使用事件委托提高性能
$.fn.live
和$.fn.delegate
方法让这个过程变得很简单。 Note
$.fn.live
方法,在1.3版本这个方法只支持特定的事件类型。 自从jQuery 1.4.2开始提供$.fn.delegate
方法,应优先选择这个方法。$.fn.delegate
委托事件$('#myUnorderedList').delegate('li', 'click', function(e) {
var $myListItem = $(this);
// ...
});
$.fn.live
委托事件$('#myUnorderedList li').live('click', function(e) {
var $myListItem = $(this);
// ...
});
解除委托事件绑定
$.fn.delegate
绑定的事件使用$.fn.undelegate
解除绑定, 对使用$.fn.live
绑定的事件使用$.fn.die
解除绑定。 跟绑定类似,你可以选择性地传入绑定函数的名字来解除绑定。$('#myUnorderedList').undelegate('li', 'click');
$('#myUnorderedList li').die('click');
事件助手
$.fn.hover
$.fn.hover
方法让一个或两个函数在mouseenter
和mouseleave
事件触发的时候执行。 如果你传入一个函数,它将在两个事件触发的时候都执行;如果传入两个函数,第一个函数将在mouseenter
事件触发的时候执行, 第二个函数在mouseleave
事件触发的时候执行。 Note
$.fn.hover
方法需要两个函数。$('#menu li').hover(function() {
$(this).toggleClass('hover');
});
$.fn.toggle
$.fn.hover
类似,$.fn.toggle
方法接收两个或以上函数, 每次事件触发的时候,在列表中的下一个函数将被调用。 一般来说,$.fn.toggle
只使用两个函数,但在技术上你传入多少都可以。$('p.expander').toggle(
function() {
$(this).prev().addClass('open');
},
function() {
$(this).prev().removeClass('open');
}
);
练习
Create an Input Hint
/exercises/index.html
in your browser. Use the file/exercises/js/inputHint.js
or work in Firebug. Your task is to use the text of the label for the search input to create "hint" text for the search input. The steps are as follows:
Add Tabbed Navigation
/exercises/index.html
in your browser. Use the file/exercises/js/tabs.js
. Your task is to create tabbed navigation for the two div.module elements. To accomplish this:
$.fn.each
. For each module, use the text of the h2 element as the text for a list item that you add to the unordered list element.
Chapter 6. Effects 特效
概述
基本特效
$('h1').show();
改变基本效果持续时间
$.fn.show
和 $.fn.hide
, 除此而外,所有的基本方法是在默认情况下,都是400毫秒延时的动画效果。改变duration属性(一个效果持续时间)是很简单。 $('h1').fadeIn(300); // 淡入效果以 300ms延时
$('h1').fadeOut('slow'); // using a built-in speed definition使用慢的淡出效果
jQuery.fx.speeds
jQuery.fx.speeds
包含默认的速度,可以设置 "slow"
和 "fast"
.speeds: {
slow: 600,
fast: 200,
//默认速度值
_default: 400
}
jQuery.fx.speeds
自定义动画速度jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;
特效完成后做一些处理
$('div.old').fadeOut(300, function() { $(this).remove(); });
var $thing = $('#nonexistent');
var cb = function() {
console.log('done!');
};
if ($thing.length) {
$thing.fadeIn(300, cb);
} else {
cb();
}
使用
$.fn.animate
自定义效果$.fn.animate
方法设置CSS属性控制动画成为可能。 $.fn.animate
这个方法允许你设置一个值,或者使用默认值。$.fn.animate
自定义效果 $('div.funtimes').animate(
{
left : "+=50",
opacity : 0.25
},
300, // 持续时间
function() { console.log('done!'); // 回调
});
Note
$.fn.animate
用在jQuery以外的。color plugin可以很轻松完成颜色动画。我们将在书的后面章节讨论如何使用此插件。 Easing
$('div.funtimes').animate(
{
left : [ "+=50", "swing ],
opacity : [ 0.25, "linear" ]
},
300
);
管理效果
$('h1').show(300).delay(1000).hide(300);
练习
Reveal Hidden Text
/exercises/index.html
in your browser. Use the file/exercises/js/blog.js
. Your task is to add some interactivity to the blog section of the page. The spec for the feature is as follows:
:visible
selector! Create Dropdown Menus
/exercises/index.html
in your browser. Use the file/exercises/js/navigation.js
. Your task is to add dropdowns to the main navigation at the top of the page.
$.fn.hover
method to add and remove a class from the submenu items to control whether they're visible or hidden. (The file at /exercises/css/styles.css
includes the "hover" class for this purpose.) Create a Slideshow
/exercises/index.html
in your browser. Use the file/exercises/js/slideshow.js
. Your task is to take a plain semantic HTML page and enhance it with JavaScript by adding a slideshow.
Chapter 7. Ajax
Overview
$.ajax()
method, and simple convenience methods such as $.get()
,$.getScript()
, $.getJSON()
, $.post()
, and $().load()
. Key Concepts
GET vs. Post
Data Types
Note
A is for Asynchronous
var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!
$.get('foo.php', function(response) { console.log(response); });
Same-Origin Policy and JSONP
tag, thus avoiding the same-origin limitation; that script will include the data you requested, wrapped in a callback function you provide.
Ajax and Firebug
jQuery's Ajax-Related Methods
$.ajax
method is at the heart of all of them, and understanding it is imperative. We'll review it first, and then touch briefly on the convenience methods. $.ajax
$.ajax
method is a powerful and straightforward way of creating Ajax requests. It takes a configuration object that contains all the instructions jQuery requires to complete the request. The $.ajax
method is particularly valuable because it offers the ability to specify both success and failure callbacks. Also, its ability to take a configuration object that can be defined separately makes it easier to write reusable code. For complete documentation of the configuration options, visit http://api.jquery.com/jQuery.ajax/.$.ajax({
// the URL for the request
url : 'post.php',
// the data to send
// (will be converted to a query string)
data : { id : 123 },
// whether this is a POST or GET request
type : 'GET',
// the type of data we expect back
dataType : 'json',
// code to run if the request succeeds;
// the response is passed to the function
success : function(json) {
$('').text(json.title).appendTo('body');
$('')
.html(json.html).appendTo('body');
},
// code to run if the request fails;
// the raw request and status codes are
// passed to the function
error : function(xhr, status) {
alert('Sorry, there was a problem!');
},
// code to run regardless of success or failure
complete : function(xhr, status) {
alert('The request is complete!');
}
});
Note
dataType
setting: if the server sends back data that is in a different format than you specify, your code may fail, and the reason will not always be clear, because the HTTP response code will not show an error. When working with Ajax requests, make sure your server is sending back the data type you're asking for, and verify that the Content-type header is accurate for the data type. For example, for JSON data, the Content-type header should beapplication/json
.
$.ajax
Options
false
if the request should be sent synchronously. Defaults to true
. Note that if you set this option to false, your request will block execution of other code until the response is received.true
for all dataTypes except "script" and "jsonp". When set to false, the URL will simply have a cachebusting parameter appended to it.this
will mean inside the callback function(s)). By default, this
inside the callback function(s) refers to the object originally passed to $.ajax
.foo=bar&baz=bim
.url
option is the only required property of the $.ajax
configuration object; all other properties are optional. Convenience Methods
$.ajax
, and you don't care about handling errors, the Ajax convenience functions provided by jQuery can be useful, terse ways to accomplish Ajax requests. These methods are just "wrappers" around the core $.ajax
method, and simply pre-set some of the options on the $.ajax
method.
foo=bar&baz=bim
. Note
$.getScript
. Note
// get plain text or html
$.get('/users.php', { userId : 1234 }, function(resp) {
console.log(resp);
});
// add a script to the page, then run a function defined in it
$.getScript('/static/js/myScript.js', function() {
functionFromMyScript();
});
// get JSON-formatted data from the server
$.getJSON('/details.php', function(resp) {
$.each(resp, function(k, v) {
console.log(k + ' : ' + v);
});
});
$.fn.load
$.fn.load
method is unique among jQuery’s Ajax methods in that it is called on a selection. The $.fn.load
method fetches HTML from a URL, and uses the returned HTML to populate the selected element(s). In addition to providing a URL to the method, you can optionally provide a selector; jQuery will fetch only the matching content from the returned HTML.$.fn.load
to populate an element$('#newContent').load('/foo.html');
$.fn.load
to populate an element based on a selector$('#newContent').load('/foo.html #myDiv h1:first', function(html) {
alert('Content updated!');
});
Ajax and Forms
$.fn.serialize
and $.fn.serializeArray
.$('#myForm').serialize();
$('#myForm').serializeArray();
// creates a structure like this:
[
{ name : 'field1', value : 123 },
{ name : 'field2', value : 'hello world' }
]
Working with JSONP
$.ajax({
url : 'http://query.yahooapis.com/v1/public/yql',
// the name of the callback parameter,
// as specified by the YQL service
jsonp : 'callback',
// tell jQuery we're expecting JSONP
dataType : 'jsonp',
// tell YQL what we want and that we want JSON
data : {
q : 'select title,abstract,url from search.news where query="cat"',
format : 'json'
},
// work with the response
success : function(response) {
console.log(response);
}
});
你可能感兴趣的:(jQury 基本原理)