jQuery入門--イベント・on()

イベント・on

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
jQuery--2.2.4

【イベントとは】
クリックやマウスが要素に乗ったときなどユーザーのアクションが合った時に、処理を実行することです。

【イベントの種類】

【使い方】
$("セレクト名").イベント名(function()){
      処理内容;

});

サンプルコード
「index.html」コード

「event.jp」コード
$(function(){
   $("li").click(function(){ 
      $("li").css("color","red");

   });

 });

ブラウザを立ち上げる
クリックすると赤に成る

【this】
呼び出した状況に応じた値が代入される変数。イベント中ではイベントが起こった要素が代入される。

「event.jp」

$(function(){

   $("li").click(function(){
        //thisに変更する

        $(this).css("color","red");

   });

 });

ブラウザを開く

クリックした文字だけだ、赤くなる。
【on()メソッド】
「on()」は、さまざまなイベント処理を記述するために使われるメソッドになります。
・使い方
$("").on("",""function(){
    処理内容
});

 

サンプルコード
「index.html」コード

「event.js」
$(function(){

    $("p").click(function(){

        //セレクタの最後にhtmlを追加

       $("ul").append("＜li＞追徴金＜/li＞");

    });

    $("li").click(function(){

        $(this).css("color","red");

     })

 });

ブラウザを立ち上げる
増やすクリックするお金をクリック

次に、ON（）を使うと、すべてを赤色にできる。

$(function(){

    $("p").click(function(){

        //セレクタの最後にhtmlを追加

       $("ul").append("＜li＞追徴金 ＜/li＞");

    });

    $("ul").on("click","li",function(){

        $(this).css("color","red");

     });

 });

ブラウザを