jQuery $ 문법 및 사용법 jQuery object

---

제이쿼리(jQuery) 문법

• 제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정 할 수 있다.

$(선택자).동작함수();

• 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자
• 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정
• $() 함수 : 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할
• $() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택 가능
• 이러한 $() 함수를 통해 생성된 요소를 제이쿼리 객체(jQuery object)
• 제이쿼리는 이렇게 생성된 제이쿼리 객체의 메서드를 사용하여 여러 동작을 설정 할 수 있음.

Document 객체의 ready() 메서드

• 자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행돼야 함
• 보통은 별다른 문제가 발생하지 않지만, 다음과 같은 경우에는 오류가 발생
  • 아직 생성되지 않은 HTML 요소에 속성을 추가하려고 할 경우
  • 아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우
    
    

function func() {
    addAttribute();  // 아이디가 "para"인 HTML 요소에 속성을 추가함.
    createElement(); // 아이디가 "para"인 HTML 요소를 생성함.
}

function createElement() {
    let criteriaNode = document.getElementById("text");
    let newNode = document.createElement("p");
    newNode.innerHTML = "새로운 단락입니다.";
    newNode.setAttribute("id", "para");
    document.body.insertBefore(newNode, criteriaNode);
}

function addAttribute() {
    document.getElementById("para").setAttribute("style", "color: red");
}

• 위의 예제에서 addAttribute() 함수는 아이디가 "para"인 HTML 요소에 새로운 속성을 추가하는 함수
• 또한, createElement() 함수는 아이디가 "para"인 HTML 요소를 생성하여 추가해 주는 함수
• 위의 예제에서는 아이디가 "para"인 HTML 요소가 생성되기 전에 해당 요소에 속성을 추가해 주는 addAttribute() 함수가 호출되므로, Uncaught TypeError가 발생하여 실행 중이던 스크립트는 중지될 것
• 만약 먼저 호출되는 addAttribute() 함수를 createElement() 함수 뒤에 호출하면, 정상적으로 동작할 것
• 웹 브라우저에서는 현재 HTML 문서에서 발생한 오류를 F12 버튼(개발자 도구)으로 확인 가능
• 자바스크립트에서는 Window 객체의 onload() 메서드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정

window.onload = function() {
    자바스크립트 코드;
};

• 마찬가지로 제이쿼리에서는 Document 객체의 ready() 메서드를 이용하여 같은 결과를 보장

$(document).ready(function() {
    $(선택자).동작함수();
});

• 또한, jQuery Team에서는 같은 결과를 보장하는 더욱 짧은 문법을 다음과 같이 제공

$(function() {
    $(선택자).동작함수();
});

• 다음 예제는 문서가 모두 로드되는 시점과 창이 모두 로드되는 시점의 차이를 보여주는 예제

$(document).ready( function() {

    $("#doc").text("문서가 전부 로드됐어요!");

});

$(window).load( function() {

    $("#win").text("창이 모두 로드됐어요!");

});

Reference

https://www.tcpschool.com/jquery/jq_basic_syntax

코딩교육 티씨피스쿨