jQuery学习资料总结

### jQuery学习资料总结 在本篇文章中，我们将深入探讨jQuery的核心功能与用法，并通过具体的示例来加深理解。jQuery是一款流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。下面，让我们逐一解析标题与描述中提到的知识点。 #### 1. `window.onload` 与 `$(document).ready` - **`window.onload`**：这个函数会在整个页面（包括所有依赖资源如图片、样式表等）加载完毕后执行。 - **`$(document).ready`**：此方法则在DOM结构完成加载后即刻触发，无需等待其他资源加载完成。 - **简写形式**：为了提高代码的可读性及简洁性，jQuery提供了更简便的写法——`$(function(){});`，这与`$(document).ready(function(){});`是等效的。 #### 2. jQuery与DOM操作 - **jQuery vs DOM**： - **jQuery** 是DOM的一个封装层，可以简化DOM的操作。例如，使用`$("#foo").html();`获取元素的内容，而使用原生DOM方法则需要`document.getElementById('foo').innerHTML;`。 - **区别**：尽管两者都能实现相同的功能，但jQuery提供了更简洁的语法和更多的功能支持，比如选择器、动画效果等。另外，jQuery还具有更好的跨浏览器兼容性。 - **jQuery对象与DOM对象转换**： - **从jQuery对象到DOM对象**：可以通过`get()`方法来实现，如`var cr = $("#cr").get(0);`。 - **从DOM对象到jQuery对象**：直接使用`$()`包裹即可，如`var $cr = $(cr);`。 #### 3. jQuery选择器详解 - **基本选择器**：包括ID选择器`#id`、类选择器`.class`、元素选择器`tag`等。例如`$("div p")`选择所有`<div>`内的`<p>`元素。 - **层次选择器**：如子元素选择器`$("div > span")`只选择直接作为`<div>`子元素的`<span>`元素；相邻兄弟选择器`$("div + span")`选择紧接在`<div>`后面的`<span>`元素；通用兄弟选择器`$("div ~ span")`选择所有在`<div>`之后的`<span>`元素。 - **过滤选择器**： - **子元素选择器**：如`$("div:first")`选择第一个`<div>`元素。 - **可见性选择器**：如`$("div:visible")`选择所有可见的`<div>`元素。 - **属性选择器**：如`$("div[title]")`选择所有带有`title`属性的`<div>`元素。 - **表单对象属性选择器**：如`$("input:checked")`选择所有被选中的`<input>`元素。 #### 4. 常用方法介绍 - **`toggle()`**：该方法用于切换元素的可见性或执行一系列回调函数。`$().toggle(function(){}, function(){});`可以在两个函数之间切换执行。`$().toggleClass("myclass")`可以在元素上添加或删除CSS类。 - **`html()` 和 `text()`**：`html()` 方法用于获取或设置元素的HTML内容，而`text()`则仅获取或设置文本内容。它们的区别在于`html()`会保留HTML标签，而`text()`则不会。 - **`css()`**：用于获取或设置CSS属性值。例如，`$("p").css("opacity", "0.5");`将`<p>`元素的不透明度设置为0.5。 - **`offset()`**：返回一个对象，包含元素相对于文档左上角的位置，通常用于定位元素。`$offset = $("p").offset();`可以获取元素的偏移量。 - **事件绑定**：`bind()`方法可以为元素绑定事件处理器，如`$().bind("click", function(){$(this).next("div").show("fast");});`为元素绑定点击事件，当点击时显示紧邻其后的`<div>`元素。 - **`hover()`**：用于创建鼠标悬停事件的便捷方法，如`hover(enter, leave)`，分别对应于鼠标进入和离开时的回调函数。 - **`one()`**：类似于`bind()`，但只触发一次就自动解除绑定，适用于一次性事件处理。 以上内容涵盖了jQuery的基础知识与核心功能，希望能对自学jQuery的朋友们有所帮助。在实际应用中，还需要根据具体需求灵活运用这些方法和技术。