1. 제이쿼리란

2023. 3. 28. 11:16ㆍLibrary/jQuery

728x90
반응형
  • 가장 많이 사용되며 잘 만들어진 오픈 소스 자바스크립트 라이브러리
  • Rich웹 UI를 개발하는데 도움이 되는 다양한 기능들 지원
  • CSS에서 사용되는 선택자 개념으로 DOM 멤버에 접근 가능
  • 플러그인 개념 도입, 기능 확장이 쉬움
  • 특징
    • 편리한 CSS 선택자
    • 크로스 브라우저 지원
      • 코드가 사용될 브라우저를 신경 쓸 필요가 없다
    • 메서드 체이닝
      • 메서드를 연속으로 사용
      • jquery가 제공하는 모든 메서드는 반환값이 효과가 반영된 jquery개체
      • 때문에 메서드를 이어서 사용 가능
      • $(선택자).메서드().메서드().메서드();
      • $('tr:odd').css("font-weight","bold).css("color","blue");
    • Ajax 지원
    • 풍부한 플러그인 지원
    • jQuery 사이트

1. jquery 사용

비교

  • javascript 

    <!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
  window.onload=function(){
      var divEls = document.getElementsByTagName("div");
      for(var i=0; i<divEls.length; i++){
          divEls[i].onclick=function(){
              this.style.display="none";
          }
      }
  }
</script>
</head>
<body>
  <div>1. 클릭하면 사라짐</div>
  <div>2. 클릭하면 사라짐</div>
  <div>3. 클릭하면 사라짐</div>
</body>
</html>

  • jquery 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div").click(function(){
                $(this).hide();
            })
        });
    </script>

</head>
<body>
    <div>1. 클릭하면 사라짐</div>
    <div>2. 클릭하면 사라짐</div>
    <div>3. 클릭하면 사라짐</div>
</body>
</html>

2. $()

$(선택자).메서드();

  • $()로 CSS의 선택자와 모든 DOM 요소에 접근이 가능하다

  • jQuery의 진입점(엔트리 포인트)

    $(document).ready()
    $().ready()
    $() 

      - jquery가 제공하는 페이지 로드 이벤트 함수
  - 문서의 DOM 요소들을 조작가능한 시점이 되면 자동으로 호출
  - window.onload 이벤트와 유사
728x90
반응형

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

6. 탐색메서드  (0) 2023.03.28
5. css 관련 메서드  (0) 2023.03.28
4. 문서 객체 조작  (0) 2023.03.28
3. 기본메서드  (0) 2023.03.28
2. 선택자  (0) 2023.03.28

관련글

댓글 0

티스토리툴바