jquery中的属性和样式设置

2022-09-18 18:47:01

添加属性

$target.attr({"title":"one piece","name":"solgan"});

为目标元素添加title和name属性

添加之前：

<div class="second">
<p>我是路飞，要成为海贼王的男人。</p>
</div>

添加之后：

<div class="second">
<p title="one piece" name="solgan">我是路飞，要成为海贼王的男人。</p>
</div>

 	$target.removeAttr("title");

移除已经存在的样式，如果样式不存在，并不会报错

移除样式之前：

<div class="second">
<p title="one piece" name="solgan">我是路飞，要成为海贼王的男人。</p>
</div>

移除样式之后：

<div class="second">
<p name="solgan">我是路飞，要成为海贼王的男人。</p>
</div>

	 	$target.attr("class","red");

所谓的设置样式，实际上就是修改目标元素的class属性，注意此时是将class修改为red，而不是在原来的class基础上添加

设置样式之前：

<div class="second">
<p name="solgan">我是路飞，要成为海贼王的男人。</p>
</div>

设置样式之后：

<div class="second">
<p name="solgan" class="red">我是路飞，要成为海贼王的男人。</p>
</div>

	 	$target.addClass("bg");

添加样式，是在原来class的基础上进行添加而不是替换

添加样式之前：

<div class="second">
<p name="solgan" class="red">我是路飞，要成为海贼王的男人。</p>
</div>

添加样式之后：

<div class="second">
<p name="solgan" class="red bg">我是路飞，要成为海贼王的男人。</p>
</div>

$target.removeClass("bg");

若样式存在，则删除之，若不存在并不报错

删除样式之前：

<div class="second">
<p name="solgan" class="red bg">我是路飞，要成为海贼王的男人。</p>
</div>

删除样式之后：

<div class="second">
<p name="solgan" class="red">我是路飞，要成为海贼王的男人。</p>
</div>

$target.hasClass("bg");

若样式存在则返回true，否则返回false

$target.css("text-decoration","underline");

添加css样式之前：

<p name="solgan" class="red" >我是路飞，要成为海贼王的男人。</p>

添加css样式之后：

<p name="solgan" class="red" style="text-decoration: underline;">我是路飞，要成为海贼王的男人。</p>