jQuery
- DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다. 라이브러리란 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어다.
jQuery의 사용법
- jQuery를 사용하기 위해서는 일단 js파일을 업로드 해야하는데, 사용하기 간편한 CDN으로 jQuery를 사용하겠다.
CDN은 Content Delivery Network의 약자로 전세계에 있는 서버로부터 데이터를 가져와 사용하는 것이다. 다운로드를 하지않아도 되는 장점이 있다.
https://code.jquery.com/ --> 여기서 최신버전의 소스를 다음과 같이 얻을 수 있다.
# 위의 자바스크립트 코드를 다음과 같이 <body>태그에 위치하면 된다.
# 다음과 같이 소스를 cope and paste하고 <script> jQuery( document ).ready(function( $ ){ jQuery 코드}); << 이부분은 당장은 jQuery를 사용하려면 기본적으로 써야할 부분으로 알고있으면된다.
# 실행결과를 분석해보면 <body>태그에 prepend(접두에 붙이다)인하여 <h1>Hello world</h>가 <body>접두에 가있는 것을 알 수 있다.
jQuery 제어 대상 찾기
- Query를 이용하면 DOM보다 훨씬 효율적으로 필요한 객체를 조회할 수 있다.
jQuery의 기본문법
$('li').css('color', 'red');
$()는 jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴한다. 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다. 위의 그림에서 css는 선택자에 해당하는 객체들의 style에 color:red로 변경한다. 다음 예제를 통해서 jQuery의 기본문법에 대해 살펴보자.
# 1,3,5는 DOM을 이용하여 style을 한것이고 2,4,6은 jQuery를 이용하여 style을 한것이다. 한 눈에봐도 jQuery의 가독성과 간편함이 느껴진다.
# 2번과4번은 위의 기본문법설명과 비슷하고 6번을 한번보자. jQuery함수를통해 active를 id로하는 태그의 jQuery 객체를 만들고 style에 color:red를 준다 또 red를 준 객체를다시 리턴하고 underline(강조)를 해준다. 이런식으로 객체를 계속반환하여 사용할 수 있는 것이다. 이러한 작업을 통해 중복을 피할수 있는데 이것을 체이닝(chaining)이라고도 한다.
'Foundation > - Javascript' 카테고리의 다른 글
| (DOM)제어 대상 찾기 (0) | 2018.02.18 |
|---|---|
| (BOM)창 제어 (0) | 2018.02.17 |
| (BOM)Navigtor 객체 (0) | 2018.02.17 |
| (BOM)Location 객체 (0) | 2018.02.17 |
| Object Model (0) | 2018.02.17 |
