jQuery操作要素cssスタイルの3つの方法

Javascriptを使用して、ページ要素のスタイルを変更することがよくあります.1つの方法は、従来のJavascriptでは、HTML Domのclassname特性を処理することによって実現されるページ要素のCSSクラス(Class)を変更することです.jQueryでは、この機能を実現するために3つの方法が提供されています.従来の方法と思想は通じていますが、多くのコードを節約しています.やはり「jQueryはJavaScriptコードを簡潔にします!」
1.addClass()-CSSクラスを追加
$("#target").addClass("newClass");
//#targetとは、スタイルを追加する必要がある要素のIDです
//newClassとはCSSクラスの名前です
2.removeClass()-CSSクラスの削除
$("#target").removeClass("oldClass");
//#targetとは、CSSクラスを削除する必要がある要素のIDです
//oldClassとはCSSクラスの名前です
3.toggleClass()-CSSクラスを追加または削除します.CSSクラスがすでに存在する場合、削除されます.逆にCSSクラスが存在しない場合は加算されます.
$("#target").toggleClass("newClass")
//IDが「target」の要素にCSSスタイルが定義されている場合は、削除されます.
//逆にCSSクラス「newClass」がこのIDに付与されます.
実際の運用では、これらのCSSクラスを定義し、Javascriptイベントトリガ(リンクをクリックするなど)によってページ要素スタイルを変更することがよくあります.また、jQueryは、ある要素にCSSクラスが付与されているかどうかを判断する方法hasClass(「className」)を提供します.
次は完全な例です.

 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
   
  
 
  

 
  
 
  
 
  
 
  <br> 
  <br>function btnClick(){ 
  <br>//$("#soccer").removeClass("up"); 
  <br>$("#soccer").toggleClass("up"); 
  <br>//$("p:first").removeClass("intro"); 
  <br>} 
  <br>