바닥코딩
jQuery에 대해 본문
jQuery란?
개발을 하다보면 라이브러리라는 말을 많이 들어봤을 것입니다. 라이브러리는 쉽게 설명하자면 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효울을 높여주는 코드들의 집합? 이라고 생각하면 되는데 우리가 다룰 Jquery도 라이브러리에 해당합니다.
jQuery는 언어가 아닙니다. 구분 하자면 자바스크립트로 이루어진 내장 라이브러리입니다. 가끔 jQury가 많이 사용되어 지면서 언어로 오해를 하는 경우가 있는데 이는 맞지 않으며, jQuery의 가장 핵심적인 것을 기준으로 요약하자면 3가지로 들 수 있다.
- 엘리먼트를 선택하는 강력한 방법
- 선택하는 엘리먼트들을 효과적인 수단을 제공
- 자바스크립트 라이브러리
일단 가장 처음으로 jQuery 의 구조를 알아보겠습니다. 그전에 jQuery를 설치하기 위한 준비가 필요한데
jQuery Foundation
Supporting the advancement of the web through JavaScript The jQuery Foundation is now the JS Foundation For more information about our expanded vision to become the center of gravity for the entire JavaScript ecosystem, come visit us at https://js.foundati
jquery.org
에서 집 소스코드를 삽입하여도 되고 구글 라이브러리를 사용해서 작업할 수 있습니다.
일반 html 문장과 jQuery를 사용한 문장을 비교 하기 위한 코드를 작성해 보았습니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery_Practice</title>
<style type="text/css">
.yellowbox1{
background-color: yellow;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class ="yellowbox1">hello world! coding everyday</div>
<div class ="yellowbox2"></div>
<script type="text/javascript">
$('.yellowbox2').html("hello world! coding everyday").css('background-color', 'yellow');
</script>
</body>
</html>
위에 코드를 실행하면 아래와 같은 결과를 반환한다 div의 class에 직접 css를 적용한 것과 $로 시작하는 jQuery문법에 메소드를 통해 css와 정적데이터를 삽입하는 것이 같은 결과를 반환한다는 것을 알 수 있습니다. jQuery의 문법은 비교적 간단한 편이며 이는 jquery가 많이 대중화 되어있는 이유이기도 합니다.
기본형태는 $(제어대상).method(서술어) 가 됩니다 이 method 안 내용이 어떤 것이냐에 따라 html 테그 명이나 id, class등을 통해 해당 내용들을 바꿀 수 있습니다.
'JavaScript > JQuery' 카테고리의 다른 글
| 엘리먼트를 제어하는 법 (0) | 2020.03.09 |
|---|---|
| event (0) | 2020.03.09 |
| chain, traversing (0) | 2020.03.09 |
| 선택자 (0) | 2020.03.06 |
| [tool 소개]sublime Text3 (0) | 2020.03.06 |
