您应该具备的基础知识

在您开始学习 jQuery Mobile 之前，您应该对以下知识有基本的了解：

• HTML
• CSS
• jQuery

如果您需要首先学习这些项目，请在我们的首页访问这些教程。

什么是 jQuery Mobile？

jQuery Mobile 是一个为触控优化的框架，用于创建移动 web 应用程序。

jQuery 适用于所有流行的智能手机和平板电脑：

jQuery Mobile 构建于 jQuery 库之上，这使其更易学习，如果您通晓 jQuery 的话。

它使用 HTML5、CSS3、JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局。

为什么使用 jQuery Mobile？

jQuery Mobile 将“写得更少、做得更多”这一理念提升到了新的层次：它会自动为网页设计交互的易用外观，并在所有移动设计上保持一致。

提示：您不需要为每种移动设备或 OS 编写一个应用程序：

• Android 和 Blackberry 用 Java 编写
• iOS 用 Objective C 编写
• Windows Phone 用 C# 和 .net 编写

jQuery Mobile 解决了这个问题，因为它只用 HTML、CSS 和 JavaScript，这些技术都是所有移动 web 浏览器的标准。

最佳阅读体验

尽管 jQuery Mobile 工作于所有移动设备，它可能在桌面计算机上存在兼容性问题（“归功于”有限的 CSS3 支持）。

因此在本教程中，我们推荐您使用谷歌的 Chrome 浏览器，以获得最好的阅读体验。

jQuery 语法实例

$(this).hide()

演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。

$("p").hide()

演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()

演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。

$("#test").hide()

演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。

例子解释

Hiding - Sliding- Fading

jQuery fadeOut()

演示简单的 jQuery fadeout() 函数。

jQuery hide()

演示简单的 jQuery hide() 函数。

Hide explanations

演示如何隐藏部分文本。

Slide panel

演示简单的 Slide Panel 效果。

jQuery animate()

演示简单的 jQuery animate() 函数。

例子解释

HTML 操作

改变 HTML 元素的内容。

向 HTML 元素追加内容。

在 HTML 元素之后追加内容。

例子解释

CSS 操作

改变 HTML 元素的 CSS 属性。

改变多个 CSS 属性。

获得元素的 CSS 属性。

例子解释

AJAX 和 jQuery

使用 $(selector).load(url) 来改变 HTML 内容。

使用 $.ajax(options) 来改变 HTML 内容。

例子解释

实例

找出所有属于 div 元素的子元素的 p 元素，然后设置其边框属性：

$("div > p").css("border", "1px solid gray"); 

亲自试一试

定义和用法

jQuery() 方法接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器。

jQuery() 函数有三种语法：

语法 1

接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器：

jQuery(selector, [context])

详细用法

语法 2

使用原始 HTML 的字符串来创建 DOM 元素：

jQuery(html,[ownerDocument])

详细用法

语法 3

绑定一个在 DOM 文档载入完成后执行的函数：

jQuery( callback )

详细用法

jQuery( selector, [ context ] )

该语法有以下几种用法：

用法 1 ：设置选择器环境

语法

jQuery(selector, [context])

默认情况下，选择器从文档根部对 DOM 进行搜索。不过，可以为 $() 设置可选的 context 参数。

例如，如果我们希望在一个 callback 中搜索一个元素，可以限定下面的搜索：

实例

$("div.foo").click(function() {   $("span", this).addClass("bar"); }); 

由于我们已经将 span 选择器限定到 this 这个环境中，只有被点击元素中的 span 会得到附加的 class。

在内部，选择器环境是通过 .find() 方法实现的，因此 $("span", this) 等价于 $(this).find("span")。

jQuery 的核心功能都是通过这个函数实现的。jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。

默认情况下, 如果没有指定 context 参数，$() 将在当前的 HTML document 中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。在 jQuery 1.3.2 以后，其返回的元素顺序等同于在 context 中出现的先后顺序。

用法 2 ：使用 DOM 元素

语法

jQuery(element)

该函数允许我们通过使用以其他方式找到的 DOM 元素来创建 jQuery 对象。该功能通常的用法是，对已经通过 this 关键字传递到 callback 函数的元素调用 jQuery 的方法：

实例

$("div.foo").click(function() {   $(this).slideUp(); }); 

此例会在元素被点击时使用滑动动画对其进行隐藏。由于处理程序接受的 this 关键词中的被点击项目是纯的 DOM 元素，因此在对其调用 jQuery 的方法之前，必须用 jQuery 对象包装该元素。

这个函数也可以接收 XML 文档和 Window 对象（虽然它们不是 DOM 元素）作为有效的参数。

当 XML 数据从 Ajax 调用中返回后，我们可以使用 $() 函数通过 jQuery 对象包装该数据。一旦完成，我们就可以使用 .find() 和其他 DOM 遍历方法来取回 XML 结构中单个元素。

用法 3 ：克隆 jQuery 对象

语法

jQuery(jQuery object)

当以参数的形式向 $() 函数传递 jQuery 对象后，会创建一个该对象的副本。与初始对象一样，新的 jQuery 对象引用相同的 DOM 元素。

用法 4 ：返回空的集合

语法

jQuery()

对于 jQuery 1.4，调用无参数的 jQuery() 方法会返回空的 jQuery 集合。在之前版本的 jQuery 中，这样会返回包含 document 节点的集合。

jQuery( html, [ ownerDocument ] )

该语法有以下几种用法：

用法 1 ：创建新的元素

语法

jQuery(html,[ownerDocument])

你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制，可以参考第二个示例。

当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用 $("<span/>") 或 $("<span></span>") ，但不推荐 $("<span>")。在 jQuery 中，这个语法等同于 $(document.createElement("span"))。

如果以参数的形式将字符串传递给 $()，jQuery 会检查字符串是否是 HTML （比如，字符串某些位置存在标签）。如果不是，则把字符串解释为选择器表达式，请见上面的讲解。但如果字符串是 HTML 片段，则 jQuery 试图创建由该 HTML 片段描述的 DOM 元素。然后会创建并返回一个引用这些 DOM 元素的 jQuery 对象：

实例

$("<p id="test">My <em>new</em> text</p>").appendTo("body");

如果 HTML 片段比不含属性的简单标签更复杂，如同上面例子中的 HTML，那么元素实际的创建过程是由浏览器的 innerHTML 机制完成的。具体地讲，jQuery 会创建新的 <div> 元素，然后为传入的 HTML 片段设置元素的 innerHTML 属性。当参数只是简单的标签，比如$("<img />") 或 $("<a></a>")，jQuery 会通过内生的 JavaScript createElement() 函数来创建元素。

要确保跨平台兼容性，片段的结构必须良好。能够包含其他元素的标签必须成对出现（带有关闭标签）：

$("<a href="http://jquery.com"></a>");

不过，jQuery 也允许类似 XML 的标签语法：

$("<a/>");

无法包含其他元素的标签可以关闭，也可以不关闭：

$("<img />"); $("<input>"); 

用法 2 ：设置属性和事件

语法

jQuery(html,props)

对于 jQuery 1.4，我们可以向第二个参数传递一个属性映射。该参数接受能够传递给 .attr() 方法的属性的超集。此外，可以传递任意的事件类型，并可以调用下面的 jQuery 方法：val, css, html, text, data, width, height, or offset.

注意，Internet Explorer 不允许你创建 input 元素并改变其类型；您必须使用例如 "<input type="checkbox" />" 来规定类型。

实例

创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。

$("<input>", {   type: "text",   val: "Test",   focusin: function() {     $(this).addClass("active");   },   focusout: function() {     $(this).removeClass("active");   } }).appendTo("form"); 

jQuery( callback )

允许你绑定一个在 DOM 文档载入完成后执行的函数。

该函数的作用如同 $(document).ready() 一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的其他 $() 操作符都包装到其中来。尽管从技术上来说，这个函数是可链接的，但真正以这种方式链接的情况并不多。

例子

当DOM加载完成后，执行其中的函数：

$(function(){   // 文档就绪 }); 

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 仍在运行！");   }); }); 

亲自试一试

实例

您也可以创建自己的简写。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 核心参考手册

如需完整的 jQuery 核心方法概览，请访问我们的 jQuery 核心参考手册。

参阅

教程：Ajax 教程

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.asp",function(data,status){     alert("Data: " + data + "\nStatus: " + status);   }); }); 

亲自试一试

$.get() 的第一个参数是我们希望请求的 URL（"demo_test.asp"）。

第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

提示：这个 ASP 文件 ("demo_test.asp") 类似这样：

<% response.write("This is some text from an external ASP file.") %> 

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

实例

$("button").click(function(){   $.post("demo_test_post.asp",   {     name:"Donald Duck",     city:"Duckburg"   },   function(data,status){     alert("Data: " + data + "\nStatus: " + status);   }); }); 

亲自试一试

$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。

然后我们连同请求（name 和 city）一起发送数据。

"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

提示：这个 ASP 文件 ("demo_test_post.asp") 类似这样：

<% dim fname,city fname=Request.Form("name") city=Request.Form("city") Response.Write("Dear " & fname & ". ") Response.Write("Hope you live well in " & city & ".") %> 

jQuery AJAX 参考手册

如需完整的 AJAX 方法参考，请访问我们的 jQuery AJAX 参考手册。

jQuery AJAX 参考手册

如需完整的 AJAX 方法参考，请访问我们的 jQuery AJAX 参考手册。

jQuery AJAX 实例

请点击下面的按钮，通过 jQuery AJAX 改变这段文本。

亲自试一试

什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

您可以在我们的 AJAX 教程中学到更多有关 AJAX 的知识。

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

提示：如果没有 jQuery，AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

jQuery AJAX 方法

在下面的章节，我们将学习到最重要的 jQuery AJAX 方法。

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 遍历参考手册

如需了解所有的 jQuery 遍历方法，请访问我们的 jQuery 遍历参考手册。

在 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 遍历方法，请访问我们的 jQuery 遍历参考手册。

• jQuery 祖先
• 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 遍历参考手册

如需了解所有的 jQuery 遍历方法，请访问我们的 jQuery 遍历参考手册。

向上遍历 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 遍历方法，请访问我们的 jQuery 遍历参考手册。

遍历 DOM

jQuery 提供了多种遍历 DOM 的方法。

遍历方法中最大的种类是树遍历（tree-traversal）。

下一章会讲解如何在 DOM 树中向上、下以及同级移动。

jQuery 遍历参考手册

如需了解所有的 jQuery 遍历方法，请访问我们的 jQuery 遍历参考手册。

浏览器支持

注释：Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

Input 类型 - email

email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时，会自动验证 email 域的值。

实例

E-mail: <input type="email" name="user_email" />

亲自试一试

提示：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。

Input 类型 - url

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

实例

Homepage: <input type="url" name="user_url" />

亲自试一试

提示：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。

Input 类型 - number

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定：

实例

Points: <input type="number" name="points" min="1" max="10" />

亲自试一试

请使用下面的属性来规定对数字类型的限定：

请试一下带有所有限定属性的例子：亲自试一试

提示：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。

Input 类型 - range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

您还能够设定对所接受的数字的限定：

实例

<input type="range" name="points" min="1" max="10" />

亲自试一试

请使用下面的属性来规定对数字类型的限定：

Input 类型 - Date Pickers（日期选择器）

HTML5 拥有多个可供选取日期和时间的新输入类型：

• date - 选取日、月、年
• month - 选取月、年
• week - 选取周和年
• time - 选取时间（小时和分钟）
• datetime - 选取时间、日、月、年（UTC 时间）
• datetime-local - 选取时间、日、月、年（本地时间）

下面的例子允许您从日历中选取一个日期：

实例

Date: <input type="date" name="user_date" />

亲自试一试

输入类型 "month": 亲自试一试

输入类型 "week": 亲自试一试

输入类型 "time": 亲自试一试

输入类型 "datetime": 亲自试一试

输入类型 "datetime-local": 亲自试一试

Input 类型 - search

search 类型用于搜索域，比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

实例

设置 <p> 元素的宽度：

$(".btn1").click(function(){   $("p").width(200); }); 

亲自试一试

定义和用法

width() 方法返回或设置匹配元素的宽度。

返回宽度

返回第一个匹配元素的宽度。

如果不为该方法设置参数，则返回以像素计的匹配元素的宽度。

语法

$(selector).width()

亲自试一试

设置宽度

设置所有匹配元素的宽度。

语法

$(selector).width(length)

亲自试一试

使用函数来设置宽度

使用函数来设置所有匹配元素的宽度。

语法

$(selector).width(function(index,oldwidth))

亲自试一试

亲自试一试 - 实例

获得文档和窗口元素的宽度

使用 width() 方法来获得 document 和 window 元素的当前宽度。

使用 em 和 % 值来设置宽度

使用指定的长度单位来设置元素的宽度。

jQuery CSS 操作参考手册

实例

设置 <div> 元素中滚动条的垂直偏移：

$(".btn1").click(function(){   $("div").scrollLeft(100); }); 

亲自试一试

定义和用法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

语法

$(selector).scrollTop(offset)

提示和注释

注释：该方法对于可见元素和不可见元素均有效。

注释：当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。

注释：当用于设置值时，该方法设置所有匹配元素的 scroll top offset。

亲自试一试 - 实例

获得当前的 scroll top offset

使用 scrollTop() 方法获得 scroll top offset。

jQuery CSS 操作参考手册

定义和用法

scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。

滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0。

返回水平滚动条位置

返回第一个匹配元素的水平滚动条位置。

语法

$(selector).scrollLeft()

亲自试一试

设置水平滚动条位置

设置所有匹配元素的水平滚动条位置。

语法

$(selector).scrollLeft(position)

亲自试一试

jQuery CSS 操作参考手册

实例

获得 <p> 元素的当前位置：

$(".btn1").click(function(){   x=$("p").position();   $("#span1").text(x.left);   $("#span2").text(x.top); }); 

亲自试一试

定义和用法

position() 方法返回匹配元素相对于父元素的位置（偏移）。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。

此方法只对可见元素有效。

语法

$(selector).position()

jQuery CSS 操作参考手册

实例

设置最近的祖先定位元素的背景颜色：

$("button").click(function(){   $("p").offsetParent().css("background-color","red"); }); 

亲自试一试

定义和用法

offsetParent() 方法返回最近的祖先定位元素。

定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。

可以通过 jQuery 设置 position，或者通过 CSS 的 position 属性。

语法

$(selector).offsetParent()

jQuery CSS 操作参考手册

实例

获得 <p> 元素当前的偏移：

$(".btn1").click(function(){   x=$("p").offset();   $("#span1").text(x.left);   $("#span2").text(x.top); }); 

亲自试一试

定义和用法

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

返回偏移坐标

返回第一个匹配元素的偏移坐标。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

语法

$(selector).offset()

亲自试一试

设置偏移坐标

设置所有匹配元素的偏移坐标。

语法

$(selector).offset(value)

亲自试一试

使用函数来设置偏移坐标

使用函数来设置所有匹配元素的偏移坐标。

语法

$(selector).offset(function(index,oldoffset))

亲自试一试

亲自试一试 - 实例

使用对象来为对象设置新的 offset 值

使用新对象中的坐标来定位元素。

使用另一个元素的位置来为元素设置新的 offset 值

使用已有对象的位置来定位元素。

jQuery CSS 操作参考手册

参阅

教程：CSS 教程

参考手册：CSS 参考手册

通过 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); }); 

亲自试一试

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

实例

$("button").click(function(){   var txt="";   txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";   txt+="Outer height (+margin): " + $("#div1").outerHeight(true);   $("#div1").html(txt); }); 

亲自试一试

jQuery - 更多的 width() 和 height()

下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：

实例

$("button").click(function(){   var txt="";   txt+="Document width/height: " + $(document).width();   txt+="x" + $(document).height() + "\n";   txt+="Window width/height: " + $(window).width();   txt+="x" + $(window).height();   alert(txt); }); 

亲自试一试

下面的例子设置指定的 <div> 元素的宽度和高度：

实例

$("button").click(function(){   $("#div1").width(500).height(500); }); 

亲自试一试

jQuery CSS 参考手册

如需关于 jQuery Dimensions 的完整参考，请访问我们的 jQuery 尺寸参考手册。

删除元素/内容

如需删除元素和内容，一般可使用以下两个 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 HTML 参考手册

如需有关 jQuery HTML 方法的完整内容，请访问以下参考手册：

• jQuery 文档操作
• jQuery 属性操作
• jQuery CSS 操作

添加新的 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");  // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3);         // 追加新元素 } 

亲自试一试

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

实例

$("img").after("Some text after");  $("img").before("Some text 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);          // 在 img 之后插入新元素 } 

亲自试一试

jQuery HTML 参考手册

如需有关 jQuery HTML 方法的完整内容，请访问以下参考手册：

• jQuery 文档操作
• jQuery 属性操作
• jQuery CSS 操作