jQuery更改样式、增删类名、增删元素_jquery怎么添加css类名-CSDN博客

本文详细介绍了jQuery中css()方法的使用，包括设置单个和多个样式，类名操作如addClass(), removeClass(), hasClass(), toggleClass()，以及元素内容修改、元素添加与移除的技巧。掌握这些技巧，提升前端开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery中的css()方法

读取单个css样式/设置单个css样式

$(selector).css("styleName")
$(selector).css("styleName","value")

设置多个css样式

//链式
$(selector).css("styleName","value").css("styleName2","value2")
$(selector).css({"style1":"value1","style2","value2"})

或

//参数是一个对象，对象中包含了需要设置的样式名和样式值
css(obj);
//使用案例
$("#selector").css({
    "background":"gray",
    "width":"400px",
    "height":"200px"
});

addClass() 添加类名方法

addClass()是给被选中的元素添加类名，如添加多个类名，使用空格分开，仅添加

$(selector).addClass("className");
$(selector).addClass("className1 className2");

removeClass() 移除类名方法

removeClass()是移除被选中的元素的某一个类名，如果不传值则移除所有的class类名

$(selector).removeClass("className");

hasClass()

判断选中元素有没有包含这个类

$("selector").hasClass("className");

toggleClass()

判断该元素中是否含有该类名，如果有则删除，如果没有则添加

$("selector").toggleClass("className");

html()

读/写标签内容，并且解析html标签

$("selector").html("<span>修改内容</span>")

val()

读/写表单一类的value值

$("input").val()

text()

读/写标签内容，不可解析html标签

$("selector").text("<span>修改内容</span>")

切换样式类

//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
toggleClass(name);
//例子
$("div").toggleClass("one");
//切换多个class,以空格分开。
$("div").toggleClass("one two");

判断是否有某个类名

//name:用于判断的样式类名，返回值为true false

hasClass(name)
//例子，判断第一个div是否有one的样式类
$("div").hasClass("one");

向后追加子元素

append()

给某个元素添加子元素

$("ul").append("<li>苹果</li>")

appendTo()

将某个元素添加到目标元素中

$("<li>香蕉</li>").appendTo("ul")

都是在元素后追加元素，只不过两个用法不同

向前追加子元素

prepend()

给某个元素添加子元素

$("ul").prepend("<li>苹果</li>")

prependTo()

将某个元素添加到目标元素中

$("<li>香蕉</li>").prependTo("ul")

都是在元素前追加元素，只不过两个用法不同

添加兄弟元素

before()

前添加兄弟元素

$("ul").before("<h2>标题</h2>")

after()

后添加兄弟元素

$("ul").before("<span>标题</span>")

remove(selector)

移除指定元素或所有子元素及本身


$("ul").remove()    //移除整个ul
$("ul li").remove(":eq(2)") //移除某个li

empty()

移除选中元素的所有子节点和内容，本身不移除

$("ul").empty() //移除所有子节点和内容

$("ul").empty() //移除所有子节点和内容