jQuery

카테고리 : Study >> Javascript

jQuery

간결한 표현이 장점

  • javascript : document.querySelector("hi")
  • jQuery 표현 : $(”hi”)

왜 배워야할까?

  • 여전히 높은 점유율

jQuery CDN

  • 가장 많이 사용하는 CDN은 Google CDN
  • document가 모두 실행된 이후에 jQuery문이 실행될 수 있도록 해야한다.
    • 따라서 $(document).ready(function(){ 실행 코드 }) 를 원형으로 사용했는데, 3.X 버전 부터는 $(function(){ 실행 코드 }) 이렇게 쓴다고 한다. 3.6.1 버전이 표준이다.
    • ready 구문은 window.onload 보다 앞서서 실행된다.
  • 호출 순서

jQuery가 포함하는 기능

  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities

jQuery Syntax

Selecting Elements (요소 선택)

  • javascript : 단수선택과 복수선택을 구분 (querySelector, querySelectorAll)
  • jQuery : 차이없음 $(”선택자”);
  • 선택한 요소에 대해서는 .action() 을 붙여 동작 시켜줄 수 있다.

  • $ 달러 표시는 jQuery를 정의/접근을 의미한다.

  • #id Selector
    • $(”#test”)
  • .class Selector
    • $(”.test”)
  • 기타 Selelctors
    • * - 모든 elements 선택
    • this - 가장 최근 html element 선택
    • p.intro - p 태그 중 클래스를 intro로 갖는 elements 선택
    • p.first - p 태그 중 첫번재 element 선택
    • [href] - href 속성을 갖는 모든 elements 선택
    • [target='_blank'] - target 속성이 _blank인 모든 elements 선택
    • tr:even - 모든 짝수번째 tr elements 선택 : 0부터 짝수!

jQuery Event Methods

Mouse EventsKeyboard EventsForm EventsDocument/Window Events
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleave blurunload
mousedown   
mouseup   
  • click과 mousedown, mouseup 비교
    • click은 눌렀다 뗐을 때 발생
    • mousedown은 누르는 순간 발생
    • mouseup은 떼는 순간 발생
  • hover()
    • mouseenter + mouseleave
      $(document).ready(function(){
    $("#p1").hover(function(){
      alert("You entered p1!");
    },
    function(){
      alert("Bye! You now leave p1!");
    });
  });

  • 여러 이벤트를 한번에 적용할 때 사용하는 on()

      $("p").on({
    mouseenter: function(){
      $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
      $(this).css("background-color", "lightblue");
    },
    click: function(){
      $(this).css("background-color", "yellow");
    }
  });

jQuery Effects

jQuery Effects - Hide and Show

  • hide(), show()
    • $(selelctor).hide(speed, callback);
    • $(selelctor).show(speed, callback);
    • speed 는 밀리세컨드 단위, “slow”, “fast”
    • callback 함수는 해당 effect(hide, show)를 수행한 후 실행된다.
      • setTimeout 처럼 동작
  • toggle()
    • $(selector).toggle(speed,callback);

jQuery Effects - Fading

  • fadeIn, fadeOut, fadeToggle
    • hide show와 동일한 syntax를 따른다.
  • fadeTo
    • $(selector).fadeTo(speed,opacity,callback);
    • 원하는 수준(opacity)으로 fade 조절을 할 수 있다.

jQuery Effects - Sliding

  • slideDown, slideUp, slideToggle
    • hide show와 동일한 syntax를 따른다.

jQuery Effects - Animation

  • $(selector).animate({params},speed,callback);
    • 애니메이션 할 CSS 속성을 params에 정의 - animate할 수 있는 css 속성은 numeric value를 갖는 속성이다.
    • speed, callback도 다른 effects와 마찬가지로 사용가능
    • 작성한 Params는 animate 되기 위한 목표값이라고 생각하면 된다.
      • 해당 목표에 도달하는 animation을 구성하는 것!
  • params는 다음과 같이 구성한다.
    • {속성 : 값 , 속성 : 값 …} : 각 param은 , 으로 구분한다.
    • 여기서 값은 상대값으로도 적용할 수 있다.
      • height: '+=150px' 이런 식으로 현재 값에 상대 값을 적용할 수 있다.
  • animate를 차례대로 작성하면 대기열이 생성되고, 차례에 따라 실행된다.

jQuery Stop Animations

  • $(selector).stop(stopAll,goToEnd);
  • stopAll은 모든 대기열의 animation을 중지할 것인지를 의미한다. 기본값을 false.
    • false의 경우 대기중인 애니메이션을 나중에 수행될 수 있음

jQuery Callback Functions

  • 각 effects 함수의 인자 callback을 왜 쓰는가?
    • javascript문은 한 줄씩 수행되는데, 자칫 effect가 진행중인 상황에서 다음 코드 줄이 실행될 수도 있고, 이로 인한 오류가 발생할 수도 있다. 이를 방지하고자 callback 함수를 지원한다.

jQuery - Chaining

  • jQuery를 사용하면 actions/methods 를 연결할 수 있다.
  • 앞서 작성한 예시들은 모두 jQuery 명령을 한 번에 하나씩만 작성했다. 이를 chaining 해보자.
  • $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
    • css attribute color를 red로 변경하고, slideUP, slideDown을 각각 2초에 걸쳐 진행하라는 의미
    • 꼭 한 줄로 작성할 필요 없다.
      • 들여쓰기, 줄 바꿈 모두 가능 (공백은 알아서 버린다.)

jQuery HTML

jQuery - Get Content And Attributes

DOM을 조작하기 위한 3개의 메소드

  • text() : 선택한 elements의 텍스트 내용을 설정하거나 반환
  • html() : 선택한 elements(HTML마크업 포함)의 내용을 설정하거나 반환
  • val() : 해당 form fields의 값을 설정하거나 반환

Set, Get Attribute

  • get은 .attr("href") 같은 형태로 받으면 되고,
  • set은 .attr("href", "https://www.naver.com") 이어서 set할 value를 인자로 넘기면 된다.

  • set하고자 하는 value에 callback 함수를 넘겨줄 수도 있는데, 기존 value(또는 content)를 받아서 수정할 때 용이하다. (다음은 original value 에 텍스트를 추가하여 반환하는 예제)

      $(document).ready(function(){
    $("button").click(function(){
      $("#w3s").attr("href", function(i, origValue){
        return origValue + "/jquery/";
      });
    });
  });

jQuery - Add Elements

  • createElement, appendChild는 가라. jQuery에서 제공하는 쉬운 elements 추가 방식들
    • append()
      • 선택된 HTML elements의 가장 뒤에 원하는 text, html요소를 추가한다.
    • prepend()
      • 선택된 HTML elements의 가장 앞에 원하는 text, html요소를 추가한다.

    append/prepend 할 때, 다음과 같이 함수로 생성하여 관리할 수도 있다. 다음 예제에서는 추가하고자 하는 elements 생성 방식을 다양하게 보여준다.

      function appendText() {
    var txt1 = "<p>Text.</p>";        // Create text with HTML
    var txt2 = $("<p></p>").text("Text.");  // Create text with jQuery
    var txt3 = document.createElement("p");
    txt3.innerHTML = "Text.";         // Create text with DOM
    $("body").append(txt1, txt2, txt3);   // Append new elements
  }
    • after() : 의미적으로는 append와 비슷
    • before() : 의미적으로는 prepend와 비슷
    • append와 after의 차이
      • append() : 선택된 element의 내부에서 삽입이 발생하는 것
      • after() : 선택된 element의 외부에서 삽입이 발생하는 것

jQuery - Remove Elements

  • remove() - 선택된 element 자체를 삭제(자식 elements도 포함하여 삭제)
  • empty() - 선택된 element의 자식 elements를 삭제
  • 매개 변수로 선택자를 넘겨서 해당 선택자에 해당하는 elements만 삭제되도록 할 수 있다.

jQuery - Get and Set CSS Classes

  • addClass()
    • 스타일이 작성된 class를 적용시키는 상황에서 사용
$("button").click(function(){
  $("#div1").addClass("important blue");
});
  • removeClass()
    • class 제거
  • toggleClass()
    • class를 추가/제거 toggle
  • css()
    • get : 인자를 하나만 넘겨주는 경우 propertyname을 넘기게 되는데, 이 때는 해당 property의 value를 반환 받는다.
    • set : 인자를 둘 념겨주는 경우는 propertyname과 value를 넘기게 된다. 이 때는 넘겨주는 value로 해당 property 값을 변경시킨다.
    • 다른 경우들과 같이, 여러개를 적용 시킬 때는 JSON(key : value) 형식을 따른다.

jQuery - Dimension

https://www.w3schools.com/jquery/img_jquerydim.gif

  • width() : element기준 너비
  • innerWidth() : padding을 포함한 너비
  • outerWidth() : border를 포함한 너비
  • outerWidth(true) : margin을 포함한 너비

jQuery Traversing

Traversing이란

  • Traversing에 나열되어 있는 jQuery 메서드들은 jQuery의 선택자를 기준으로 하여 새로운 노드를 찾아가는 방법을 제공한다.
  • DOM 트리 구조에서 ancestor, descendant, sibling과의 관계를 탐색하며 찾고자하는 element를 탐색하는 것을 traversing이라고 한다.

jQuery Traversing - Ancestor

  • DOM 트리 상향 순회 메소드
    • parent() : 선택자의 부모를 선택, 이 때 선택자 대상이 여러 개이면 모든 선택자의 부모를 선택
    • parents() : 선택자를 기준으로 모든 부모를 선택.
    • parentsUntil() : 선택자부터 parentsUntil() 에 주어지는 인자 사이에 있는 모든 요소를 선택

jQuery Traversing - Descendants

  • DOM 트리 하향 순회 메소드
    • children() : 선택자의 직속 자손을 모두 선택, childeren()의 인자로 p.fisrt와 같이 선택 옵션을 추가할 수 있다.
    • find() : 선택자의 후손들 중에서 find()의 인자로 넘겨준 선택자에 해당하는 요소를 찾는다.

jQuery Traversing - Sibling

  • DOM 트리 동일 레벨 순회
    • siblings() : 선택자의 모든 형제 요소 선택, siblings 요소로 선택자를 지정해서 특정 가능
    • next() : 선택자의 동일 레벨 다음 요소 선택
    • nextAll() : 선택자의 동일 레벨 다음 모든 요소 선택
    • nextUntil() : 선택자부터 동일 레벨 nextUntil() 인자까지 다음 모든 요소를 선택
    • prev() : 선택자의 동일 레벨 이전 요소 선택
    • prevAll() : 선택자의 동일 레벨 이전 모든 요소 선택
    • prevUntil() : 선택자부터 동일 레벨 prevUntil() 인자까지 이전 모든 요소를 선택
  • next() 등의 메소드는 선택자를 찾을 때 기본적으로 앞에서 부터 접근하여 찾고
  • prev() 등의 메소드는 선택자를 찾을 때 기본적으로 뒤에서 부터 접근하여 찾는다.
  • 예를 들어 <p>가 맨 앞, 맨 뒤에 위치할 때, next()메소드 실행시에는 맨 앞에 있는 <p>가 선택되고, prev()메소드 실행시에는 맨 뒤에 있는 <p>가 선택된다.

jQuery Traversing - Filtering

  • first() : 선택자의 하위 요소 중 맨 앞 요소 선택
  • last() : 선택자의 하위 요소 중 맨 뒤 요소 선택
  • eq() : 선택자로 선택된 요소들 중 eq() 인자로 받은 index에 해당하는 요소 선택
  • filter() : 선택자로 선택된 요소들 중 filter() 인자로 받은 선택자에 따라 해당하는 요소 선택
    • ex) $("p”).filter(”.intro”) // intro class 를 갖는 모든 p 요소 선택
  • not() : filter와 반대로, filter()인자로 받은 선택자에 해당하지 않는 요소 선택

jQuery - AJAX

AJAX란

AJAX : Asynchronous Javascript and XML

  • 전체 페이지를 다시 로드하지 않고 백그라운드에서 데이터를 로드하고 웹 페이지에 표시하는 기술
  • jQuery 는 AJAX를 쉽게 사용하기 위한 메소드들을 제공한다.

jQuery - AJAX load()

사용 형태 : $(*selector*).load(*URL,data,callback*);

  • url (필수) : 로드하고자 하는 url - load(”deom.txt #p1”) 처럼 선택자도 추가 가능
  • data (선택) : 요청과 함께 보낼 쿼리 문자열 key/value 쌍 지정
  • callback (선택) : 메소드가 완료된 후 실행할 함수 이름
    • 콜백 함수는 다음 매개변수를 가진다,.
      • responseTxt - 호출 성공시 결과 콘텐츠를 포함
      • statusTxt - 통신 상태를 포함
      • xhr - XMLHttpRequesst 객체를 포함
        $("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
      if(statusTxt == "success")
        alert("External content loaded successfully!");
      if(statusTxt == "error")
        alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
  });

jQuery - AJAX Get / Post

  • GET
    • $.get(URL, callback);
      • callback 함수는 요청이 성공하면 실행할 함수
    • $.post(URL, data, callback);
      • data는 요청과 함께 보낼 데이터를 지정
      • callback 함수는 요청이 성공하면 실행할 함수

jQuery Misc ( 기타 )

  • noConflict() 메소드

    • $ sign을 다른 라이브러리에서도 사용할 수 있기 때문에 $ sign에 대한 식별자 보류를 해지하는 메소드이다. $ 대신에 jQuery를 사용해주면 다른 라이브러리와 충돌없이 기능을 수행할 수 있다.

        $.noConflict();
  jQuery(document).ready(function(){
    jQuery("button").click(function(){
      jQuery("p").text("jQuery is still working!");
    });
  });

    • jQuery에 대한 참조를 다음과 같이 변환할 수도 있다.

        var jq = $.noConflict();
  jq(document).ready(function(){
    jq("button").click(function(){
      jq("p").text("jQuery is still working!");
    });
  });
  • filter() 메소드
    • 검색 filtering으로 유용하게 사용 가능

© 2021. All rights reserved.