调用jquery

引入jQuery库

在HTML文件中通过<script>标签引入jQuery库。可以从官方CDN或下载本地文件：

<!-- 使用CDN引入（推荐） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 或本地引入 -->
<script src="path/to/jquery.min.js"></script>

基本语法

jQuery的核心是通过$()函数选择DOM元素并操作，语法为：

$(selector).action();

• selector：CSS选择器字符串（如#id、.class、tag）。
• action()：jQuery方法（如hide()、click()）。

常用方法示例

DOM操作

// 获取/设置内容
$("#element").text("Hello");  
$("#element").html("<b>Hello</b>");  

// 修改属性
$("img").attr("src", "new-image.jpg");  

// 添加/移除类
$("#element").addClass("active");  
$("#element").removeClass("inactive");  

事件处理

// 点击事件
$("#button").click(function() {  
    alert("Button clicked");  
});  

// 表单提交事件
$("form").submit(function(e) {  
    e.preventDefault();  
    console.log("Form submitted");  
});  

AJAX请求

$.ajax({  
    url: "api/data",  
    method: "GET",  
    success: function(response) {  
        console.log(response);  
    },  
    error: function(xhr, status, error) {  
        console.error(error);  
    }  
});  

链式调用

jQuery支持链式调用，多个方法可连续执行：

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

文档就绪事件

确保代码在DOM完全加载后执行：

$(document).ready(function() {  
    // jQuery代码  
});  

// 简写形式  
$(function() {  
    // jQuery代码  
});  

注意事项

• 避免重复选择同一元素，可通过变量缓存：

  var $element = $("#element");  
  $element.hide();  
  $element.show();  

• 使用最新版本（如jQuery 3.x），注意兼容性问题。
• 若与其他库冲突（如$被占用），可使用jQuery.noConflict()。