jquery基础手册

### jQuery基础手册精要 #### 一、简介 jQuery是一个快速、简洁的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等常见任务。本手册将深入探讨jQuery中的一些核心功能，包括但不限于：类的管理、元素内容的操作、属性的获取与设置、元素的定位与检索、事件的触发与处理、DOM节点的创建与管理等。 #### 二、关键知识点详解 1. **addClass() 和 removeClass()** - `addClass()`用于向元素添加一个或多个类名。 - `removeClass()`用于移除元素的一个或多个类名。 - 这两个方法允许动态改变元素的样式和行为，常用于响应用户操作或页面状态变化。 2. **append(content) 和 appendTo(stringexpr)** - `append(content)`在每个匹配元素的末尾插入新的HTML或DOM元素。 - `appendTo(stringexpr)`将每个匹配元素插入到由选择器指定的每个元素的末尾。 - 这两个方法用于构建和修改DOM结构，是动态网页开发中的常用工具。 3. **attr(stringname) 和 attr(stringkey, objectvalue)** - `attr(stringname)`获取第一个匹配元素的属性值。 - `attr(stringkey, objectvalue)`为所有匹配元素设置一个属性值。 - 这些方法提供了读取和设置元素属性的简便方式，如ID、class或自定义属性。 4. **before(content) 和 after(content)** - `before(content)`在每个匹配元素前插入新内容。 - `after(content)`在每个匹配元素后插入新内容。 - 这些方法可以用来在DOM树中精确地插入元素，从而实现复杂的布局调整。 5. **eq(int)** - `eq(int)`选取数组中的某个特定元素。 - 常用于处理一组元素中的单个元素，例如从所有段落中选择第二个段落。 6. **focus() 和 blur()** - `focus()`使元素获得焦点。 - `blur()`使元素失去焦点。 - 这些方法用于控制表单元素的焦点，是实现表单交互的关键。 7. **each()** - `each()`对匹配的每个元素执行一个函数。 - 这是遍历和操作多个元素集的有效手段，允许执行复杂逻辑而无需手动循环。 8. **empty()** - `empty()`清空匹配元素内的所有子节点。 - 常用于重置元素内容，例如清除表格数据或表单输入。 9. **find(stringexpr)** - `find(stringexpr)`搜索所有与指定表达式匹配的元素。 - 此方法允许从一组父元素中查找后代元素，对于复杂的选择器非常有用。 10. **get(Number数字值num)** - `get(Number数字值num)`取得第num个位置上的元素。 - 这提供了一种直接访问匹配元素集中特定元素的方式，类似于数组索引。 11. **hide() 和 show()** - `hide()`隐藏显示的元素。 - `show()`显示隐藏的匹配元素。 - 这些方法用于动态控制元素的可见性，是动画和UI设计的基础。 12. **size()** - `size()`返回当前匹配的元素数量。 - 可以用来判断是否有元素满足条件，或者获取元素集合的长度。 13. **select()** - `select()`触发每一个匹配元素的select事件。 - 常用于表单中的下拉菜单或文本框，可以触发选择事件的默认行为。 14. **unload()** - `unload()`在每个匹配元素的unload事件中绑定一个处理函数。 - 主要用于窗口关闭或页面卸载时清理资源或执行最后的处理。 15. **width() 和 height()** - `width()`和`height()`分别获取元素的宽度和高度。 - 这些方法用于获取元素的实际大小，可用于布局调整或动画效果。 16. **val()** - `val()`获取第一个匹配元素的当前值。 - `val(String)`设置每个匹配元素的值。 - 这些方法用于处理表单控件的值，如文本框、下拉列表等。 17. **text()** - `text()`获取所有匹配元素的文本内容。 - `text(String)`设置所有匹配元素的文本内容。 - 这些方法用于读写元素的纯文本内容，不包括HTML标签。 18. **toggle()** - `toggle()`切换元素的可见状态。 - 这个方法提供了一种简单的方式来开关元素的显示状态，常用于折叠面板或菜单。 19. **toggleClass(StringCSS类名)** - `toggleClass(StringCSS类名)`根据类是否存在来添加或删除。 - 这个方法提供了一种动态切换元素样式的简便方式，适用于多种场景。 20. **trigger(Stringtype要触发的事件类型)** - `trigger(Stringtype要触发的事件类型)`在每个匹配元素上触发某类事件。 - 这个方法用于手动触发事件，如点击、悬停等，以实现更复杂的交互。 21. **$.trim(stringstr)** - `$.trim(stringstr)`删除字符串两端的空白字符。 - 这个方法用于文本处理，确保字符串干净无误。 22. **submit()** - `submit()`触发每个匹配元素的submit事件。 - 这个方法用于提交表单，可以触发默认提交行为或自定义处理。 23. **ready()** - `ready()`当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 - 这个方法确保脚本在DOM完全加载后执行，避免了因元素未加载导致的错误。 24. **remove()** - `remove()`从DOM中删除所有匹配的元素。 - 这个方法用于彻底删除元素及其所有子元素，释放内存。 25. **removeAttr(stringname)** - `removeAttr(stringname)`从每个匹配元素中删除一个属性。 - 这个方法用于移除不再需要的属性，如事件监听器或样式类。 #### 三、DOM操作示例 - **创建元素节点** - 在jQuery中创建元素节点比传统的JavaScript方法更为简洁。 - 使用`$('<p></p>')`可以轻松创建一个新的`<p>`元素。 - **创建文本节点** - jQuery同样简化了文本节点的创建，如`$('<p>hello world</p>')`。 - **复制节点** - jQuery提供了`.clone()`方法来复制节点，包括其属性和子节点。 通过这些核心知识点的学习和实践，你可以更加熟练地运用jQuery进行网页开发，实现丰富的动态效果和交互体验。