标签：lis 使用 ref 新特性 包含 query 连接 cal 功能
在html5新增的classList之前， 操作元素的class用的是className这个属性，而如果要向jquery封装的hasClass, removeClass, addClass, toggleClass一样优雅的操作calssName, 在以前我们要对className封装处理，如下， 下面的代码你未必能看得懂运行流程，但应该能看懂功能部分，这几段函数是取自我录制的一套视频中，讲解DOM框架封装的一部分
1 gQuery.prototype.hasClass = function (obj, cName) { 2 // <div class="abc"> <div class="hello abc def"></div> <div class="hello def abc"></div> 3 return obj.className.match(new RegExp(‘(\\s|^)‘ + cName + ‘(\\s|$)‘)); 4 } 5 6 gQuery.prototype.addClass = function (cName) { 7 for (var i = 0; i < this.elements.length; i++) { 8 if (!this.hasClass(this.elements[i], cName)) { 9 // hello abc // abc 10 this.elements[i].className += " " + cName; 11 this.elements[i].className = this.trim(this.elements[i].className); 12 } 13 } 14 return this; 15 } 16 17 gQuery.prototype.removeClass = function (cName) { 18 for (var i = 0; i < this.elements.length; i++) { 19 if (this.hasClass(this.elements[i], cName)) { 20 var re = new RegExp(‘(\\s|^)‘ + cName + ‘(\\s|$)‘); 21 this.elements[i].className = this.elements[i].className.replace(re, " "); 22 this.elements[i].className = this.trim(this.elements[i].className); 23 } 24 } 25 return this; 26 } 27 28 gQuery.prototype.toggleClass = function (cName) { 29 for (var i = 0; i < this.elements.length; i++) { 30 if (this.hasClass(this.elements[i], cName)) { 31 this.removeClass(cName); 32 } else { 33 this.addClass(cName); 34 } 35 } 36 return this; 37 }
这里，我还写了一个独立的删除某个class的功能:
1 <div class="box1 box2 box3">this is a test string</div> 2 <input type="button" value="移除某个class"> 3 <script> 4 var oDiv = document.querySelector("div"), 5 classNames = ‘‘, 6 oBtn = document.querySelector("input"); 7 oBtn.onclick = function(){ 8 classNames = oDiv.className.split(/\s+/); 9 var pos = -1, i, len; 10 for( i = 0, len = classNames.length; i < len; i++ ) { 11 if( classNames[i] == ‘box2‘ ) { 12 pos = i; 13 break; 14 } 15 } 16 classNames.splice( i, 1 ); 17 oDiv.className = classNames.join( " " ); 18 } 19 20 </script>
思路非常的简单，获取div元素中的所有class, 用split 按空格切割，就会得到[box1,box2,box3]这样的数组， 然后遍历判断，是否有box2这个class？
找到之后就把当前数组的索引记下来，最后再用splice把该class从数组删除得到[box1,box3] 然后把数组的每一项用join函数中的空格连接，再赋值
给元素的className.
而在html5中，每个元素都有classList这个属性， classList是一个类数组结构, 提供了4个操作class的方法: add,remove,toggle,contains,
看到这几个英文单词，你已经知道什么意思了吧，尤其对于使用过jquery的朋友
add( 添加class), remove( 删除class), toggle( 切换class) contains( 判断是否包含某个class )
1 <div id="box" class="box1 box2 box3">this is a test string</div> 2 <input type="button" value="添加class" id="btn-add"> 3 <input type="button" value="移除class" id="btn-remove"> 4 <input type="button" value="切换class" id="btn-toggle"> 5 <script> 6 var G = function (id) { return document.querySelector(id); } 7 var oBtnAdd = G(‘#btn-add‘), 8 oBtnRemove = G(‘#btn-remove‘), 9 oBtnToggle = G(‘#btn-toggle‘), 10 oBox = G(‘#box‘); 11 oBtnAdd.onclick = function(){ 12 oBox.classList.add( ‘box4‘ ); 13 } 14 oBtnRemove.onclick = function(){ 15 if( oBox.classList.contains(‘box1‘) ) { 16 oBox.classList.remove( ‘box1‘ ); 17 } 18 } 19 oBtnToggle.onclick = function(){ 20 oBox.classList.toggle( ‘box4‘ ); 21 } 22 </script>
标签：lis 使用 ref 新特性 包含 query 连接 cal 功能
原文地址：http://www.cnblogs.com/ghostwu/p/7422169.html
