알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
jQuery란? 본문
jQuery란?
엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는
자바스크립트 라이브러리입니다.
- 엘리먼트는 HTML 의 요소 들입니다. 예를 들면 java script 에서 사용 했던 document.getElementsByTagName,
document.getElementsByClassName,document.getElementById 을 통해 선택 했던 기능과 똑같지만 더강력하게 찾을수 있는
방법과 이를 javascript 보다 더욱 효율적으로 제어할수 있는 방법을 제공하는 라이브러리 입니다.
<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 라이브러를 가지고 와야합니다.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
부분이 구글 JQuery 라이브러리를 가지고 부분으로써 JQuery를 사용하기 전에 반드시 적어 주어야 합니다.
크롬 개발자 도구로 보면
<div class="welcome"></div> 부분이
<div class="welcome" style="background-color: yellow;">hello world! coding everybody!</div>
이렇게 변했습니다. 이것은 JQuery 라이브러리를 통해 welcome 클래스 를 선택하고 엘리먼트를 제어를 한것 간단한 예제입니다.
JQuery 기본 문법
$(제어대상).제어수단().제어수단();
$('.welcome').html('hello world! coding everybody!').css('background-color','yellow');
$('.welcome') : css 선택자 문법으로 html 엘리먼트을 선택합니다.
.html('hello world! coding everybody!') : 선택된 엘리먼트의 내용을 hello world! coding everybody! 로 입력합니다.
.css('background-color','yellow') : 선택된 엘리먼트의 css 속성을 변경합니다.
JQuery 문법에서 보면 $(제어대상).제어수단() 뒤에 다시 .제어수단()을 사용합니다. 그이유는 JQuery 라이브러리는 꼭 선택한 객체를
다시 리턴을 하기 때문에 뒤에 계속해서 .제어수단() 을 사용 할수 있습니다.
이러한 성격을 일컬어 체이닝 이라고합니다. 계속 연결되기 때문이죠 .
.제어수단() = method 영어로 메쏘드라 불립니다.
'Web > JQuery' 카테고리의 다른 글
| [jQuery]엘리먼트 제어 (0) | 2017.08.23 |
|---|---|
| [javascript,jQuery] 이벤트란? (0) | 2017.08.23 |
| [jQuery] Chain이란? (0) | 2017.08.23 |
| JQuery 선택자 (0) | 2017.08.22 |
| javascript vs JQuery (0) | 2017.08.22 |
