1. JQuery란?
엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리입니다.
2. Hello World
이제 JQuery를 이용하여 Hello World를 띄워보겠습니다. 직접 서비스하는 경우에는 http://jquery.org 에서 jquery 소스코드를 다운로드합니다. 위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입합니다. 다른 방법으로는 구글의 자바스크립트 라이브러리를 사용하는 경우 아래의 소스와 같이 src를 포함시켜주면 됩니다.
<html>
<body>
<div class="welcome"></div>
<div class="welcome"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('.welcome').html('hello world! coding everybody!').css('background-color','yellow');
</script>
</body>
</html>JQuery는 달러($) 표시로 시작합니다. 달러대신에 JQuery를 쓸 수 있지만 편리하게 쓰기 위해 $를 사용합니다. 그리고 괄호가 열리고 여기에는 css의 셀렉터 문법이 들어갑니다. $('.welcome') 은 welcome이라는 클래스 명을 가지고 있는 html 엘리먼트들을 가지고 온다는 뜻입니다. 그리고 그 뒤에 .html()을 붙여주면, welcome안에 html안의 문장을 넣어주게됩니다.
또한 jQuery의 중요한 특징으로 뒤에 .css를 붙이는데, JQuery는 메소드가 리턴될 때 제어했던 대상을 return해줍니다. 그렇기 때문에 꼬리를 물어서 여러가지 메소드를 붙일 수 있습니다. 이런걸 chain이라고 부릅니다.
'JQuery' 카테고리의 다른 글
| [Jquery] 자주 사용하는 jquery예제 (0) | 2019.10.11 |
|---|---|
| [JQuery] 레퍼(wrapper)란? (0) | 2019.07.18 |
| [JQuery] .html() 문법 (0) | 2019.07.16 |
