TryjQuery School学习重点总结

"TryjQuery School的学习笔记涵盖了jQuery的基本操作和选择器的使用，旨在帮助学习者理解和掌握jQuery的核心功能。" jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。以下是对TryjQuery School学习笔记中的知识点的详细说明： 1. `$(function() {...})`：这是jQuery中的文档就绪事件，表示当整个页面加载完成，包括图片和其他外部资源时，才会执行内部的JavaScript代码，避免因页面未完全加载而导致的操作错误。 2. 选择器：jQuery支持多种选择器，如`$("#id")`选择ID为指定值的元素，`$(".class")`选择具有指定类名的元素，`$("p2")`选择名字为“p2”的元素。 3. `.text()`方法：用于设置或获取元素的文本内容。如`$("li").text("aaa")`将所有`<li>`标签的内容替换为"aaa"；`$("#id").text()`则返回ID为"id"的元素的文本内容。 4. 子元素选择：`$("#idli")`选择ID为"id"的所有元素，`$("#id>li")`选择ID为"id"的元素下的所有直接子级`<li>`元素。 5. 多个选择器：使用逗号分隔，如`$("#idli, .class")`可以选择ID为"idli"的元素和类名为"class"的元素。 6. 特殊选择器：`$(“#idli:first”)`选取第一个元素，`$(“#idli:last”)`选取最后一个元素，`$(“#idli:odd”)`选取所有奇数索引的元素（从0开始），`$(“#idli:even”)`选取所有偶数索引的元素。 7. 遍历与效率：`$("#id").find("li")`可以找到所有后代`<li>`元素，效率高于仅使用选择器。`.first()`和`.last()`方法直接选取第一个或最后一个元素，而`.next()`和`.prev()`分别获取当前元素的下一个和上一个兄弟元素。`.parent()`则获取父元素。 8. `.children()`方法：与`.find()`类似，但只选取直属子元素。如`$("#id").children("li")`选取ID为"id"的元素下的所有`<li>`子元素。 9. 创建DOM对象：`$("<span>Call1-555-jquery-airtobookthistour</span>")`用于动态创建新的DOM对象。 10. DOM操作：`.remove()`方法用于删除匹配的DOM元素。其他插入方法如`.append()`, `.prepend()`, `.after()`, `.before()`等用于在元素前后添加内容。 11. 事件绑定：`.on('event', function() {...})`用于绑定事件监听器，例如`$('button').on('click', function() {...})`绑定点击事件。 12. `this`关键字：在事件处理函数中，`this`通常指的是触发事件的元素，但不是jQuery对象，需要使用`$(this)`将其转换为jQuery对象。 13. 寻找父节点：`.closest('selector')`寻找最近的匹配选择器的父元素，最多返回一个结果。 14. HTML5数据属性：通过`data()`方法可以获取或设置HTML5自定义数据属性，如`$('.usa').data('xxx')`获取类名为"usa"的元素的"data-xxx"值。 15. 事件委托：`.on('event', 'childSelector', function() {...})`允许在一个父元素上绑定事件，当其子元素触发事件时执行回调，如`$('.vacation').on('click', 'button', function() {...})`。 这些是jQuery的基础操作，理解并熟练运用它们能极大地提高JavaScript开发效率，简化DOM操作。学习和实践这些知识点对于提升网页交互设计和前端开发能力至关重要。