jqueryのcssメソッドとイベントメソッドの使い方を詳しく解説

伊谢尔伦
リリース: 2017-06-19 14:46:00
オリジナル
1237 人が閲覧しました

CSSメソッド

.hasClass(calssName)は、要素に特定のクラスが含まれているかどうかをチェックし、true/falseを返します

$( "#mydiv" ).hasClass( "foo" )
ログイン後にコピー

.addClass(className) / .addClass(function(index,currentClass))は、要素にクラスを追加します元のクラスの上書きは追加され、重複はチェックされません

$( "p" ).addClass( "myClass yourClass" );
$( "ul li" ).addClass(function( index ) {  return "item-" + index;
});
ログイン後にコピー

removeClass([className]) / ,removeClass(function(index,class)) 要素の単一/複数/すべてのクラスを削除します

$( "p" ).removeClass( "myClass yourClass" );
$( "li:last" ).removeClass(function() {  return $( this ).prev().attr( "class" );
});
ログイン後にコピー

.toggleClass (className) /.toggleClass(className,switch) / .toggleClass([switch]) / .toggleClass( function(index, class, switch) [, switch ] ) toggle はスイッチを意味し、メソッドはスイッチに使用され、スイッチはbool型の値、例を見れば分かります

<div class="tumble">Some text.</div>
ログイン後にコピー

1回目の実行

$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
ログイン後にコピー

2回目の実行

$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>
ログイン後にコピー
$( "#foo" ).toggleClass( className, addOrRemove );// 两种写法意思一样if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}
ログイン後にコピー
$( "div.foo" ).toggleClass(function() {  if ( $( this ).parent().is( ".bar" ) ) {    return "happy";
  } else {    return "sad";
  }
});
ログイン後にコピー

.css(propertyName) / .css(propertyNames) 要素スタイルの特定のプロパティの値を取得

var color = $( this ).css( "background-color" ); 
var styleProps = $( this ).css([    "width", "height", "color", "background-color"
  ]);
ログイン後にコピー

.css(propertyName, value) / .css( propertyName, function(index, value) ) / .css(propertiesJson ) 要素 style

$( "div.example" ).css( "width", function( index ) {  return index * 50;
});
$( this ).css( "width", "+=200" );
$( this ).css( "background-color", "yellow" );
   $( this ).css({      "background-color": "yellow",      "font-weight": "bolder"
    });
ログイン後にコピー

Event メソッド

の特定のプロパティの値を設定します。 bind(eventType [,eventData],handler(eventObject) ) Bind定義されたイベント処理プログラム、これはよく使われますが、あまり説明はありません

$( "#foo" ).bind( "click", function() {
  alert( "User clicked on &#39;foo.&#39;" );
});
ログイン後にコピー

.delegate( selector,eventType,handler(eventObject) ) 公式の説明を見てみましょう

ルート要素の特定のセットに基づいて、現在または将来、セレクターに一致するすべての要素の 1 つ以上のイベントにハンドラーをアタッチします。

$( "table" ).on( "click", "td", function() {//这样把td的click事件处理程序绑在table上
  $( this ).toggleClass( "chosen" );
});
ログイン後にコピー

.on( events [, selector ] [, data ], handler( eventObject) ) 1.7 以降で推奨、bind、live、delegate を置き換えます

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});
ログイン後にコピー

.trigger(eventType [, extraParameters ] ) JavaScriptトリガー要素バインディングevent

$( "#foo" ).trigger( "click" );
ログイン後にコピー

.toggle( [duration ] [, complete ] ) / .toggle(オプション ) 要素を表示または非表示にする

$( ".target" ).toggle();
$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {    // Animation complete.  });
});
ログイン後にコピー

以上がjqueryのcssメソッドとイベントメソッドの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!