jquery 格式

jQuery 格式基础

jQuery 是一个快速、简洁的 JavaScript 库，其核心语法基于 CSS 选择器，通过链式调用简化 DOM 操作。以下是常见格式示例：

选择元素与操作
通过 $() 或 jQuery() 选择元素，支持 CSS 选择器语法：

$("#id")       // ID 选择器  
$(".class")    // 类选择器  
$("div")       // 标签选择器  
$("div.class") // 组合选择器  

链式调用
jQuery 方法通常返回对象自身，支持链式调用：

$("p").css("color", "red").hide(500).show(500);  

事件处理

使用 .on() 或简写方法绑定事件：

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

// 等效于  
$("#btn").on("click", function() {  
    // 事件逻辑  
});  

AJAX 请求

jQuery 提供简洁的 AJAX 方法：

$.ajax({  
    url: "data.json",  
    method: "GET",  
    success: function(data) {  
        console.log(data);  
    },  
    error: function(error) {  
        console.error("请求失败", error);  
    }  
});  

// 简写形式  
$.get("data.json", function(data) {  
    console.log(data);  
});  

DOM 操作

常见 DOM 操作方法示例：

$("#container").append("<p>新段落</p>");  // 插入内容  
$("p").remove();                         // 删除元素  
$("#input").val("默认值");               // 设置表单值  

动画效果

内置动画方法如 hide()、show()、animate()：

$("#box").hide(1000);                    // 淡出  
$("#box").animate({left: "250px"}, 500); // 自定义动画  

注意事项

• 确保在文档加载完成后执行代码：

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

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

- 避免过度使用链式调用，以免降低可读性。  
- 使用最新版本 jQuery（如 3.x+）以获得更好的性能和安全性。  

通过以上格式和示例，可快速上手 jQuery 的基本操作。如需更复杂功能，可参考官方文档或社区资源。