jquery学习笔记

jQuery 是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。本篇文章将深入探讨jQuery的核心概念和常用方法，帮助读者更好地理解和应用jQuery。 我们来了解一下`$(document).ready()`和`$(function(){})`这两个函数。它们都是确保在DOM（文档对象模型）加载完成后才执行的函数，确保了所有元素都已经可访问。而`window.onload`函数则等待整个页面包括图像加载完毕后才执行，因此如果页面中有多个`window.onload`，只会执行最后一个。 jQuery允许我们将DOM对象转换为jQuery对象，以便利用jQuery的方法。例如，通过`$(domObj)`可以将DOM对象转换为jQuery对象，反之，通过`.get(0)`可以将jQuery对象转换回DOM对象。转换后的对象可以方便地使用jQuery提供的方法，如`.html()`用于获取或设置元素的HTML内容，`.css()`用于操作样式，`.attr()`用于获取或设置属性等。 在CSS类的操作上，jQuery提供了便捷的方法。例如，`addClass()`用于添加类，`removeClass()`用于移除类，`toggleClass()`用于切换类。例如，`$(“.hasChild”).addClass(“hightlight”)`会给所有匹配`.hasChild`的元素添加`hightlight`类。 jQuery还提供了操作元素显示和隐藏的方法，如`.show()`用于显示元素，`.hide()`用于隐藏元素，`.toggle()`用于切换显示和隐藏状态。此外，`.siblings()`用于获取元素的同级元素，`.children()`用于获取元素的所有直接子元素。 在选择和过滤元素方面，jQuery提供了丰富的选择器。例如，`$("#one")`选择ID为`one`的元素，`$(".one")`选择所有class为`one`的元素，`$("div")`选择所有`div`元素。层级选择器如`$("body>div")`会选择`body`内的直接子`div`元素。过滤选择器如`:first`、`:last`、`:not`、`:even`、`:odd`和`:eq(index)`等，可以根据特定条件筛选元素。 例如，`$("div:first").css("background", "#bfa")`将选择并改变第一个`div`元素的背景色，而`$("div:gt(3)").css("background", "#bfa")`会改变索引值大于3的所有`div`元素的背景色。 解决jQuery与其他库（如Prototype）的冲突问题，可以使用`jQuery.noConflict()`方法，这将释放`$`变量的控制权，使其恢复到之前的库使用。例如，`jQuery(function(){ ... })`包裹内部的代码，确保在这个范围内使用`jQuery`而不是`$`。 jQuery提供了一套强大且易用的API，使得JavaScript开发者能更高效地操作DOM、处理事件、创建动画和进行Ajax请求。通过熟悉这些基础概念和方法，开发者可以快速构建动态、交互丰富的Web应用。在实践中不断学习和实践jQuery，你会发现它极大地提高了开发效率。