页面加载时执行jquery

基础概念： jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 的核心特性是它提供了一个简洁的 API 来操作 HTML 文档、处理事件、创建动画效果以及执行 Ajax 请求。

优势：

1. 简化代码：jQuery 提供了大量的方法来简化 DOM 操作，使得代码更加简洁易读。
2. 跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，使得开发者无需担心兼容性问题。
3. 丰富的插件生态：有大量的第三方插件可供使用，扩展了 jQuery 的功能。
4. 强大的选择器：jQuery 提供了强大的 CSS 选择器，方便开发者快速定位 DOM 元素。

类型：

• 核心库：提供基础的 DOM 操作、事件处理等功能。
• UI 组件：如 jQuery UI，提供了一系列的用户界面组件。
• 插件：扩展了 jQuery 的核心功能，如表单验证、图片轮播等。

应用场景：

• 快速原型开发：使用 jQuery 可以快速搭建交互式的网页原型。
• DOM 操作：简化了对 HTML 元素的增删改查操作。
• 事件处理：统一处理各种浏览器事件。
• 动画效果：创建平滑的页面动画。
• Ajax 应用：简化了异步数据请求和处理。

页面加载时执行 jQuery： 要在页面加载时执行 jQuery 代码，可以使用 $(document).ready() 或者简写形式 $(function() { ... })。这确保了 DOM 完全加载后再执行 jQuery 代码，避免了因 DOM 元素未加载完成而导致的错误。

示例代码：

$(document).ready(function() {
    // 页面加载完成后执行的代码
    $('button').click(function() {
        alert('按钮被点击了！');
    });
});

// 简写形式
$(function() {
    $('button').click(function() {
        alert('按钮被点击了！');
    });
});

常见问题及解决方法：

1. jQuery 未定义：
   • 原因：可能是因为 jQuery 库没有正确引入，或者引入顺序不正确（jQuery 库应在自定义脚本之前引入）。
   • 解决方法：检查 HTML 文件中 <script> 标签的引入顺序和路径是否正确。

• 选择器无响应：
  • 原因：可能是选择器写错，或者目标元素在 DOM 加载完成前不存在。
  • 解决方法：使用浏览器的开发者工具检查元素是否存在，并确保选择器正确无误。
• 事件绑定失败：
  • 原因：如果事件绑定在动态生成的元素上，直接使用 .click() 可能无效。
  • 解决方法：使用事件委托，如 $(document).on('click', 'button', function() { ... })。

通过以上方法，可以有效解决页面加载时执行 jQuery 常见的问题。