addClass, removeClass, toggleClass(从jquery中抠出来)

<div id="d3" class="cur"></div>
 1 var mylibs = (function(){
 2     var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
 3         core_trim = String.prototype.trim,
 4         core_rspace = /\s+/,
 5         rclass = /[\t\r\n]/g;
 6
 7     var trim = function(text){
 8         if(core_trim && !core_trim.call("\uFEFF\xA0")){
 9             return text == null ?
10                 "" :
11                 core_trim.call(text);
12         }else{
13             return text == null ?
14                 "" :
15                 (text + "").replace(rtrim, "");
16         }
17     };
18
19     return {
20         addClass:function(elem,value){
21             var classNames,setClass;
22
23             if (!value || typeof value !== "string") return;
24             if (elem.nodeType !== 1) return;
25
26             classNames = value.split(core_rspace);
27
28             if (!elem.className && classNames.length === 1){
29                 elem.className = value;
30             }else{
31                 setClass = " " + elem.className + " ";
32
33                 for (var i = 0; i < classNames.length; i++){
34                     if (setClass.indexOf(" " + classNames[ i ] + " ") < 0)
35                         setClass += classNames[ i ] + " ";
36                 }
37                 elem.className = trim(setClass);
38             }
39         },
40         removeClass:function(elem,value){
41
42             var removes,className;
43
44             if ((!value || typeof value !== "string") && value !== undefined) return;
45             if (elem.nodeType !== 1 || !elem.className) return;
46
47             removes = (value || "").split(core_rspace);
48             className = (" " + elem.className + " ").replace(rclass," ");
49
50             // loop over each item in the removal list
51             for (var i=0;i<removes.length;i++){
52                 // Remove until there is nothing to remove,
53                 while (className.indexOf(" " + removes[i] + " ") >= 0)
54                     className = className.replace(" " + removes[i] + " "," ");
55             }
56             elem.className = value ? trim(className) : "";
57         },
58         toggleClass:function(elem,value,stateVal){
59             var type = typeof value,
60                 isBool = typeof stateVal === "boolean";
61
62             if (type !== "string") return;
63
64             // toggle individual class names
65             var className,
66                 i = 0,
67                 state = stateVal,
68                 classNames = value.split(core_rspace);
69
70             while ((className = classNames[ i++ ])){
71                 // check each className given, space separated list
72                 state = isBool ? state : !this.hasClass(elem,className);
73                 (state ? this[‘addClass‘] : this[‘removeClass‘])(elem,className);
74             }
75         },
76         hasClass:function(elem,selector){
77             var className = " " + selector + " ";
78             if (elem.nodeType === 1 && (" " + elem.className + " ").replace(rclass," ").indexOf(className) >= 0)
79                 return true;
80             return false;
81         }
82     };
83 })();
84
85 var dom = document.getElementById(‘d3‘);
86 mylibs.addClass(dom,‘red‘);
87 mylibs.removeClass(dom,‘cur‘);
88 mylibs.toggleClass(dom,‘red cur‘);
时间: 2024-10-28 23:03:36

addClass, removeClass, toggleClass(从jquery中抠出来)的相关文章

addClass方法(从jquery中抠出来)

<div id="d3" class="ghy"></div> 1 var addClass = function(elem,value){ 2 var core_rspace = /\s+/, 3 classNames = value.split(core_rspace), 4 setClass; 5 6 if (!value || typeof value !== "string") return; 7 if (ele

jQuery addClass removeClass toggleClass方法概述

通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性获取的不是class名称的数组,而是一个含有空格的字符串,这就使得多class操作变得很麻烦.同样的jQuery开发者也考虑到这种情况,增加了一个.addClass()方法,用于动态增加class类名 .addClass( className )方法 .addClass( className ) :

class 添加样式,删除,开关 【选择】addClass,removeClass,toggleClass

<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="script/jquery-1.11.0.min.js" type="text/javascript"></script> <style type="text/css"&g

.addClass(),.removeClass(),.toggleClass()的区别

.addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector").addClass("className1 className2"); .removeClass("className")方法是用来给指定的元素移除类名,也就是说给指定元素移除样式: 可以同时移除多个类名,空格符隔开 $("selector")

原生JS实现addClass,removeClass,toggleClass

<style type="text/css"> div.testClass{ background-color:gray; } </style> <script type="text/javascript"> function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function ad

jQuery学习笔记 .addClass()/.removeClass()简单学习

使用jQuery或javaScript来动态改变页面中某个或部分元素的样式,为了实现这样的功能,我们往往都是使用jQuery或javaScript来控制HTML中DOM的类名(class)从而实现增加或删除某一样式 在jQuery中提供了三种方法来实现这样的效果:.addClass()方法,.removeClass()方法 .addClass()方法 主要用于在jQuery中来添加一个或多个类名来渲染页面 添加多个类名时,他们之间需要用空格隔开 我们还可以使用函数的方法来给指定的元素添加类名:

jQuery的addClass,removeClass和toggleClass方法

jQuery的addClass,removeClass和toggleClass方法,最后一个方法在某一情形之下,可以替代前面2个方法. 第一个方法addClass为元素添加一个class. 第二个方法removeClass,移除一个class. 第三个方法toggleClass是互斥class. <input id="Text1" type="text" /> 创建样式,当文本框focus时,文本框边框高亮和变宽,当blur时,恢复原来样式. .text

原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>addclass,removeclass,hasclass,toggleclass,getbyclass</title> </head> <body> <div class="div1" id="b

锋利的jQuery读书笔记---jQuery中操作DOM

一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创建文本节点 创建属性节点 插入节点 插入节点的方法 方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码:$("p").append("<b>你好</b>"