jquery格式

jQuery 基本格式

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 的基本使用格式：

$(document).ready(function() {
    // jQuery 代码写在这里
});

或者简写形式：

$(function() {
    // jQuery 代码写在这里
});

选择器使用格式

jQuery 使用 CSS 选择器来选取元素：

$("selector").action();

示例：

$("p").hide(); // 隐藏所有 <p> 元素
$("#test").show(); // 显示 id 为 test 的元素
$(".demo").css("color", "red"); // 修改 class 为 demo 的元素的文字颜色

事件处理格式

jQuery 提供简洁的事件处理方法：

$("selector").event(function() {
    // 事件处理代码
});

示例：

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

Ajax 请求格式

jQuery 简化了 Ajax 请求：

$.ajax({
    url: "demo_test.txt",
    success: function(result) {
        $("#div1").html(result);
    }
});

链式操作格式

jQuery 支持链式操作：

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

动画效果格式

jQuery 提供内置动画方法：

$("selector").animate({params}, speed, callback);

示例：

$("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
});

实用工具方法

jQuery 提供一些实用工具方法：

$.trim(" hello world "); // 去除字符串两端空格
$.isArray(obj); // 检查是否为数组
$.isFunction(obj); // 检查是否为函数

插件扩展格式

jQuery 支持插件扩展：

$.fn.pluginName = function(options) {
    // 插件代码
};

使用插件：

$("selector").pluginName();

注意事项

1. 确保在 jQuery 代码之前引入 jQuery 库
2. 使用 $(document).ready() 确保 DOM 完全加载后再执行脚本
3. 选择器性能：ID 选择器最快，尽量避免复杂选择器
4. 缓存 jQuery 对象以提高性能：

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