jquery 学习笔记2 HTML

最新推荐文章于 2025-09-07 22:53:08 发布

原创最新推荐文章于 2025-09-07 22:53:08 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了 jQuery 中用于操作 DOM 的核心方法，如 text(), html(), val() 和 attr() 等，以及添加、删除元素的方法如 append(), prepend(), remove() 等。此外还讲解了如何使用 jQuery 设置和获取 CSS 类及样式。

jQuery HTML

text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

attr()

获取元素属性的值
设置元素属性的值
还可以用一个函数来进行更改
$(“button”).click(function(){$ (“#w3s”).attr(“href”, function(i,origValue){
return origValue + “/jquery”;
});
});

添加新元素/内容。

append() - 在被选元素的结尾插入内容。这个是在元素的里面添加
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容。这个是在元素的外面添加
before() - 在被选元素之前插入内容

删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

$("p").remove(".italic");

获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类 class = 什么
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

设置
$(".btn1").click(function(){
  $("p").css("color","red");
});

取回
$(selector).css(name)

设置css
css({"propertyname":"value","propertyname":"value",...});

尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

设置的话直接把数值传进去就好