jQuery DOM 操做(1) --->>> Class Attribute , 类属性操做

时间 2019-11-06

标签 jquery dom class attribute 类属栏目 JQuery 繁體版

原文原文链接

Class Attributehtml

我又回来了，最近由于在搞一个很是NB的东西。因此没有时间整理技术类的相关文档了。明天端午无意工做，因此抽空来写一些技术文档了。文档也没有什么特别的东西。可是做为技术来讲，写出来老是好的有的时候能给须要的人一些启发就够了。jquery

之前发过关于 jQuery 对于 event 的封装，可是那个时候之只是偶尔用到了一会儿 jQuery 当中对于 js 原生 DOM 的一些 manipulation 。如今准备系统的介绍一下，全部的资料都是能够在官方网站得到。app

Class attribute 的这些方法是用来让人更方便的来控制 CSS 相关 CLASSES 来控制元素的样式的。字体

Class attribute 里面总共有 4 个 method 。网站

.addClass()this

给全部指定选择器的元素增长指定名称的class(es)spa

.hasClass()code

判断指定元素是否至少有一个元素有给定名称的 class 的htm

.removeClass()ip

给全部指定选择器的元素移除指定名称的class(es)

.toggleClass()

给全部指定选择器的元素增长或者移除(也就是开关的意思)指定名称的 class(es)

.addClass(className)

说明：

给全部指定选择器的元素增长指定名称的class(es),即在指定元素的 class 属性中添加指定名称的 class(es)

使用代码：

// 增长一个 class

$(“p”).addClass(“myClass”);

// 增长多个 classes 中间使用空格隔开 space-separated

$(“p”).addClass(“myClass yourClass”);

实例代码：

<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$("p:last").addClass("selected highlight");
</script>

</body>
</html>

代码说明：

使用 addClass 给指定元素增长: 字体颜色为红色，背景色为黄色的 classes …

.hasClass()

说明：

判断指定元素是否至少有一个元素有给定名称的 class 。假若有的话则返回 true 假如没有的话则返回 false 。

使用代码：

Element 以下：

JS 代码以下：

// return false

$('#mydiv').hasClass('bar')

// return true

$('#mydiv').hasClass('quux')

实例代码：

<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<p>This paragraph is black and is the first paragraph.</p>
<p class="selected">This paragraph is red and is the second paragraph.</p>

<div id="result1">First paragraph has selected class: </div>
<div id="result2">Second paragraph has selected class: </div>
<div id="result3">At least one paragraph has selected class: </div>
<script>
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());
</script>

</body>
</html>

代码说明：

代码中给出了两段段落 P ，第一段没有使用 selected 样式，第二段使用了 selected 样式让 p 段落的颜色变成了红色。

而后有三段 div 用来判断 p 段落是否使用了 selected 样式。用 script 算出结果 append 到对应的 result div 后面。

Result1 = ‘false’

Result2 = ‘true’

Result3 = ‘true’

.hasClass()常常用来作判断使用。

.removeClass()

说明：

给全部指定选择器的元素移除指定名称的class(es),即在指定元素的 class 属性中移除指定名称的 class(es)，假如没有参数中指定的 class 的话，就什么也不发生。

使用代码：

// 移除一个 class

$(“p”).removeClass (“myClass”);

// 移除多个 classes 中间使用空格隔开 space-separated

$(“p”). removeClass (“myClass yourClass”);

实例代码：

<!DOCTYPE html>
<html>
<head>
<style>

p { margin: 4px; font-size:16px; font-weight:bolder; }
.blue { color:blue; }
.under { text-decoration:underline; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>

<p class="blue under">Goodbye</p>
<script>$("p:even").removeClass("blue");</script>

</body>
</html>

代码说明：

$("p:even").removeClass("blue");

:even 隔行选择器，从第一个元素开始选择起，一般用于进行隔行着色的时候。上述代码就是把 p 段落隔行去除 blue class 。

.toggleClass( className )

说明：

给全部指定选择器的元素增长或者移除(也就是开关的意思)指定名称的 class(es)

使用代码：

Element 以下：

第一次咱们使用以下 js 代码时会有以下结果

JS 代码以下：

$('div.tumble').toggleClass('bounce')

元素改变以下:

第二次咱们使用一样的 js 代码会有以下结果

JS 代码以下：

$('div.tumble').toggleClass('bounce')

元素改变以下:

实例代码：

<!DOCTYPE html>
<html>
<head>
<style>

p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>

</body>
</html>

代码说明：

点击 highlight 或者 paragraphs 进行高亮切换显示。假如只是须要作成高亮切换的话只须要使用 toggleClass 便可。

稍后会给出相对应的应用。