1.classList介绍和原生JavaScript实现addClass、源码removeClass等
2.jqueryçaddClass
3.《关于jQuery中addClass方法的源码问题》
4.Jquery&classList
classList介绍和原生JavaScript实现addClass、removeClass等
在JavaScript中,源码原生的源码城信源码classList属性为处理元素类(class)操作提供了方便,可以实现类似jQuery的源码addClass、removeClass和hasClass等功能。源码它是源码一个DOMTokenList对象,代表元素的源码类属性,非空时length属性为1。源码尽管classList是源码只读的,但通过add()和remove()方法可以操作其内容。源码源码阅读环境
添加类值时,源码如果类已存在,源码会被忽略。源码删除则是源码移除指定的类。获取类值的vb源码应用方法是通过索引,而toggleClass和hasClass则根据传入的参数进行相应的操作:toggleClass如果参数为真,添加类;为假,则删除。hasClass则检查是否存在特定类。
然而,阿里影视源码classList在一些旧版本的浏览器中不完全兼容,如Android 2.3和iOS 4.2,更不用说IE9和IE8了。在实际应用中,可能需要使用shim来弥补这种不兼容。源码讲了什么你可以参考GitHub上的elgrey/classList-shim项目来实现。
尽管如此,原生JavaScript的classList API提供了一种标准且简洁的方式来管理类,对于现代浏览器来说,是推荐的实践方式。如果你在前端学习中遇到困惑,我,一位前端工程师,正在创业中,经营自学团队,提供知识分享、学习伙伴匹配和项目参与机会。如有兴趣,可以通过留言或私信加入我们。
作者:leadn
来源:classList介绍和原生JavaScript实现addClass、removeClass等
jqueryçaddClass
ä½ å¯ä»¥è¿æ ·åä¸è¯è¯ï¼
var i = $(this).index();
alert(i) //è¿æ ·å¯ä»¥ççä½ æ¯è¦ç»é£ä¸ªå¢å äºç±»å
$(".abc li a").removeClass("xmactive").eq(i).addClass("xmactive");
alert(i) //è¿éå¯ä»¥ççæ没ææ§è¡å°è¿
《关于jQuery中addClass方法的问题》
不要用addClass,因为用addClass之后,会让对象的class="jia jian",这样肯定是不会变的。
你应该改成attr,比如上面两句:
$(".first>span").addClass("jian"); 改成 $(".first>span").attr("class", "jian");
$(".first>span").addClass("jia"); 改成 $(".first>span").attr("class", "jia");
这样class就会在class="jia"和class="jian"之间互相切换了。
Jquery&classList
éè¿classListåçå®ç°JQueryçaddClassãremoveClassãhasClassã
æ¡ä¾ææé¢è§
Element.classList æ¯ä¸ä¸ªåªè¯»å±æ§ï¼è¿åä¸ä¸ªå ç´ çç±»å±æ§çå®æ¶ DOMTokenList éåãä½æ¯ä½ å¯ä»¥ä½¿ç¨ add å remove æ¹æ³ä¿®æ¹å®ã
æ·»å ä¸ä¸ªæè å¤ä¸ªtokenã
è¯æ³ï¼ tokenList.add(token1[, token2[, ...tokenN]]);
å¦æå å«è¯¥toeknï¼åè¿åtrueï¼å¦åè¿åfalseã
è¯æ³ï¼ tokenList.contains(token);
ä»å表ä¸å é¤ä¸ä¸ªæè å¤ä¸ªtokenã
è¯æ³ï¼ tokenList.remove(token1[, token2[, ...tokenN]]);
è¯æ³ï¼ tokenList.replace(oldToken, newToken);
PSï¼ oldToken 被æ¿æ¢çtokenï¼ newToken ç¨äºæ¿æ¢oldToeknçãè¿åå¼ä¸ºBooleanï¼è¥æåæ¿æ¢è¿åtrueï¼å¦åè¿åfalseï¼å½ oldToken ä¸åå¨æ¶ä¼è¿åfalseãå¨è¾æ§æµè§å¨ä¸ï¼replace()ä¼è¿åvoidã
è¥è¯¥tokenåå¨ï¼ä»DOMTokenListä¸å é¤æå®çtokenï¼å¹¶è¿åfalseãè¥è¯¥tokenä¸åå¨ï¼åä¼æ·»å æå®tokenï¼å¹¶è¿åtrueã
è¯æ³ï¼ tokenList.toggle(token [, force]);
PSï¼ force 为Booleanå¼ï¼è¡¨ç¤ºè½®æµåæ¢å°ååï¼falseåtokenå°ä» å é¤èä¸æ·»å ï¼trueåtokenåªæ·»å ä¸ä¼è¢«å é¤ã
classList Mdn