728x90

정리 참고 : https://www.w3schools.com/jquery

https://developers.google.com/speed/libraries

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

위사이트에서 복붙

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
   
   <script>
      $(document).ready(function () {
        //화면이 모두 로딩된 다음 실행됨
        $("p").click(function () {
          $(this).hide();
        })
      })
    </script>
    
  </head>
  <body>
    <p>hello1</p>
    <p>hello2</p>
    <p>hello3</p>
  </body>
</html>

 

$(document).ready(function(){
  // 실행할 기능을 정의해주세요.
});


화면이 모두 로딩된 다음 실행된다.

DOM(Document Object Model)이 완전히 불러와지면 실행되는 Event

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
    
      $(document).ready(function () {
        //화면이 모두 로딩된 다음 실행됨
       $("#allCheck").on("change",function(){
          alert(this.checked);
        });
      })
      //체크하면 true 아니면 false

    </script>
  </head>
  <body>
    <input type="checkbox" id="allCheck" />ALL
    <div id="list">
      <input type="checkbox" checked='true'/>A 
      <input type="checkbox" checked='false'/>B
      <input type="checkbox" />C
    </div>
  </body>
</html>

 

.on()

 

jQuery는 특정 요소에 이벤트 바인딩(event binding)하기 위해 .on() 메소드를 사용한다.

아래 예제는 요소를 클릭했을 때 알람창이 켜지는 예제이다.

$("p").on("click", function(){
 alert("문장이 클릭되었습니다.");
});

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>

        $(document).ready(function () {
          //화면이 모두 로딩된 다음 실행됨
         $("#allCheck").on("change",function(){
          if(this.checked){
            $("#list").children("input").prop("checked",true); 
          }else{
            $("#list").children("input").prop("checked",false);
          }
        })
      })
      //ALL을 누르면 전체가 체크된다
      //.prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가합니다. 

    </script>
  </head>
  <body>
    <input type="checkbox" id="allCheck" />ALL
    <div id="list">
      <input type="checkbox" checked='true'/>A 
      <input type="checkbox" checked='false'/>B
      <input type="checkbox" />C
    </div>
  </body>
</html>

 

prop()

이 메서드는 선택한 요소의 속성과 값을 설정하거나 반환합니다.

이 메서드를 사용 하여 속성 값을 반환하는 경우 첫 번째 일치 요소의 값을 반환합니다 .

이 메서드를 사용하여 속성 값을 설정 하면 일치하는 요소 집합에 대해 하나 이상의 속성/값 쌍을 설정합니다.

참고: prop() 메서드는 DOM 속성(예: tagName, nodeName, defaultChecked) 또는 사용자 정의 속성과 같은 속성 값을 검색하는 데 사용해야 합니다.

팁: HTML 속성을 검색하려면 대신 attr() 메서드를 사용하십시오.

팁: 속성을 제거하려면 removeProp() 메서드를 사용하십시오.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>

      $(document).ready(function () {
        //화면이 모두 로딩된 다음 실행됨
          $("#allCheck").on("change",function(){
          if(this.checked){
            $("#list").children("input").prop("checked",true);
          }else{
            $("#list").children("input").prop("checked",false);
          }

          alert($(this).attr("data-test")); //읽어오기
          alert($(this).attr("data-test","test2")); //변경하기
          alert($(this).attr("data-test")); //읽어오기
          //.attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다.
        });    
      })

    </script>
  </head>
  <body>
    <input type="checkbox" id="allCheck" />ALL
    <div id="list">
      <input type="checkbox" checked='true'/>A 
      <input type="checkbox" checked='false'/>B
      <input type="checkbox" />C
    </div>
  </body>
</html>

attr()

이 메서드는 선택한 요소의 속성과 값을 설정하거나 반환합니다.

이 메서드를 사용 하여 속성 값을 반환하면 첫 번째 일치 요소의 값을 반환합니다 .

이 방법을 사용하여 속성 값을 설정 하면 일치하는 요소 집합에 대해 하나 이상의 속성/값 쌍을 설정합니다.

728x90

'STUDY > jQuery' 카테고리의 다른 글

[EasyUI] DataGrid / Layout / Link Button / Massager  (0) 2022.12.21
[jQuery] 제이쿼리 기초 animate()·stop()  (0) 2022.10.05
[jQuery] AJAX 설명과 기본 사용 방법 정리  (0) 2022.09.30
[jQuery] jQuery 정의와 적용 방법 정리  (1) 2022.09.30
[jQuery] 제이쿼리 CDN 가져오기  (0) 2022.09.05

티스토리툴바