close

使用 jQuery 操作 DOM- 技术和示例

使用 jQuery 进行 DOM 操作允许您通过针对 DOM 结构来修改、添加、删除或与网页上的数据交互。 jQuery 提供了方便的方法和函数来执行 DOM 操作任务。

以下是每个部分的解释以及具体示例：

 

选择元素

  • $("p") ：选择 <p> 页面上的所有元素。
  • $(".myClass") ：选择具有该类的所有元素 myClass。
  • $("#myElement") ：选择ID为的元素 myElement。
  • $("parentElement").find(".childElement") childElement ：选择中 具有该类的所有子元素 parentElement。

例子： 

$("p").css("color", "red");

 

改变内容

  • $("#myElement").html("<b>Hello World</b>") ：设置 ID 元素的 HTML 内容 myElement。
  • $("p").text("New text") ：设置所有元素的文本内容 <p>。

例子： 

$("p").text("New paragraph");

 

添加和删​​除元素

  • $("ul").append("<li>New item</li>") <li> ：在无序列表末尾 添加一个元素（ <ul> ）。
  • $(".myClass").remove() myClass ：从页面中 删除所有具有该类的元素。

例子： 

$("ul").append("<li>Item 4</li>");

 

更改属性和类

  • $("img").attr("src", "new-image.jpg") ：更改 src 所有 <img> 元素的属性值。
  • $("#myElement").addClass("newClass") ：将类添加 newClass 到具有 ID 的元素 myElement。
  • $("#myElement").removeClass("oldClass") oldClass ：从具有 ID 的元素中 删除类 myElement。

例子： 

$("img").attr("alt", "New Image");

 

事件处理

$("button").click(function() { }) ：单击元素时注册事件处理函数 <button>。

例子： 

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

 

效果和动画

  • $("#myElement").hide() ：隐藏ID为的元素 myElement。
  • $("#myElement").show() ：显示带有 ID 的元素 myElement。
  • $("#myElement").fadeOut() ：对 ID 的元素执行淡出效果 myElement。
  • $("#myElement").fadeIn() ：对 ID 的元素执行淡入效果 myElement。

例子： 

$("#myElement").fadeOut(1000, function() {  
  console.log("Fade out complete");  
});