介绍:
1、hasClass:判断DOM元素是否存在类。
2、addClass:为的DOM元素添加类。
3、removeClass:删除DOM元素的类。
4、toggleClass:如果DOM元素存在(不存在)类,就删除(添加)类。
原生 JavaScript 实现的代码:
// 实现方法2:传入一个数组
function hasClass(obj, className) {
// obj是数组或伪数组
for(var i = 0,len = obj.length;i<len;i++){
if((' '+obj[i].className+' ').indexOf(' '+className+' ')>-1){
return true;
}
}
return false;
}
// ----------------
// ----------------
// ----------------
// 实现方法1:传入单个对象
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) {
obj.className += " " + cls;
}
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
}
function toggleClass(obj,cls){
if(hasClass(obj,cls)){
removeClass(obj, cls);
} else {
addClass(obj, cls);
}
}
分享到:
相关推荐
在现代Web开发中,虽然广泛使用了jQuery等库来简化操作,但在不依赖这些库的环境中,我们需要使用原生JavaScript来实现相同的功能。 首先,我们需要了解几个关键的方法: 1. addClass:此方法用于给指定的DOM元素...
然而,在现代浏览器环境中,许多jQuery的方法已经被原生JavaScript实现所替代,这使得我们可以更高效地编写代码,同时减少依赖。以下是一些常见的jQuery方法,以及如何使用原生JavaScript进行封装。 ### 1. `...
CSSClass 是一个 JavaScript 微框架,它将函数 .hasClass、.addClass、.removeClass 和 .toggleClass 添加到 Element 原型中。 使用很简单。 包含脚本文件并仅使用函数(它们可以链接)。 您还可以通过在它们之间...
使用原生JavaScript而非jQuery来实现这些功能,不仅可以减少项目对第三方库的依赖,还可以让我们更深入地了解DOM操作的内部机制。 首先,我们来理解一下文章标题中提到的几个关键词汇: - 原生JavaScript:指的是...
在本文中,我们将深入探讨如何使用jQuery来实现一个基本的电子书翻页效果,这通常被称为电纸书翻书效果。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得创建交互式的网页变得更加容易...
在本文中,我们将深入探讨jQuery中的样式操作,特别是与标题和描述相关的功能:hasClass()、removeClass()、addClass()、toggleClass()以及DOM元素尺寸和位置的处理。 1. hasClass(): hasClass() 方法用于检测一...
考虑到性能,domster使用内置选择器以2kb的速度提供类似jQuery的体验。 它放弃了较新的方法,而取而代之的是较旧的和优化效果更好的方法,它比其他方法查询DOM的速度要快得多。 适用于IE9 + 通过npm i domster或...
jQuery的`toggleClass()`方法可以实现这个功能。例如: ```javascript $('#myelement').toggleClass('active'); ``` 如果`myelement`元素当前有`active`类,该方法会移除它;如果没有,则添加它。 ### 动态CSS...
此外,JQuery还提供了`removeAttr()`方法来移除元素的属性,以及`hasClass()`, `addClass()`, `removeClass()`, 和 `toggleClass()`等方法来处理类(class)属性,极大地提高了处理元素样式的灵活性。 总结来说,...
3. **hasClass(), addClass(), removeClass() 和 toggleClass() 方法** 这些方法主要用于操作CSS类。`hasClass()`检查元素是否包含指定的类,`addClass()`添加类,`removeClass()`移除类,而`toggleClass()`则根据...
jQuery提供了便捷的CSS操作接口,如`.css()`, `.addClass()`, `.removeClass()`, `.toggleClass()`,使得改变样式、切换类名变得简单。 四、事件处理 jQuery的事件处理机制简化了JavaScript原生事件的绑定和解绑。...
在IT行业中,jQuery是一款非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。本教程将详细讲解如何利用jQuery创建一个侧边悬浮折叠影藏弹窗特效,以提升用户体验并增加网站互动性...
我决定尝试从零开始实现jQuery,作为学习普通JS的一种方法。 但是,通过此练习,我知道了它对您有多大的作用,使我对jQuery有了更大的赞赏! dollabill DOM操作(dom_manip.js) addClass removeClass ...
在JavaScript的世界里,jQuery是一个非常流行且强大的库,它简化了许多DOM操作,事件处理,以及动画效果。在本文中,我们将深入探讨一些必备的jQuery技巧。 1. **检查jQuery是否加载**:在使用jQuery功能之前,确保...
`.attr()`用于获取或设置元素的属性,`.removeAttr()`用于移除属性,`.hasClass()`检查元素是否包含指定类,`.addClass()`、`.removeClass()`和`.toggleClass()`分别用于添加、移除和切换类。 四、事件处理 jQuery...
addEvent removeEvent triggerEvent 选择selectById selectByClass selectByTag selectByQuery selectParentById selectParentByClass selectParentByTag 第一的addClass removeClass hasClass toggleClass ...
它简化了原本需要使用 `hasClass()`, `addClass()`, 和 `removeClass()` 来实现的功能。 ```javascript // 示例:根据 blueButton 类的存在与否切换该类 var a = $("#someElement"); a.toggleClass('blueButton'); ...
1. 添加/删除类:$.addClass("class")和$.removeClass("class"),用于增加或删除元素的类样式。 2. 隐藏/显示元素:$.hide()和$.show(),隐藏或显示元素。可传入时间参数实现过渡效果,例如:$.hide(1000)表示1秒后...