jquery从入门到精通

jQuery 简介

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其核心特点是“写得更少，做得更多”，适合快速开发前端功能。

基础语法

jQuery 的核心是通过 $() 函数选择 DOM 元素并对其进行操作。基本语法结构为：

$(selector).action();

• selector：用于选择 HTML 元素（如 "p"、".class"、"#id"）。
• action()：对元素执行的方法（如 hide()、click()）。

示例：隐藏所有段落

$("p").hide();

常用方法

1. DOM 操作

   

   • 获取/设置内容：

     $("#demo").text(); // 获取文本
     $("#demo").html("<b>Hello</b>"); // 设置 HTML

   • 修改属性：

     $("img").attr("src", "new-image.jpg"); 

2. 事件处理

   • 点击事件：

     $("button").click(function() {
       alert("Button clicked!");
     });

   • 鼠标悬停：

     $("div").hover(
       function() { $(this).css("background", "yellow"); }, // 鼠标进入
       function() { $(this).css("background", "none"); }    // 鼠标离开
     );

3. 动画效果

   

   • 显示/隐藏：

     $(".box").hide(1000); // 1秒内渐隐
     $(".box").show("slow"); // 慢速显示

   • 自定义动画：

     $("div").animate({ 
       left: "250px",
       opacity: "0.5"
     }, 1500);

Ajax 应用

通过 jQuery 发送异步请求：

$.ajax({
  url: "data.json",
  type: "GET",
  success: function(data) {
    console.log("Data received:", data);
  },
  error: function(error) {
    console.log("Error:", error);
  }
});

插件扩展

jQuery 支持通过插件扩展功能，例如：

• Validation Plugin：表单验证。
• DataTables：动态表格处理。

插件使用示例：

$("#form").validate({
  rules: { email: { required: true, email: true } }
});

性能优化建议

1. 缓存选择器结果：

   var $elements = $(".items"); // 避免重复查询 DOM

2. 事件委托：

   $("#parent").on("click", ".child", function() {
     // 动态子元素的事件处理
   });

学习资源

• 官方文档：jQuery API
• 书籍推荐：《jQuery in Action》《jQuery 权威指南》
• 实践项目：构建动态表单、图片轮播、Ajax 数据加载等。

通过系统练习和项目实践，可逐步掌握从基础到高级的 jQuery 应用技巧。