jQuery 提供了一系列的 HTML 和 CSS 操作方法,用于操作文档结构、内容以及样式。以下是一些常用的 jQuery HTML 和 CSS 方法:

HTML 操作方法:

1. text(): 获取或设置元素的文本内容。
   var content = $("#myElement").text(); // 获取元素文本内容
   $("#myElement").text("New Text Content"); // 设置元素文本内容

2. html(): 获取或设置元素的 HTML 内容。
   var content = $("#myElement").html(); // 获取元素 HTML 内容
   $("#myElement").html("<p>New HTML Content</p>"); // 设置元素 HTML 内容

3. val(): 获取或设置表单元素的值。
   var value = $("#myInput").val(); // 获取输入框的值
   $("#myInput").val("New Value"); // 设置输入框的值

4. append() / prepend(): 在元素内部末尾或开头添加内容。
   $("#myElement").append("<p>Appended Text</p>"); // 在末尾添加内容
   $("#myElement").prepend("<p>Prepended Text</p>"); // 在开头添加内容

5. after() / before(): 在元素之后或之前插入内容。
   $("#myElement").after("<div>After Element</div>"); // 在元素之后插入内容
   $("#myElement").before("<div>Before Element</div>"); // 在元素之前插入内容

CSS 操作方法:

1. css(): 获取或设置元素的 CSS 属性。
   var color = $("#myElement").css("color"); // 获取元素的颜色属性
   $("#myElement").css({
       "color": "blue",
       "font-size": "16px"
   }); // 设置元素的颜色和字体大小

2. addClass() / removeClass() / toggleClass(): 添加、移除或切换元素的类。
   $("#myElement").addClass("highlight"); // 添加类
   $("#myElement").removeClass("highlight"); // 移除类
   $("#myElement").toggleClass("highlight"); // 切换类

3. height() / width(): 获取或设置元素的高度或宽度。
   var height = $("#myElement").height(); // 获取元素的高度
   $("#myElement").height(200); // 设置元素的高度

4. offset(): 获取或设置元素相对于文档的偏移位置。
   var offset = $("#myElement").offset(); // 获取元素的偏移位置
   $("#myElement").offset({ top: 100, left: 50 }); // 设置元素的偏移位置

这些是一些基本的 jQuery HTML 和 CSS 方法,它们使得在页面上进行文档结构和样式的操作变得非常便捷。详细信息可以在[官方文档的 Manipulation 部分](https://api.jquery.com/category/manipulation/)和[CSS 部分](https://api.jquery.com/category/css/)找到。


转载请注明出处:http://www.zyzy.cn/article/detail/4641/jQuery