jquery教程

jQuery 教程：基础与实用方法

jQuery 简介

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

引入 jQuery

在 HTML 文件中通过 CDN 引入 jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

基础语法

jQuery 通过 $ 或 jQuery 关键字调用，基本语法为：

$(selector).action();

• selector：选择器（如 #id、.class 或 element）。
• action()：对选中元素执行的操作（如 hide()、click()）。

常用方法

1. 选择元素

$("#myId");          // 通过 ID 选择  
$(".myClass");       // 通过类选择  
$("p");              // 选择所有 <p> 元素  

2. 事件处理

$("button").click(function() {  
    alert("按钮被点击");  
});  

3. DOM 操作

$("#div1").html("新内容");    // 修改 HTML 内容  
$("#input1").val("文本");     // 设置输入框值  
$("#div2").append("<p>追加内容</p>"); // 追加元素  

4. 动画效果

$("#box").hide(1000);          // 隐藏（1 秒动画）  
$("#box").fadeIn("slow");      // 淡入  
$("#box").animate({left: "250px"}, 500); // 自定义动画  

5. Ajax 请求

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

链式调用

jQuery 支持链式调用，例如：

$("#div1").css("color", "red").slideUp(500).slideDown(500);  

注意事项

• 确保 DOM 加载完成后执行 jQuery 代码：

  $(document).ready(function() {  
    // 代码在此执行  
  });  

• 使用最新版本 jQuery（如 3.x）以获得更好的性能和安全性。

学习资源推荐

• jQuery 官方文档
• Codecademy、W3Schools 的 jQuery 交互式教程
• GitHub 上的开源项目示例

通过以上方法，可以快速掌握 jQuery 的核心功能并应用于实际开发中。