jQueryプロパティ操作方法、イベントコントロール

28575 ワード
TIL jquery テキストリンク
2021.08.19

1.属性操作方法


1-1.基本的な使い方


属性のインポート時
$(オプション).attr();
選択者のすべての属性
$(オプション).attr(「プロパティ名」);
プログラムの「プロパティー名」のプロパティーを選択
属性入力時
$(オプション).attr(「属性名」、「属性代入値」)
個々のプロパティの操作
$(オプション).attr({
属性名1:属性付与
属性名2:属性付与
});
複数のプロパティの操作

1-2例

  <body>
    <!-- 바위 변경 alt 바위 -> 클릭하면 네이버로 이동, 새창 / 보더 2px solid red -->
    <a href="#"><img src="images/math_img_1.jpeg" alt="가위" /></a>

    <script>
      $('[href]').click(function () {
        // $('a>img').attr('src', 'images/math_img_2.jpeg');
        // $('a>img').attr('alt', '바위');

        $('a>img')
          .attr({
            src: 'images/math_img_2.jpeg',
            alt: '바위',
          })
          .css('border', '2px solid red');

        $(this).attr({
          href: 'https://www.naver.com/',
          target: '_blank',
        });

        console.log($('a>img').attr('alt'));
      });
    </script>
  </body>

2.イベント操作方法


イベントメソッドの使用
デフォルトでは、セレクタを入力します.後ろに書く.
$(オプション).メソッド();

2-1. イベント別の分類方法


2-1-1. イベントメソッドのロード


  • load()
    選択した画像またはフレーム要素のソースにロードされた後にイベントが発生します.

  • ready()
    指定したHtmlドキュメントオブジェクトをロードした後にイベントが発生します.

  • error()
    イベントターゲット要素にエラーが発生した場合、イベントが発生します.

    • 2-1-2. マウスイベントメソッド


  • click()
    選択した要素をクリックするとイベントが発生します

  • dbclick
    選択した要素を連続的にダブルクリックするとイベントが発生します.

  • mouseout()
    マウスポインタが選択した要素領域から離れるとイベントが発生します.
    (サブエレメントの影響を受ける)

  • mouseover()
    選択した要素の領域にマウスポインタを置くとイベントが発生します.

  • hover()
    選択した要素にマウスを置くと、各イベントが発生します.

  • mousedown()
    選択した要素でマウスボタンをクリックするとイベントが発生します.

  • mouseup()
    選択した要素の上でマウスボタンを押して移動するとイベントが発生します.

  • mouseenter()
    選択したエレメント範囲にマウスポインタを置くとイベントが発生します.

  • mouseleave()
    マウスポインタが選択した要素の範囲から離れるとイベントが発生します.

  • mousemove()
    選択したエレメント範囲内でマウスポインタを移動中にイベントが発生しました

  • イベントオブジェクトpageX
    スクロールX軸の移動距離を計算し、マウスポインタのX座標値を返します.

  • イベントオブジェクトpageY
    スクロールy軸の移動距離を計算し、マウスポインタのY座標値に戻る

    • 2-1-3. イベントメソッドのスクロール


    scroll()
    水平スクロールバーと垂直スクロールバーを移動するたびにイベントが発生します.

    2-1-4. ウィンドウ幅イベントの変更方法


    ウィンドウのサイズを求めます

  • var windowWidth = $( window ).width();
    ウィンドウ幅
  • var windowHeight = $( window ).height();
    ウィンドウの高さ

    • ウィンドウサイズの変更を検出します(スケールにも適用されます)。

  • $( window ).resize(関数){ウィンドウサイズを変更して実行);

    • $(window).width()と$(document)。width()差異


  • $(window).width
    ブラウザのウィンドウ幅

  • $(document).width
    ドキュメントの幅

    • 2-1-5. フォーカスイベントメソッド(フォームに関連するメソッド)


  • focus()
    選択した要素にフォーカスを作成すると、イベントまたは
    選択した要素のフォーカスの強制

  • blur()
    選択した要素から別の要素にフォーカスを移動すると、イベントまたは
    選択した要素のフォーカスの消失を強制します.

  • focusin()
    選択した要素のサブ要素にフォーカスを作成するとイベントが発生します.

  • focusout()
    選択した要素のサブ要素から別の要素にフォーカスを移動すると、イベントが発生します.

  • change()
    イベントターゲットとしての入力要素の値が変更され、フォーカスが移動するとイベントが励起され、change()イベントが強制的に励起されると使用されます.

  • submit()
    フォームタグに入力された値がサーバに送信されるコミットが発生すると、イベントが励起されます.

    • 2-1-6. キーボードイベントメソッド


  • keypress()
    選択した要素でキーボードをクリックするとイベントが発生し、文字キー以外のキーのコード値が返されます.

  • keydown()
    選択した要素でキーボードをクリックするとイベントが発生し、キーボード上のすべてのキーのコード値が返されます.

  • keyup()
    選択した要素からキーボードを外すとイベントが発生します.

    • 2～2個以上のイベントを適用する方法


    複数のイベントを適用または追加する方法は、JavaScriptのaddEventListenerと同様です.
    方法の使い方について
    on(「イベント」,function(){})
    on({
    イベント1:function(){}
    イベント2:function(){}
    })

    2-3その他の方法


    2-3-1 trigger()


    関数を事前に有効にする方法

    コードの例

        <script>
      $(document).ready(function () {
        $('button:eq(0)')
          .on('click', function () {
            $('#con1').toggleClass('on');
          })
          .trigger('click');
        // $('button:eq(0)').click();
        $('button:eq(1)')
          .on('click', function () {
            $('#con2').toggleClass('on');
          })
          .trigger('click');

        $('button:eq(2)').on('click', function () {
          $('button:eq(0)').trigger('click');
          $('button:eq(1)').trigger('click');
        });
        // trigger 이벤트 강제 발생
      });
    </script>
  </head>
  <body>
    <div id="con1"></div>
    <div id="con2"></div>
    <button>클릭1</button>
    <button>클릭2</button>
    <button>all</button>
  </body>

    triggrtがない場合は、ページのロード時に関数を起動し、事前に入力できないバーが表示されます.

    例


    サンプルコード

        <script>
      $(function () {
        $('a:first').attr({
          href: 'https://www.naver.com/',
          target: '_blank',
        });

        $('a:last').text('구글 바로가기');
        $('a:last').attr('href', 'https://www.google.co.kr');

        $('button').on('click', function () {
          $('p').css('display', 'block');
        });

        $('p').on({
          click: function () {
            $(this).css('display', 'none');
          },
          mouseover: function () {
            $(this)
              .css('background-color', 'red')
              .siblings('p')
              .css('background-color', '#fff');
          },
          mouseout: function () {
            $(this)
              .css('background-color', 'blue')
              .siblings('p')
              .css('background-color', '#fff');
          },
        });
      });
    </script>
  </head>
  <body>
    <a href="">네이버 바로가기</a>
    <a href="">바로가기2</a>
    <hr />
    <p>클릭하면 사라짐1</p>
    <p>클릭하면 사라짐2</p>
    <p>클릭하면 사라짐3</p>
    <p>클릭하면 사라짐4</p>
    <p>클릭하면 사라짐5</p>
    <hr />
    <button>나타내기</button>
  </body>

  • プロパティ操作でhrefアドレスとtargetを入力し、それぞれ対応するアドレスに移動し、新しいウィンドウで開きます.

  • pラベルをクリックすると、実行する関数が作成され、各関数でこのオプションを使用して、クリックしたpラベルのみを選択して、その部分を消去します.

  • マウスを離すと、マウスを離すと選択者全体が指定されるため、自分以外のラベルが白くなり、背景色を変更するのは自分だけです.

  • ボタンをクリックすると、pラベルの表示属性がブロックに変換されます.
    • 開発ログ210708
    制御ファイルとパラメータファイルの手動バックアップ