hasClass(class) 返回值:Boolean
概述
检查当前的元素是否含有某个特定的类,如果有,则返回true。
这其实就是 is("." + class)。
参数
classString
用于匹配的类名
示例
描述:
给包含有某个类的元素进行一个动画。
HTML 代码:
<div class="protected"></div><div></div>
jQuery 代码:
$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
...
toggleClass(class, switch) 返回值:jQuery
概述
如果开关switch参数为true则加上对应的class,否则就删除。
参数
classString
要切换的CSS类名
switchBoolean
用于决定元素是否包含class的布尔值。
示例
描述:
每点击三下加上一次 'selected' 类
HTML 代码:
<strong>jQuery 代码:</strong>
jQuery 代码:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
...
toggleClass(class) 返回值:jQuery
概述
如果存在(不存在)就删除(添加)一个类。
参数
classString
CSS类名
示例
描述:
为匹配的元素切换 'selected' 类
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p>
jQuery 代码:
$("p").toggleClass("selected");
结果:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
...
removeClass([class]) 返回值:jQuery
概述
从所有匹配的元素中删除全部或者指定的类。
参数
class (可选)String
一个或多个要删除的CSS类名,请用空格分开
示例
描述:
从匹配的元素中删除 'selected' 类
HTML 代码:
<p class="selected first">Hello</p>
jQuery 代码:
$("p").removeClass("selected");
结果:
[ <p class="first">Hello</p> ]
描述:
删除匹配元素的所有类
HTML 代码:
<p class="selected first">Hello</p>
jQuery 代码:
$("p&...
addClass(class) 返回值:jQuery
概述
为每个匹配的元素添加指定的类名。
参数
classString
一个或多个要添加到元素中的CSS类名,请用空格分开
示例
描述:
为匹配的元素加上 'selected' 类
HTML 代码:
<p>Hello</p>
jQuery 代码:
$("p").addClass("selected");
结果:
[ <p class="selected">Hello</p> ]
描述:
为匹配的元素加上 selected highlight 类
HTML 代码:
<p>Hello</p>
jQuery 代码:
$("p").addClass("selected highlight");
结果:
[ <p cl...
.class 返回值:Array<Element(s)>
概述
根据给定的类匹配元素。
参数
classString
一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到。
示例
描述:
查找所有类是 "myClass" 的元素.
HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代码:
$(".myClass");
结果:
[ <div class="myC...
toggleClassName
toggleClassName(element, className) -> HTMLElement
切换 element 的 CSS className(在有和无该类名称间切换),并返回元素本身。
样例
<div id="mutsu" class="apple"></div>
$('mutsu').hasClassName('fruit');
// -> false
$('mutsu').toggleClassName('fruit');
// -> element
$('mutsu').hasClassName('fruit');
// -> true
...
removeClassName
removeClassName(element, className) -> HTMLElement
从 element 中移除参数 className 指定的 CSS 类,返回元素本身。
样例
<div id="mutsu" class="apple fruit food"></div>
$('mutsu').removeClassName('food');
// -> HTMLElement
$('mutsu').classNames();
// -> ['apple', 'fruit']
...
hasClassName
hasClassName(element, className) -> Boolean
判断 element 是否包含参数 className 指定的 CSS 类名称。
样例
<div id="mutsu" class="apple fruit food"></div>
$('mutsu').hasClassName('fruit');
// -> true
$('mutsu').hasClassName('vegetable');
// -> false
getElementsByClassName [不推荐]
getElementsByClassName(element, className) -> [HTMLElement...]
查询 element 下所有具有参数 className 指定的 CSS 类名称的后代节点,并返回一个数组, 数组中的元素已经过 扩展。
在 Prototype 1.6 中,不建议使用 document.getElementsByClassName,因为这个函数的原始实现是返回一个 NodeList,而不是一个 Array。在 v1.6 中,请使用 $$ 或 Element#select 代替。
返回的数组成员按照元素在页面中的顺序进行排列(例如:索引 0 表示 element 的后代节点中具有 CSS 类名称 className 的第一个元素)。
样例
<ul id="fruits"...
classNames [不推荐]
classNames(element) -> Enumerable
返回一个新的 ClassNames 的实例,该实例是一个 Enumerable 对象,用于读写元素的 CSS 类名称。
Element#classNames 已被抛弃。请使用 Element#addClassName、 Element#removeClassName 和 Element#hasClassName 代替。
如果你需要访问 CSS 类名称,并返回一个数组,试试用 $w(element.className)。
事实上,这意味着你可以通过一个 Enumerable 访问元素的 CSS 类名称列表,而不像原生的 className 属性仅只是一个字符串。
在这个方法结束前,返回的 Enumerable 对象已经被扩展了一系列用于处理 CSS 类名的方法:set(className)、 ad...
(element, className) -> HTMLElement
增加一个 CSS 类到 element 中。
样例
<div id="mutsu" class="apple fruit"></div>
$('mutsu').addClassName('food')
$('mutsu').className
// -> 'apple fruit food'
$('mutsu').classNames()
// -> ['apple', 'fruit', 'food']
toggleClassName(element, className) -> HTMLElement
切换 element 的 CSS className(在有和无该类名称间切换),并返回元素本身。
样例
<div id="mutsu" class="apple"></div>
$('mutsu').hasClassName('fruit');
// -> false
$('mutsu').toggleClassName('fruit');
// -> element
$('mutsu').hasClassName('fruit');
// -> true
...
removeClassName(element, className) -> HTMLElement
从 element 中移除参数 className 指定的 CSS 类,返回元素本身。
样例
<div id="mutsu" class="apple fruit food"></div>
$('mutsu').removeClassName('food');
// -> HTMLElement
$('mutsu').classNames();
// -> ['apple', 'fruit']
...
hasClassName(element, className) -> Boolean
判断 element 是否包含参数 className 指定的 CSS 类名称。
样例
<div id="mutsu" class="apple fruit food"></div>
$('mutsu').hasClassName('fruit');
// -> true
$('mutsu').hasClassName('vegetable');
// -> false
getElementsByClassName(element, className) -> [HTMLElement...]
查询 element 下所有具有参数 className 指定的 CSS 类名称的后代节点,并返回一个数组, 数组中的元素已经过 扩展。
在 Prototype 1.6 中,不建议使用 document.getElementsByClassName,因为这个函数的原始实现是返回一个 NodeList,而不是一个 Array。在 v1.6 中,请使用 $$ 或 Element#select 代替。
返回的数组成员按照元素在页面中的顺序进行排列(例如:索引 0 表示 element 的后代节点中具有 CSS 类名称 className 的第一个元素)。
样例
<ul id="fruits">
<li id="apples">apples
<ul&g...