Jquery学习笔记1

### Jquery 学习笔记1 本篇笔记主要围绕 jQuery 的基本使用方法展开，包括了 DOM 操作、选择器的使用、属性与过滤器等内容。jQuery 是一款优秀的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画等操作，并提供了强大的 Ajax 交互功能。 #### 一、DOM 操作 在传统的 JavaScript 中，我们可以通过多种方式来获取或操作 DOM 元素，例如： - 使用 `document.getElementById` 获取特定 ID 的元素。 - 使用 `document.getElementsByTagName` 获取具有特定标签名的所有元素。 - 通过 `this` 或 `event.srcElement` 获取当前触发事件的元素。 - 使用 `appendChild`, `attributes`, `childNodes`, `className`, `cloneNode`, `dir`, `firstChild`, `getAttribute`, `getAttributeNode` 等方法来操作 DOM 元素的属性和结构。 而在 jQuery 中，这些操作被进一步简化，例如： 1. **DOM 转换为 jQuery 对象** - 使用 `$` 符号可以将一个 DOM 元素转换成 jQuery 对象。 ```javascript var $jqueryObject = $("#testDiv"); // 将 DOM 元素转换为 jQuery 对象 var div = document.getElementById("testDiv"); var $domToJqueryObject = $(div); ``` 2. **jQuery 对象转换为 DOM** - 可以通过 `[0]` 或 `.get(0)` 方法将 jQuery 对象转换回 DOM 元素。 ```javascript var $domToJqueryObject = $("#testDiv"); var domElement = $domToJqueryObject[0]; ``` - 如果需要遍历每个元素，可以使用 `each()` 方法： ```javascript $("#test").each(function() { alert(this); // "this" 是当前 DOM 元素 }); ``` #### 二、选择器 jQuery 提供了非常强大且灵活的选择器机制，用于选取页面中的元素。 1. **基本选择器** - 通过 `#id` 选择具有特定 ID 的元素：`$("div#id")` - 通过类名选择元素：`$(".bgred")` - 选择所有元素：`$("*")` 2. **组合选择器** - 可以同时选择多个类型或选择器，如 `$("#divid, a, .bgred")`。 3. **层次选择器** - 用于选取具有特定层次关系的元素。 4. **过滤选择器** - `:first` 选取第一个元素：`$("tr:first")` - `:last` 选取最后一个元素 - `:not(selector)` 选取不匹配某个选择器的元素 - `:even` 选取索引为偶数的元素（从 0 开始计数） - `:odd` 选取索引为奇数的元素 - `:eq(index)` 选取指定索引的元素 - `:gt(index)` 选取索引大于指定值的元素 - `:lt(index)` 选取索引小于指定值的元素 - `:header` 选取所有的 `<h1>, <h2>, ...` 等 header 标签 - `:contains(text)` 选取包含指定文本的元素 - `:empty` 选取没有子元素或文本的元素 - `:has(selector)` 选取含有匹配指定选择器的后代元素的父元素 - `:parent` 选取含有子元素的元素 - `:visible` 和 `:hidden` 分别选取可见或不可见的元素 5. **属性过滤器** - `[attribute]` 选取具有特定属性的元素 - `[attribute=value]` 选取属性值等于指定值的元素 - `[attribute!=value]` 选取属性值不等于指定值的元素 - `[attribute^=value]` 选取属性值以指定字符串开头的元素 - 可以组合使用多个属性过滤器来精确筛选元素 6. **子元素过滤器** - `:nth-child(index/even/odd)` 选取具有特定位置的子元素 - `:first-child` 选取第一个子元素 - `:last-child` 选取最后一个子元素 - `:only-child` 选取作为其父元素唯一子元素的元素 #### 三、表单选择器 jQuery 还提供了一系列用于选择表单元素的方法： 1. `:input` 选择所有的输入、文本区域、按钮和选择框 2. `:text` 选择所有的文本框 3. `:password` 选择所有的密码框 4. `:radio` 选择所有的单选按钮 5. `:checkbox` 选择所有的复选框 6. `:submit` 选择所有的提交按钮 7. `:image` 选择所有的图像按钮 8. `:reset` 选择所有的重置按钮 9. `:file` 选择所有的文件上传框 10. `:enabled` 选择所有可用的元素 11. `:disabled` 选择所有禁用的元素 12. `:checked` 选择所有被选中的复选框和单选按钮 通过以上内容的学习，我们可以更加熟练地使用 jQuery 来操作和选择页面中的元素，进而实现更加复杂的网页交互效果。