Query选择器和过滤器介绍是JQuery学习的关键之一。JQuery选择器主要分为以下6种：ID选择器、tag选择器、类选择器、标签+类选择器、组合选择器和层次选择器 。而过滤选择器则包括基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器 。

今天我学习了JavaScriptDOM和JQuery。JQuery的原则是“write less, do more”，这句话已经充分说明了它对简化使用JavaScriptDOM编程的功力！每个老师都有自己的教学方式，可能根据教授的内容的不同教学方式也有轻微的变化。老佟是一位非常有经验的软件教师，之前他在大连的软件公司做培训。经过多年的总结，他已经有自己一套成熟的教学方式。这个方式让我十分喜欢！至于是什么方式，你自己来体验吧！哈哈~~

从学习JavaWEB、Struts1到现在的JavaScript,我已经找到了WEB应用开发的核心——MVC。是的，就是MVC。其实MVC应该是根据WEB的核心被创造出来的模式，难道不是吗！这一整套工具，就是分别对视图层、控制层和数据模型层的操作。似乎现在才找到了一些感觉，因为以前学习servlet时，知道它可以处理用户的请求，老师讲什么就学习什么。但现在有思想了，老师你无论讲什么，我都知道它应该用在哪一层，有什么用途，这样提高了我的学习效率。这是一个非常好的成长！对以后的成长大有帮助。

接下来这些灵散的知识就不多了，然后就开始做项目了。两个字，快、爽！Ok,开始整理学习内容。

一、JQuery与JavaScript

1.JavaScript库

使用过JavaScriptDOM的人都应该知道(比如昨天的练习),使用JSDOM进行页面的操作是十分麻烦的。比如获取、修改及添加子节点等这些操作。如果操作一个复杂的页面呢？Ok,JavaScript库因此诞生了。

目前比较常见的JavaScript库有：

2.JQuery简介

JQuery是继Prototype之后又一个优秀的JavaScript库。

JQuery理念：write less , do more.

JQuery优势：轻量级、强大的选择器、出色的 DOM 操作的封装、可靠的事件处理机制、完善的Ajax、出色的浏览器兼容性、链式操作方式......。

二、JQuery对象与DOM对象

1.JQuery对象

JQuery对象就是使用“$(“DOMObj”)”，将DOM对象包装起来。一般在JQuery对象前面加上“$”这样与DMO对象区分，它已经是一种公认的命名约定。JQuery对象不能调用DOM对象的属性和方法，同样DOM对象也不能调用JQuery对象的属性和方法。

您好，您想了解JQuery对象转成DOM对象的方法吗？如果想使用JQuery对象调用DOM对象的方法，可以将其转换为DOM对象，只需调用JQueryObj[x]或JQueryObj.get(X);即可转换为DOM对象。如果您想使用JQuery选择器，它是JQuery的根基之一，在JQuery 中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。其中基本选择器是最常用的选择器，也是最简单的选择器，它通过元素ID、class 和标签名来查找DOM元素。而层次选择器则是用来获取指定元素的父子节点、兄弟节点。过滤选择器则是一种特殊的选择器，它可以帮助我们快速地筛选出符合特定条件的元素。

过滤选择器是jQuery中的一种功能，它可以帮助我们根据特定的条件从DOM元素集合中筛选出我们需要的元素。要使用过滤选择器，我们需要在选择器前加上冒号(:)。

过滤选择器可以分为以下几类：

1. 基本过滤选择器：这些选择器用于选取特定条件下的元素。例如：

- `:first`:选取第一个元素。

- `:last`:选取最后一个元素。

- `:not(selector)`:去除所有与给定选择器匹配的元素。

- `:even`:选取所有偶数索引的元素。

- `:odd`:选取所有奇数索引的元素。

- `:eq(index)`:选取指定索引的元素。

- `:gt(index)`:选取索引大于指定索引的元素。

- `:lt(index)`:选取索引小于指定索引的元素。

- `:header`:选取所有的标题元素，如hq、h2等。

- `:animated`:选取当前正在执行的所有动画元素。

2. 内容过滤选择器：这些选择器用于选取包含特定文本内容的元素。例如：

- `:contains(text)`:选取包含text文本内容的元素。

3. 可见性过滤选择器：这些选择器用于根据元素的可见与不可见状态来选取元素。例如：

- `:hidden`:选取所有不可见元素。

- `:visible`:选择所有可见元素。

通过组合不同的过滤规则，我们可以根据实际需求灵活地筛选出所需的DOM元素。

可见选择器：hidden 不仅包含样式属性 display 为 none 的元素，也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden 之类的元素。

4). 属性过滤选择器

通过元素的属性来选取相应的元素。

a) “[attribute]”，选取拥有此属性的元素。

b) “[attribute=value]”，选取指定属性值为value的所有元素。

c) “[attribute !=value]”，选取属性值不为value的所有元素。

d) “[attribute ^= value]”，选取属性值以value开始的所有元素。

e) “[attribute $= value]”，选取属性值以value结束的所有元素。

f) “[attribute *= value]”，选取属性值包含value的所有元素。

g) “[selector1] [selector2]...[selectorN]”，复合性选择器，首先经[selector1]选择返回集合A,集合A再经过[selector2]选择返回集合B,集合B再经过[selectorN]选择返回结果集合。

5). 子元素过滤选择器

一看名字便是，它是对某一元素的子元素进行选取的。

a) “：nth-child(index/even/odd)”，选取索引为index的元素、索引为偶数的元素、索引为奇数的元素。

l nth-child(even/odd):能选取每个父元素下的索引值为偶(奇)数的元素。

l nth-child(2):能选取每个父元素下的索引值为 2 的元素。

l nth-child(3n):能选取每个父元素下的索引值是 3 的倍数的元素。

l nth-child(3n + 1):能选取每个父元素下的索引值是 3n + 1的元素。

b) “：first-child”，选取第一个子元素。

c) “：last-child”，选取最后一个子元素。

d) “：only-child”，选取唯一子元素，它的父元素只有它这一个子元素。

6). 表单过滤选择器

选取表单元素的过滤选择器。

a) “：input”，选取所有<input>、<textarea>、<select >和<button>元素。

以下是重构后的内容：

1. 基本选择器

a) “：text”，选取所有的文本框元素。

b) “：password”，选取所有的密码框元素。

c) “：radio”，选取所有的单选框元素。

d) “：checkbox”，选取所有的多选框元素。

e) “：submit”，选取所有的提交按钮元素。

f) “：image”，选取所有的图像按钮元素。

g) “：reset”，选取所有重置按钮元素。

h) “：button”，选取所有按钮元素。

i) “：file”，选取所有文件上传域元素。

j) “：hidden”，选取所有不可见元素。

2. 表单对象属性过滤选择器

a) “：enabled”，选取所有可用元素。

b) “：disabled”，选取所有不可用元素。

c) “：checked”，选取所有被选中的元素，如单选框、复选框。

d) “：selected”，选取所有被选中项元素，如下拉列表框、列表框。

3. JQuery中的DOM操作

JQuery提供了一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。DOM Core适用于任何支持DOM的程序设计语言，包括JavaScript和XML等。HTML DOM为HTML文件编写脚本时提供了许多专属于HTML-DOM的属性。CSS-DOM主要用于获取和设置style对象的各种属性，针对于CSS操作。

4. 查找节点

可以使用基本选择器进行节点查找，具体方法请参考上述内容。

5. 创建节点

使用JQuery的工厂函数创建一个新节点，例如：`var $newNode = $(“

你好

”);`,然后将新节点插入到指定元素节点处。

6. 插入节点

将新创建的节点或获取的节点插入指定的位置，例如：`$node.append($newNode);`,向每个匹配的元素内部的结尾处追加新节点。例如：`$(“p”).append(“Hello”);` 将 `Hello` 添加到 `p` 内部的结尾处。

以下是重构后的内容：

1. 追加新元素到匹配元素内部的结尾处：

```javascript

$newNode.appendTo($node);

```

2. 在匹配元素内部的结尾处追加新元素开始处：

```javascript

$node.prepend($newNode);

```

3. 将新元素追加到匹配元素内部的开始处：

```javascript

$newNode.prependTo($node);

```

4. 在匹配元素的之后插入内容(并列兄弟):

```javascript

$newNode.after($node);

```

5. 将新元素插入到匹配元素之后：

```javascript

$newNode.insertAfter($node);

```

6. 在匹配元素的之前插入新元素(兄弟关系):

```javascript

$newNode.before($node);

```

7. 将新元素插入到匹配元素之前：

```javascript

$newNode.insertBefore($node);

```

注意：如果插入的节点不是新创建的，插入将变成移动操作。所以，在插入这样的节点之前应该使用clone的节点。

克隆匹配的DOM元素。例如，使用`$("p").clone();`返回克隆后的副本，但不具有任何行为。如果要将DOM的事件一起克隆，应该使用`$("p").clone(true);`。

6. 替换节点

将所有匹配的元素都替换为指定的HTML或DOM元素。例如，`$("p").replaceWith("Paragraph.");`,将所有p元素替换为`Paragraph.`。与replaceWith相反的操作是`$("Paragraph.").replaceAll("p");`。

7. 包裹节点

wrap():将指定节点用其他标记包裹起来。该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。例如，`$("p").wrap("

");`,每个p元素被包裹到`