jQuery常用方法

115 阅读1分钟

jQuery常用方法

本文将详细整理jQuery库中常用的方法,内容涵盖动画效果、内容修改和事件处理。

动画效果

hide()show()

隐藏或显示元素。
// 隐藏
$("#myElement").hide();

// 显示
$("#myElement").show();

fadeOut()fadeIn()

淡出或淡入元素。

// 淡出
$("#myElement").fadeOut();

// 淡入
$("#myElement").fadeIn();

slideUp() slideDown()

向上滑动或向下滑动元素。

// 向上滑动
$("#myElement").slideUp();

// 向下滑动
$("#myElement").slideDown();

animate()

使用自定义动画效果修改元素的属性。

$("#myElement").animate({
    opacity: 0.5,
    width: "50%"
}, 1000);

内容修改

text()

设置或获取元素的文本内容。

// 设置文本内容
$("#myElement").text("Hello, world!");

// 获取文本内容
var text = $("#myElement").text();

html()

设置或获取元素的HTML内容。

// 设置HTML内容
$("#myElement").html("<strong>Hello, world!</strong>");

// 获取HTML内容
var html = $("#myElement").html();

append()prepend()

在元素内部的末尾或开头插入内容。

// 在末尾插入内容
$("#myElement").append("<p>Appended text</p>");

// 在开头插入内容
$("#myElement").prepend("<p>Prepended text</p>");

attr()

设置或获取元素的属性。

// 设置属性
$("#myElement").attr("name", "myName");

// 获取属性
var name = $("#myElement").attr("name");

事件处理

click()

触发元素的点击事件。

$("#myElement").click(function() {
    alert("Clicked!");
});

on()

绑定指定事件的处理函数。

$("#myElement").on("click", function() {
    alert("Clicked!");
});

off()

解绑指定事件的处理函数。

$("#myElement").off("click");

键盘事件

keydown()

在按下键盘按键时触发事件。

$(document).keydown(function(event) {

    console.log(event.key);
    
});

通过keydown()方法可以在按下键盘按键时触发事件,上述示例中,通过keydown()方法监听整个文档,当按下键盘按键时,会将按下的按键名称输出到控制台。

keyup()

在释放键盘按键时触发事件。

$(document).keyup(function(event) {

    console.log(event.key);
    
});

通过keyup()方法可以在释放键盘按键时触发事件,上述示例中,通过keyup()方法监听整个文档,当释放键盘按键时,会将释放的按键名称输出到控制台。

以上是一些常用的jQuery方法,提供了动画效果、内容修改和事件处理等常见操作的便捷方式