給元素更改樣式,一般使用 addClass() 和removeClass()
jquery官方文檔 對 addClass的介紹:
Adds the specified class(es) to each element in the set of matched elements.
實例代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./WebContent/resources/common/js/jquery.js"></script> <style> .aaa { color: rebeccapurple; font-size: 4em; } .bbb { width: 20%; height: 20%; background: #f1f1a1; } </style> </head> <body> <div id="test1" class="div"> <span class="aaa bbb">hellow world </span> </div> <div class="div"> <span class="aaa bbb">hellow world</span> </div> <div> <input type="button" value="點擊我"> </div> </body> <script> $('input[type=button]').on('click', e => { console.log(e); console.log(e.target); console.log($(e.target)); let ee = document.getElementById('test1'); console.log(ee); $('.bbb',ee).toggleClass('aaa'); });
</script> </html>
addClass()
給匹配的元素集合添加 指定的class樣式(注意 括號中的es 可以移除多個樣式)
$('.div span').addClass('aaa') ;添加指定樣式
$('.div span').addClass('aaa bbb') ;添加多個樣式
removeClass()
jquery官方文檔 對 removeClass的介紹:
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
給匹配的元素集合移除 一個 或者 多個 或者 所有的 class樣式
$('.div span').removeClass() 方法移除所有的樣式
$('.div span').removeClass('aaa') 移除指定的class 為 aaa的樣式
$('.div span').removeClass('aaa bbb') 移除指定的多個樣式;
toggleClass()
toggle 是切換的意思,官方解釋
Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.
如果 有這個class 則 移除此class,如果沒有這個class,則添加上
$('.div span').toggleClass('aaa bbb');
總結
1.toggleClass 側重點在樣式指定樣式的切換,一般配合點擊、 鼠標懸浮 、鼠標划過事件
2.removeClass 和 addClass 重點在樣式的移除
3.針對頻繁切換,使用toggle,代碼會簡介流程很多
從調試,到驗證,再些這個隨筆,花了二個小時.再想想此文的技術含量,有點汗顏.繼續努力.爭取能寫出高端,有含量的干貨
一下是關於偽類和偽元素的文章鏈接