jQuery语法

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。

提示： jQuery使用CSS选择器来选取HTML元素，并提供了丰富的操作方法。

基础语法

jQuery的基础语法是：$(selector).action()

$ 符号定义jQuery
selector 用于"查询"和"查找"HTML元素
action() 执行对元素的操作

示例：隐藏当前元素

$(this).hide()  // 隐藏当前元素

示例：隐藏所有段落

$("p").hide()  // 隐藏所有<p>元素

示例：隐藏class为test的元素

$(".test").hide()  // 隐藏所有class="test"的元素

示例：隐藏id为test的元素

$("#test").hide()  // 隐藏id="test"的元素

文档就绪事件

为了防止文档在完全加载之前运行jQuery代码，所有jQuery函数都应该包含在文档就绪事件中：

语法格式

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

简洁写法（推荐）

$(function(){
    // jQuery方法写在这里...
});

注意： 如果没有文档就绪事件，代码可能会在文档完全加载之前执行，导致操作失败。

jQuery选择器

jQuery选择器允许您对HTML元素组或单个元素进行操作，基于元素的名称、ID、类、类型、属性等来"查找"HTML元素。

元素选择器

选择所有段落元素

$("p")  // 选择所有<p>元素

ID选择器

通过ID选择元素

$("#test")  // 选择id="test"的元素

类选择器

通过类名选择元素

$(".test")  // 选择所有class="test"的元素

jQuery事件

jQuery为网页添加了事件处理功能，常见的事件包括：

点击事件

$("p").click(function(){
    $(this).hide();  // 点击段落时隐藏它
});

鼠标悬停事件

$("#test").hover(function(){
    alert("鼠标悬停在元素上！");
});

表单提交事件

$("form").submit(function(){
    alert("表单已提交");
});

常用方法

隐藏和显示

隐藏/显示元素

$("#hide").click(function(){
    $("p").hide();  // 隐藏段落
});

$("#show").click(function(){
    $("p").show();  // 显示段落
});

淡入淡出

淡入淡出效果

$("#fadeIn").click(function(){
    $("div").fadeIn();  // 淡入
});

$("#fadeOut").click(function(){
    $("div").fadeOut();  // 淡出
});

HTML内容操作

获取和设置HTML内容

// 获取内容
var content = $("#test").html();

// 设置内容
$("#test").html("<b>新的HTML内容</b>");

链式操作

jQuery允许在同一元素上运行多条命令，这样可以节省代码并提高性能：

链式操作示例

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

上面的代码将id为p1的元素文字颜色设为红色，然后向上滑动隐藏，再向下滑动显示。

最佳实践： 使用链式操作可以使代码更加简洁易读，并减少重复选择相同元素的开销。

上一章: jQuery 简介与入门下一章: jQuery 选择器详解

jQuery教程