JQuery?

2021. 2. 8. 16:05

라이브러리란?

자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드

"CSS를 적용할 수 있으며 DOM을 쉽게 다룰 수 있다."

보통웹 페이지에서는 id 속성과 class 속성으로 지정한 HTML 요소에 javaScript에서 구현한 기능이나 효과를 추가합니다. (id는 html에서 고유한 이름 class는 html에서 고유하지 않은 집합의 이름)

HTML요소를 이렇게 조작하거나 바꾸는 작업을 DOM 조작이라고 함

jQuery?

엘리먼트를 선택하는 강력한 방법 제공
선택된 앨리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공
자바스크립트 라이브러리

jQuery를 사용해서 HTML 요소 추가

$('#books > ul.list').append('<li>Creative jQuery</li>

위의 코드에서는 CSS(#books>ul.list)와 HTML(<li>Creative jQuery</li> 이 함께 사용되는 것을 알 수 있습니다. 위 코드를 실행하면 HTML은 1번과 2번을 통해 다음과 같이변경 됩니다.

번경전

<div id = "books">
	<ul class ="list">
    	<li> Text of jQuery </li>
    </ul>
</div>

변경후

<div id = "books">
	<ul class ="list">
    	<li> Text of jQuery </li>
        <li> Create jQuery </li> //추가
    </ul>
</div>

코드를 적게 작성하므로 개발 시간을 단축할 수 있습니다.

JavaScript

버튼을 눌러 'Hello World'를 출력하는 코드

var button =documetn.getElementById('greeting'),
	sayHello =function(){
    	alert("Hello World");
     }; 
 if(button.addEventListener){
 	button.addEventListener('click',sayHello,false);
 }else if (button.attachEvent){
 	button.attachEvent('onclick',sayHello);
 }

jQuery

버튼을 눌러 'Hello World'를 출력하는 jQuery 코드

$('#greeting').on('click',function() {
	alert('Hello World!');\
 });

Hello world - 첫번째 jQuery

사용방법

1. 직접 서비스하는 경우

http://jquery.org에서 jQuery 소스코드를 다운로드한다.
위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입한다.

2. 구글의 자바스크립트 라이브러리를 사용하는 경우

http://code.google.com/intl/ko-KR/apis/libraries/devguide.html#jquery

<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>

'Web > jQuery' 카테고리의 다른 글

jQuery 기본 구문 설명 (0)	2021.02.09
jQuery CSS 스타일 변경하기 (0)	2021.02.09
jQuery.ready() 란 (0)	2021.02.04

WantAirpod