js之juqer使用

jQuery 事件处理

jQuery 提供了多种事件方法来处理 HTML 事件。例如：

点击事件

$("button").click(function(){ alert("Button clicked!"); });

鼠标悬停事件

$("p").hover(function(){ $(this).css("color", "red"); }, function(){ $(this).css("color", "black"); });

表单事件

$("input").focus(function(){ $(this).css("background-color", "#cccccc"); }); $("input").blur(function(){ $(this).css("background-color", "#ffffff"); });

jQuery DOM 操作

jQuery 提供了丰富的 DOM 操作方法，例如：

获取和设置内容

$("#myId").text("New text"); // 设置文本内容 $("#myId").html("<b>New HTML</b>"); // 设置 HTML 内容

添加和删除元素

$("body").append("<p>Appended paragraph</p>"); // 添加元素到末尾 $("body").prepend("<p>Prepended paragraph</p>"); // 添加元素到开头 $("#myId").remove(); // 删除元素

修改 CSS

$("#myId").css("color", "blue"); // 修改元素的 CSS 样式

jQuery 动画效果

jQuery 提供了多种动画效果方法，例如：

显示和隐藏

$("#myId").hide(); // 隐藏元素 $("#myId").show(); // 显示元素

淡入和淡出

$("#myId").fadeOut(); // 淡出元素 $("#myId").fadeIn(); // 淡入元素

滑动

$("#myId").slideUp(); // 向上滑动隐藏元素 $("#myId").slideDown(); // 向下滑动显示元素

jQuery Ajax

jQuery 提供了强大的 Ajax 方法来与服务器进行异步通信：

加载内容

$("#myDiv").load("test.html");

GET 请求

$.get("test.php", function(data){ $("#myDiv").html(data); });

POST 请求

$.post("test.php", { name: "John", age: 30 }, function(data){ $("#myDiv").html(data); });