在这里，我们将会列出一些在日常开发中常用的jQuery API。
- 选择元素
jQuery使用$符号来选择HTML元素。$是jQuery的别名，因此使用$符号可以快速选择元素。
$("p") // 选择所有的p元素
$("#id") // 选择ID为id的元素
$(".class") // 选择所有class为class的元素
$("div.class") // 选择所有class为class的div元素
$("input[name='name']") // 选择name属性为name的input元素
- 事件绑定
jQuery提供了许多事件处理方法，如click(), mouseover(), mouseout(), keydown(), keyup(), keypress()等。
$("p").click(function(){
alert("段落被点击了！");
});
- 样式操作
jQuery可以轻松地在元素上添加，删除，切换或检查CSS类。
$("p").addClass("myClass"); // 为p元素添加myClass类
$("p").removeClass("myClass"); // 为p元素删除myClass类
$("p").toggleClass("myClass"); // 为p元素切换myClass类
$("p").hasClass("myClass"); // 检查p元素是否有myClass类
- HTML代码/文本/值的操作
$("p").html(); // 获取p元素的HTML内容
$("p").html("New Content"); // 设置p元素的HTML内容
$("p").text(); // 获取p元素的文本内容
$("p").text("New Content"); // 设置p元素的文本内容
$("input").val(); // 获取input元素的值
$("input").val("New Value"); // 设置input元素的值
- 元素的增删改
$("p").append("<b>Hello</b>"); // 在p元素的末尾添加内容
$("p").prepend("<b>Hello</b>"); // 在p元素的开头添加内容
$("p").after("<b>Hello</b>"); // 在p元素之后添加内容
$("p").before("<b>Hello</b>"); // 在p元素之前添加内容
$("p").remove(); // 移除p元素
$("p").empty(); // 清空p元素的内容
- 属性操作
$("p").attr("title"); // 获取p元素的title属性
$("p").attr("title", "New Title"); // 设置p元素的title属性
$("p").removeAttr("title"); // 移除p元素的title属性
- CSS操作
$("p").css("color"); // 获取p元素的color样式
$("p").css("color", "red"); // 设置p元素的color样式
$("p").css({ "color": "red", "font-size": "16px" }); // 同时设置多个样式
- 循环遍历
$("p").each(function(){
$(this).text("Hello");
});
- AJAX请求
$.ajax({
url: "test.html",
method: "GET",
success: function(data){
$("body").append("<div>" + data + "</div>");
}
});
- 动画效果
$("p").hide(); // 隐藏p元素
$("p").show(); // 显示p元素
$("p").fadeIn(); // 淡入p元素
$("p").fadeOut(); // 淡出p元素
$("p").slideDown(); // 下滑显示p元素
$("p").slide