jQueryの変更ボタンの背景

JavaScript テクノロジーの発展に伴い、JavaScript と jQuery を使用してさまざまな機能を実装する Web サイトがますます増えています。今回はjQueryを使ってボタンの背景を変更する方法を紹介します。

まず、HTML コードを見てみましょう:

按钮 1 按钮 2

変更する必要があるのは、ボタンの背景色です。したがって、CSS ファイルでボタンの背景色を定義する必要があります。

button { background-color: #ccc; }

次に、jQuery を使用してボタンの背景色を変更しましょう。まず、ボタンにクリック イベントを追加する必要があります:

$("#btn1").click(function() { // TODO: 在这里添加代码 }); $("#btn2").click(function() { // TODO: 在这里添加代码 });

ここで、ボタン 1 をクリックすると背景色をオレンジに変更する必要があり、ボタン 2 をクリックすると背景色を変更する必要があります。背景色 背景色が緑色に変わります。これらの関数を実装するコードを追加しましょう。

$("#btn1").click(function() { $(this).css("background-color", "orange"); }); $("#btn2").click(function() { $(this).css("background-color", "green"); });

このコードは何をするのですか?

まず、jQuery のclick()関数を使用して、ボタンのクリック イベントをキャプチャします。次に、$(this)を使用して、クリックされたボタンを参照します。最後に、css()関数を使用してボタンの背景色を変更します。

ここで、Web ページを実行してボタンをクリックすると、ボタンの背景色が正常に変更されたことがわかります。

上記はjQueryを使ってボタンの背景色を変更する方法です。もちろん、他の jQuery 関数を使用して、より複雑なボタン効果を実現することもできます。さらに詳しく知りたい場合は、jQuery の公式ドキュメントを参照してください。

以上がjQueryの変更ボタンの背景の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。