jQuery学习笔记（一）_H5之家 - 中国HTML5教程资源分享第一站

jQuery学习笔记（一） (2011-12-21 16:35:21)

标签： jquery web 分类： Web前端技术

jQuery 构造器

构造器是jQuery框架的内核（core），它犹如JavaScript语言的构造函数（Function）。构造器由jQuery()函数（可简写为$()）负责实现，该函数是整个jQuery框架的核心，jQuery中的一切操作都构建于这个函数之上。jQuery()函数可以接收四种类型的参数：

jQuery(expression,[context])：根据 CSS 选择器字符串在页面中匹配一组元素，或者利用context参数指定匹配的范围。

jQuery(html)：根据HTML标记字符串，动态创建由jQuery对象包装的DOM元素。

jQuery(elements)：将一个或多个DOM对象转化为jQuery对象。

jQuery(callback)：$(document).ready()的简写。允许绑定一个在 DOM 文档加载完毕之后执行的函数。

jQuery对象与DOM对象是两个不同的概念，它们不能够相互调用。jQuery对象只能够使用 jQuery定义的方法和属性；而 DOM 也只能够使用 DOM 组件和JavaScript 定义的方法和属性。因此，在调用对象的方法和属性时，应该清楚它属于什么对象。对于普通的 DOM 对象来说，如果要转换为 jQuery 对象，则使用 jQuery()函数即可。当然也可以把 jQuery对象转换为DOM 对象，由于 jQuery对象实际上就是一个 JavaScript 数据集合，如果要把jQuery对象转换为DOM对象，则必须从对象中选取其中的某一项元素，即通过索引选取其中一个元素对象即可。除了使用集合索引值把jQuery对象转换为DOM对象外，还可以使用jQuery的get()获取对象内指定索引的元素。

jQuery 基本用法

jQuery对象是一个集合，要访问这个集合，除了使用索引值以外，还可以使用jQuery定义的几个方法和属性。

each(callback): each(callback)方法实际上是 JavaScript 集合遍历的一种功能包装，它以 jQuery 对象内的集合元素为遍历对象，并循环执行指定的函数。在循环体内的函数中，this 关键字都会自动指向当前元素，且会自动向函数体内传递元素的索引值(从0开始)。如果函数中途返回false，则将停止循环。如果每次执行函数都返回 true，则将自动循环执
行函数，直到遍历结束。

size()和length: size()方法能够返回jQuery对象中元素的个数，而length属性与size()方法功能相同。

get(),get(index): get()方法能够把jQuery对象转换为DOM中的元素集合。get(index)方法与get()功能相同，但是它能够获取指定索引值的元素对象，请注意它返回的是DOM对象。

index(subject): 获取jQuery对象中指定元素的索引值。如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回－1。

访问 DOM 对象的属性

attr(name)：根据属性名（name 参数）获取 jQuery 对象中第一个元素的对应属性值。

attr(key,value)：为jQuery对象定义属性并赋值。

attr(key,fn)：我们还可以为传递的属性值设置为一个函数，通过函数计算所得的值来为属性赋值。

attr(properties)：为 jQuery 对象同时定义多个属性。多个属性以名/值对的形式组成对象进行参数传递。

removeAttr(name)：该方法能够移出 jQuery 对象内指定属性。

访问 DOM 样式类

样式类实际上是一种特殊的属性（class）。不过 jQuery 为此定义了三个方法专门用来控制样式类，其中包括增加类、删除类和开关类。

如果要为元素增加样式类，可以使用addClass(class)方法。也可以使用attr()方法定义样式类，此时是把它看作一个普通的属性进行增加。

如果要删除样式类，则可以使用 removeClass(class)方法。同样也可以使用removeAttr(name)方法来删除样式类。

jQuery还自定义了一个toggleClass(class)方法，它如同一个开关，如果元素已经定义了指定样式类，则会删除该样式类，否则增加该样式类。巧用这个方法，可以很轻松地设计鼠标经过或单击时动态改变元素样式的效果。

访问 DOM 元素包含信息

访问元素包含的信息可以使用text()方法获取。反过来，也可以为text()传递文本字符串，则将自动为元素添加指定文本字符串，同时会自动删除该元素包含的已有文本。（下面代码将会自动覆盖段落文本中原有信息，而增加“<img src='images/1.jpg' />”字符串，该字符串虽然是HTML源代码，但是在页面中仅显示字符串信息，而不是图像。）

text()和 text(val)方法能够读写 jQuery对象所有匹配元素的内容，结果是由所有匹配元素包含的文本内容组合起来的文本，这个方法对HTML和XML文档都有效。

如果希望获取段落中包含的所有内容（包括标签结构），则可以使用html()方法。同理，如果希望在段落中插入图像，而不是“<img src='images/1.jpg' />”字符串，则可以使用如下方法，这样所插入的字符串就不被编码，而是直接插入到文档结构中。 ($("p").html("<img src='images/1.jpg' />"); )

请注意，html()和 html(val)方法只作用于 jQuery 对象中第一个元素，也就是说只能够读写第一个元素内的HTML源代码，且不能用于XML文档，仅适用于XHTML文档。

text()和html()方法能够读写元素包含的信息和HTML源代码，但是如何读写表单域中的值却存在一定的问题。为此jQuery定义了val()方法，该方法专门用来读写表单值。

jQuery选择器

jQuery 提供了强大、易用的选择工具，用来选取网页对象或元素，这些选择工具主要包括两种方式。

方式一，模拟CSS和Xpath选择器，并混合它们的用法。这种方式可以把选择器字符串传递给jQuery构造器，从而达到选择复杂元素的目的。
方式二，使用jQuery对象定义的函数进行筛选。

这两种方式可以混合使用。

常用选择器

jQuery选择器严格遵循 CSS1 至 CSS3 选择器的规范和用法。

伪选择器

在 CSS 中曾经讲解过伪类和伪对象选择器，这些选择器不是选择页面中可视化的元素，而是选择元素或页面中的某种状态或特性，以实现动态捕获特定元素，因此在页面中无法找到所要选择的对象。jQuery 支持所有 CSS 伪类和伪对象，同时还扩展了丰富的伪选择器。

表单专用选择器

由于表单对象比较特殊，很多表单域都共用同一个元素input，这为快速选择特定表单域带来困难。为此jQuery定义了一组表单专用选择器。