[コードアップルJSベース]JQuery

6215 ワード
jquery 2回目のクエリ テキストリンク

JQueryって何?


長いJavaScriptコードを減らしたり、JavaScriptを使いにくい人に使ったりするツールコードの集合といえます.
重いと言われていますが、あまり知識を求めないので使いやすいです.

リポジトリを使用する理由

  • すべての機能は
    • を直接符号化できない.
  • 時間の節約
    出典:https://writingstudio.tistory.com/17

    • 2番目のクエリの使用


    Jquery cdn接続

    minifedをクリックし、コピーしたコードをhtmlファイルに挿入します.
    貼り付けられたコードの下にjsを使用すると、jクエリー構文を適用できます.
    <script>
      //html 내용 변경
      document.querySelector(".hello").innerHTML = "바보";

      //제이쿼리 버전
      $(".hello").html("바보");
      //$ = document.querySelectorAll
      //"innerHTML = '바꿀 내용'"" == "html('바꿀 내용');"
      //제이쿼리 $쓸 경우 querySelectorAll같이 몇번쨰 따로 표시안하고 전체 선택함

      //css 변경
      document.querySelector(".hello").style.fontSize = "20px";
      
      //제이쿼리 버전
      $(".hello").css("fontSize", "100px");

      //제이쿼리 버전 class탈부착하기
      $(".hello").addClass('show');//class명에 붙이기
      $(".hello").removeClass('show');//class명에서 show 빼기
      $(".hello").toggleClass('show');//class명에 show 추가 또는 제거
      
      //addEventListener 적용하기, 애니메이션도 부여 가능
      //document.querySelector('#test-btn').addEventListener('click', function(){});
      $("#test-btn").on("click", function () {
        $(".hello").slideUp();
      });
      //addEventListener가 on("",function(){})과 같음
</script>
    [伯俊]14500テルミノPython
    [白俊]14696絵柄ゲームPython