20.12.16-18日

8478 ワード
jquery テキストリンク
今日からjQuery Go Go!
( https://www.w3schools.com/jquery/default.asp )

🤗jQueryの起動


😘 jQueryの追加

  • Download the jQuery library from jQuery.com 
    • <head>
<script src="jquery-3.5.1.min.js"></script>
</head>
  • Include jQuery from a CDN, like Google 
    • <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

    😘 Syntax


    $:jQuery()関数は特殊な記号として使用されます.
    //기본형
<script>
	$
	$(document).ready(function(){
    	//jQuery문법, 자바스크립트 문법사용
    });

</script>

//단축형
<script>
	$(function(){
    
    });
    😲 ready()イベントメソッド:Webブラウザがhtmlドキュメントを読み出したときの動作

    😘 Selector


    jQueryのすべての選択プログラムは$()で始まります!
    👉 element selector
    $("p")
            $(document).ready(function(){
            $("button").click(function(){
                $("p").hide();

            });
        });
 버튼을 클릭하면 <p> 태그가 숨겨짐
    👉 #id selector
    $("#test")
    #idセレクタを使用して一意のタグを検索
    $(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
버튼을 클릭하면 id = "test"인 태그가 숨겨짐
    👉 .class selector
    $(".test")
    特定のカテゴリを持つタグの検索
    $(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
버튼을 클릭하면 class = "test"인 태그가 숨겨짐
    😲セレクタの詳細を学習するには
    w3schools - jQuery selector

    😘 Event


    😲いろいろなイベントがここにあります.
    w3schools - jquery event 
     /* p태그 안에 동적으로 태그를 작업을 하고, 동적으로 생성된 태그에 이벤트를 추가하고자 할때 사용
      $("정적태그부모선택자").on("click", "동적태그 자식선택자", function(){
          $(this).hide();
            });

    *이벤트 설정이 정상적으로 작동안됨
      $("동적태그 자식선택자").on("click",function(){
           $(this).hide();
            });

    *이벤트 설정이 정상적으로 작동안됨
      $("동적태그 자식선택자").click(function(){
           $(this).hide();
            });
*/

    🤗Effect


    😲コールバック関数
    メソッドパラメータとして提供される関数
    ≪イベント・ハンドラ｜Event Handler｜ldap≫:イベント発生時に呼び出される関数
    (詳細は後述)

    😘Hide / Show


    👉hide()/show()
    THMLタグを非表示および表示にするには、この方法を使用します.
    $(selector).hide(speed,callback);
$(selector).show(speed,callback);
    예)
$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});
    👉toggle()
    非表示、表示、実行(hideとshowの2つの効果)$(selector).toggle(speed,callback); 
    예)
$("button").click(function(){
  $("p").toggle();
});
    😲Effect
  • fade - w3schools - jquery fade
  • slide - w3schools - jquery slide
  • animate - w3schools - jquery animate
  • stop - w3schools - jquery stop

    • 😘Callback

    $ ( selector ) .hide ( speed, callback ); 
    콜백이 있는 예)
$("button").click(function(){
  $("p").hide("slow", function(){
    alert("The paragraph is now hidden");
  });
});

콜백이 없는 예)
$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});

    🤗jQuery HTML


    😘Get


    😲 Get Content(テキスト読み込み)
    メソッド→プロパティー
    text() - innerText
    html() - innerHTML
    val() - value
    text)
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

HTML)
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

val)
$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});
->입력양식태그에서 사용
    👉attr()
    属性値の入力
    예)
$("button").click(function(){
  alert($("#w3s").attr("href"));
});
-> href 속성값을 가져옴

    😘Set


    メソッドにパラメータ値を入力するとset!
    text()
    html()
    val()
    $("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});
    bashループ、判断文まとめ
    [伯俊]#1208部分数列の和2