jquery选择器及jquery表单操作

### jQuery选择器详解 在网页开发中，jQuery作为一款轻量级、功能强大的JavaScript库，极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。其中，选择器是jQuery的核心特性之一，它提供了丰富的语法来选取页面中的DOM元素，使开发者能够更灵活、高效地操纵页面元素。 #### 基本选择器 - **ID选择器**：`$("#myElement")`用于选取拥有特定ID的元素，由于ID在文档中通常是唯一的，因此此选择器只会返回一个元素。 - **类选择器**：`$(".myClass")`用于选取具有指定类的所有元素。 - **元素选择器**：`$("div")`用于选取所有`<div>`元素。 - **通用选择器**：`$("*")`选取文档中的所有元素。 #### 层次选择器 - **子元素选择器**：`$("#main > *")`选取ID为`main`的元素的所有直接子元素。 - **相邻兄弟选择器**：`$("label + input")`选取紧接在`<label>`元素后的`<input>`元素。 - **一般兄弟选择器**：`$("#prev ~ div")`选取与ID为`prev`的元素处于同一层级的所有`<div>`元素。 - **后代选择器**：`$("tr:first")`选取所有`<tr>`元素中的第一个元素。 - **子代选择器**：`$("div span:first-child")`选取每个`<div>`下的第一个`<span>`子元素。 #### 属性选择器 - `$("div[id]")`选取所有具有`id`属性的`<div>`元素。 - `$("input[name='newsletter']")`选取`name`属性值为`newsletter`的所有`<input>`元素。 - `$("input[name!='newsletter']")`选取`name`属性值不为`newsletter`的所有`<input>`元素。 - `$("input[name^='news']")`选取`name`属性值以`news`开头的所有`<input>`元素。 - `$("input[name$='news']")`选取`name`属性值以`news`结尾的所有`<input>`元素。 - `$("input[name*='man']")`选取`name`属性值包含`man`的所有`<input>`元素。 #### 位置选择器 - `$("tr:even")`选取索引为偶数（0、2、4...）的`<tr>`元素。 - `$("tr:odd")`选取索引为奇数（1、3、5...）的`<tr>`元素。 - `$("td:eq(2)")`选取索引为2的`<td>`元素。 - `$("td:gt(4)")`选取索引大于4的所有`<td>`元素。 - `$("td:lt(4)")`选取索引小于4的所有`<td>`元素。 #### 可见性选择器 - `$("div:hidden")`选取不可见的所有`<div>`元素。 - `$("div:visible")`选取可见的所有`<div>`元素。 #### 表单对象选择器 - `$("input:text")`选取所有的文本输入框。 - `$("input:password")`选取所有的密码输入框。 - `$("input:radio")`选取所有的单选按钮。 - `$("input:checkbox")`选取所有的复选框。 - `$("input:submit")`选取所有的提交按钮。 - `$("input:image")`选取所有的图像按钮。 - `$("input:reset")`选取所有的重置按钮。 - `$("input:button")`选取所有的普通按钮。 - `$("input:file")`选取所有的文件上传控件。 - `$("input:hidden")`选取所有的隐藏输入框。 #### 状态选择器 - `":enabled"`选取所有可用（未被禁用）的元素。 - `":disabled"`选取所有被禁用的元素。 - `":checked"`选取所有被选中的复选框或单选按钮。 - `":selected"`选取所有被选中的`<option>`元素。 #### 内容过滤选择器 - `$("div:animated")`选取正在执行动画效果的所有`<div>`元素。 - `$("div:contains('John')")`选取含有文本“John”的所有`<div>`元素。 - `$("td:empty")`选取所有空的`<td>`元素。 - `$("div:has(p)")`选取包含至少一个`<p>`元素的所有`<div>`元素。 - `$("td:parent")`选取包含其他元素的`<td>`元素。 #### 子元素选择器 - `$("div span:first-child")`选取每个`<div>`下的第一个`<span>`子元素。 - `$("div span:last-child")`选取每个`<div>`下的最后一个`<span>`子元素。 - `$("div button:only-child")`选取每个`<div>`下唯一的一个`<button>`子元素。 #### 表单操作 除了选择器外，jQuery还提供了丰富的API来操作表单元素，例如： - 获取或设置元素的值：`$(input[@name='newsletter']).val()`获取`name`为`newsletter`的`<input>`元素的值。 - 设置元素的属性：`$(input[@name='newsletter']).attr('type', 'email')`设置`name`为`newsletter`的`<input>`元素的类型为`email`。 - 触发事件：`$(input[@name='newsletter']).click()`模拟点击事件。 通过以上介绍，我们可以看到jQuery的选择器不仅种类繁多，而且功能强大，能够满足开发者在各种场景下的需求，极大地提高了前端开发的效率和灵活性。在实际项目中，熟练掌握并运用这些选择器，将有助于我们更加高效地进行页面元素的定位和操作。