目录

Ⅰ  jQuery - 获取内容和属性

jQuery DOM 操作

获得内容 - text()、html() 以及 val()

获取属性 - attr()

Ⅱ  jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

text()、html() 以及 val() 的回调函数

设置属性 - attr()

attr() 的回调函数

Ⅲ  jQuery - 添加元素

添加新的 HTML 内容

jQuery append() 方法

jQuery prepend() 方法

通过 append() 和 prepend() 方法添加若干新元素

jQuery after() 和 before() 方法

通过 after() 和 before() 方法添加若干新元素

Ⅳ  jQuery - 删除元素

删除元素/内容

jQuery remove() 方法

jQuery empty() 方法

过滤被删除的元素

Ⅴ  jQuery - 获取并设置 CSS 类

jQuery 操作 CSS

实例样式表

jQuery addClass() 方法

jQuery removeClass() 方法

jQuery toggleClass() 方法

Ⅵ  jQuery css() 方法

jQuery css() 方法

返回 CSS 属性

设置 CSS 属性

设置多个 CSS 属性

Ⅶ  jQuery 尺寸

jQuery 尺寸方法

jQuery 尺寸

jQuery width() 和 height() 方法

jQuery innerWidth() 和 innerHeight() 方法

jQuery outerWidth() 和 outerHeight() 方法

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

DOM 定义访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。"

三个简单实用的用于 DOM 操作的 jQuery 方法：

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

attr 和 prop 的区别介绍：

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

实例 1：

这个例子里  元素的 DOM 属性有: href、target 和 class，这些属性就是  元素本身就带有的属性，也是 W3C 标准里就包含有这几个属性，或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop 方法。

这个例子里  元素的 DOM 属性有: href、id 和 action，很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的， 元素本身是没有这个属性的。这种就是自定义的 DOM 属性。处理这些属性时，建议使用 attr 方法。

prop()函数的结果:

      1.如果有相应的属性，返回指定属性值。

      2.如果没有相应的属性，返回值是空字符串。

attr()函数的结果:

      1.如果有相应的属性，返回指定属性值。

      2.如果没有相应的属性，返回值是 undefined。

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

我们将使用前一章中的三个相同的方法来设置内容：

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法：

通过 jQuery，可以很容易地添加新元素/内容。

我们将学习用于添加新内容的四个 jQuery 方法：

jQuery append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）。

jQuery prepend() 方法在被选元素的开头插入内容。

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

文本-1。

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

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

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

通过 jQuery，可以很容易地删除已有的 HTML 元素。

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

jQuery remove() 方法删除被选元素及其子元素。

jQuery empty() 方法删除被选元素的子元素。

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有

元素：

通过 jQuery，可以很容易地对 CSS 元素进行操作。

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

下面的样式表将用于本页的所有例子：

下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

您也可以在 addClass() 方法中规定多个类：

下面的例子演示如何在不同的元素中删除指定的 class 属性：

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

css() 方法设置或返回被选元素的一个或多个样式属性。

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

jQuery 提供多个处理尺寸的重要方法：

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

下面的例子返回指定的 元素的宽度和高度：

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

下面的例子返回指定的 元素的 inner-width/height：

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

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

下面的例子返回指定的 元素的 outer-width/height：

唯一需要注意的地方，设置了 box-sizing 后，width() 获取的是 css 设置的 width 减去 padding 和 border 的值。

当 box-sizing 设置为 content-box 时，width() 获取的值仍为element自身的宽度（border属性要加style，例如solid）

当 box-sizing 设置为 border-box时，width() 获取的值是 css 设置的 width 减去 padding 和 border 的值（border属性要加style，例如solid）