-
jQuery 예제 및 기본 패턴Web/jQuery 2018. 9. 5. 10:50
jQuery는 JavaScript Query의 약어로 자바스크립트 라이브러리이다. 자바스크립트만으로 작성하기 복잡한 기능들에 대해 함수로 구현해 둔 것이다.
특정 태그의 값을 읽어오기 위해 자바스크립트에서 사용했던 번거로운 절차를 줄여준다는 말이다.
자바스크립트에서는 문서의 모든 태그들을 객체화 해 브라우저에 DOM(Document Object Model) 형태로 저장한다.
다음과 같이 문서를 DOM 형태로 변환하는 작업을 렌더링이라 한다. 이를 통해 각각의 태그들을 객체화 해 이들에 하나하나 접근하고 제어할 수 있다. 객체화 된 태그들을 자바스크립트에서는 Element라 칭한다.
예를 들어 h1 태그의 Text 값을 읽어오고 싶다면
var h1 = document.getElementByTagName("h1")[0];
var text = h1.innerText();
다음과 같이 사용해야 했다. 하지만 jQuery를 사용하면
$("h1").text();
만으로 가져올 수 있는 것이다!!
이로써 웹페이지를 동적으로 제어하기가 더욱으로 간편해졌다. 여기서 동적이란 의미는 사용자의 Action(제어)에 따라 브라우저의 화면이 변할 수 있다는 이야기이다. 대표적인 것이 자기소개서를 작성할 때 + 버튼을 누르면 추가 입력 할 수 있도록 하는 것이다.
또한 기존에는 브라우저마다 표준화가 되어 있지 않아 같은 기능이라도 구현 방법이 상이해 각기 다른 자바스크립트 코드를 작성해야 했지만 jQuery에서는 함수들이 브라우저에 구애받지 않도록 작성되어 있어 이제는 웹 개발에 필수적인 라이브러리가 되었다. 가장 기본적으로 자바스크립트의 콜백함수 개념을 사용해 문서를 제어한다.
※모든 예제는 아톰(atom)으로 코드 작성했고, 오페라 브라우저를 통해 확인했다. html 문서 작업이 굉장히 편하기 때문에 사용을 권하고, 브라우저는 크롬이나 오페라를 권장한다. 인터넷 익스플로러에서는 같은 결과가 나오지 않는 경우가 굉장히 많을 것이다. ( 브라우저들의 DOM 작성 방법이 표준화되지 않았기 때문)모든 태그들을 객체화 해 브라우저에 DOM(Document Object Model) 형태로 저장하는 작업 렌더링이라 한다.
ready() 함수를 통해 렌더링의 종료를 기다린 뒤 익명 function 호출해 원하문서를 원하는대로 편집하는 방식이다.
중요한 점은 jquery 파일 경로 지정이다. 예제에서는 html 파일과 같은 폴더에 두었기 때문에 상대경로로 src를 "./ " 으로 설정했다. jquery 파일이 다른 곳에 있다면 그곳까지의 경로를 입력해줘야 한다.<!DOCTYPE html> <html> <head> <title>jQuery Adventures</title> <meta charset="utf-8"/> <!-- jQUery 로드하기 Selector --> <script type="text/javascript" src="./jquery-3.1.1.min.js"></script> <script type="text/javascript"> // 페이지 렌더링 후 h1 엘리먼트 텍스트 가져와 alert 호출 // document : Javascript에서 문서 자체를 가리키는 객체 // .ready(); 사용자에게 보여줄 준비가 되었을 때 (렌더링이 끝났을 때) $(document).ready(function() { // $("h1") // 객체화 되어있는 h1 Element 가져오기 var text = $("h1").text(); alert(text); // alert 창 뜨면 프로그램 중단된다. 눌러야 다음 코드 수행됨 // 에러 메시지는 브라우저의 Console창에서 확인 가능 $("p").text("나는 민우이다."); }); </script> </head> <body> <h1>Where do you want to go?</h1> <p>Plan your next adventures</p> </body> </html>주석에 자세한 설명이 있으니 이해해보도록 하자. 여기서 중요한 부분은 text 함수이다. 이 함수는 Getter와 Setter 두가지 역할을 매개변수에 따라 달리 처리한다.
위에 있는 var text = $("h1").text(); 에서는
"h1 태그에 있는 Text 값을 가져와라" 라는 의미의 Getter이다.
아래 있는 $("p").text("나는 민우이다."); 에서는
"p 태그의 Text 값을 '나는 민우이다'로 수정해라" 는 의미의 Setter이다.
자바와 비교해 러프하게 사용되고 있음을 느꼈다. 해당 html 파일을 저장한 경로 찾아가 실행하면alert으로 h1 태그의 내용이 출력되고,
확인 버튼을 누르면 p 태그의 값이 변경된다.
alert이 수행되면 다이얼로그 창이 나타나면서 이후 코드를 중단한다. 따라서 alert이 사라지지 않은 위의 화면에서는 p태그의 값이 바뀌지 않은 상태인 것이다.'Web > jQuery' 카테고리의 다른 글
jQuery 마우스(mouse), 키보드(keyboard) 이벤트 제어 (0) 2018.09.05 jQuery 클릭이벤트 다루기 (this, parent, closest) (0) 2018.09.05 jQuery append, prepend, after, before (0) 2018.09.05 jQuery PSEUDO Classes, Dom Traversing (0) 2018.09.05 jQuery 셀렉터(Selector) 예제 (0) 2018.09.05
