jQuery 문법
Front-End/jQuery 2020. 1. 18. 12:39- jQuery 문법 -
jQuery를 사용하면 편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있다.
|
$( 선택자 ).동작함수( );
|
달러($) 기호는 jQuery를 의미하고, jQuery에 접근할 수 있게 해주는 식별자이다.
선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.
$( ) 함수
$( ) 함수는 선택된 HTML 요소를 jQuery에서 이용할 수 있는 형태로 생성해주는 역할을 한다.
$( ) 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있다.
이러한 $( ) 함수를 통해 생성된 요소를 jQuery 객체 (jQuery object)라고 한다.
jQuery는 이렇게 생성된 jQuery 객체의 메소드를 사용하여 여러 동작을 설정할 수 있다.
Document 객체의 ready( ) 메소드
자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다.
보통은 별다른 문제가 발생하지 않지만, 다음과 같은 경우에는 오류가 발생한다.
* 아직 생성되지 않은 HTML 요소에 속성을 추가하려고 할 경우
* 아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우
다음 예제는 아직 생성되지 않은 HTML 요소에 속성을 추가하는 예제이다.
|
function func( ) {
addAttribute( ); //아이디가 "para" 인 HTML 요소에 속성을 추가함.
createElement( ); //아이디가 "para" 인 HTML 요소를 생성함.
}
function createElement( ) {
var criteriaNode = document.getElementById("text");
var 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( ) 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.
출처
http://www.devkuma.com/books/pages/168