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);
});