[자기계발]/유튜브로 코딩배우기
[생활코딩] jQuery란? 자바스크립트 라이브러리 jQuery 문법 알아보자.
슈총총
2021. 6. 5. 00:18
반응형
라이브러리(library)란?
자주 사용하는 코드를 재활용, 유통하여 재사용할 수 있는 형태로 가공된 프로그래밍 효율을 높여주는 코드들이다. JavaScript 라이브러리에는 prototype, jQuery, YUI 등이 있다. 여기에서는 jQuery에 대해서 배워볼 것이다.
1. jQuery란?
- jQuery는 자바스크립트의 생산성을 10배 이상 향상시키주는 자바스크립트 라이브러리이다.
- html 엘리먼트를 제어하는 것이 JS 역할인데, 그러려면 내가 제어하고자 하는 엘리먼트를 선택해야 한다. 그 선택을 하기쉽도록 혹은 한 번에 선택할 수 있도록 해주는 등 여러 방법을 제공 하는 것이 jQuery이다.
- jQuery는 파생된 라이브러리를 가지고 있다.
- jQuery UI는 jQuery 기반의 GUI 라이브러리이다.
- 이것을 이용해 윈도우 어플리케이션과 같은 기능성의 UI를 만들 수 있다.
- jQuery Mobile도 있는데 이것은 모바일용 웹app을 만드는데 도움이 된다.
jQuery 사용방법
- https://jquery.com/download/ 에서 jquery 소스코드를 다운로드 한다.
다운로드한 파일을 자바스크립트 파일에 넣는다. - 위의 사이트에서 Google CDN을 찾는다.
링크를 src에 넣는다. 밑의 코드는 CDN을 넣었다.
jQuery 특징
- jQuery는 $ 혹은 jQuery를 맨 앞에 써서 시작한다.
- ( )으로 열고 닫는다.
<html>
<body>
<div class="welcome"></div>
<div class="welcome"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$('.welcome').html('hello world! coding everybody!').css('background-color','yellow');
</script>
</body>
</html>- welcome이라는 클래스명을 가지고 있는 html 엘리먼트들을 가져온다는 뜻
- .html을 붙이면 .welcome이라는 클래스가 가지고 있는 엘리먼트들에게 html에 대한 method를 이용해서 'hello world! coding everybody!' 라는 텍스트를 출력해준다.
- 하나의 엘리먼트만 제어하는 것이 아니라 이 셀렉터에 해당되는 엘리먼트들에게 전체적으로 'hello world! coding everybody!' 라는 텍스트를 컨텐츠 영역에 세팅할 수 있게 된다는 것이다.
- .html은 jQuery가 제공하는 api 이다.
- .css라는 메소드로 첫 번째 인자로 background-color, 두 번째 인자로는 yellow 라는 값을 전달했다.
- $('.welcome')에 해당되는 엘리먼트들에게 css의 속성값을 주는데 백그라운드 컬로로 yellow 값으로 지정하라.
jQuery의 중요한 특징
- 중간에 html이라는 method가 껴있어도, 뒤에다 점을 붙여 css를 사용할 수 있다.
- jQuery가 제공하는 모든 method들은 그 method가 리턴될 때, 그 method가 제어했던 대상을 리턴해준다.
- 그렇기 때문에 꼬리에 꼬리를 물면서 계속 뒤에다 여러가지 method를 붙여넣을 수 있다. 사슬처럼 얽혀있다고 해서 체인(chain)이라고 한다.
jQuery는 주어와 서술어로 구분되어 있다.
- 주어는 제어하는 대상 $로 시작해서 그 인자로 제어 대상을 전달한다.
- 거기에는 css 셀렉터로 해당되는 문자열이 들어올 수도 있다.
- .을 찍고 method1()을 하게 되면, 이 제어 대상의 method1()의 어떤 명령을 한꺼번에 내릴 수가 있다. 마치 코딩을 글쓰듯 하는 것이다.
| jQuery문법 | |
| $(제어대상) | .method1().method2() |
| 주어 | 서술어 |
2. JavaScript VS jQuery
css 부분
<html>
<head>
밑의 JS 코드 넣기 or jQuery 코드 넣기
<style type="text/css">
#navigation li {
list-style:none;
float:left;
padding:5px;
}
#navigation {
cursor:pointer;
}
#navigation .selected {
background-color:red;
color:white;
}
</style>
</head>
<body>
<ul id="navigation">
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
<li class="selected">jQuery</li>
<li>PHP</li>
<li>mysql</li>
</ul>
</body>
</html>- list-style을 none 으로 해주면 ● 이 점이 안뜬다.
- float를 left 로 해주면 element 들이 일렬로 나열된다.
- navigation element 중에서 class 명이 selected 인 경우가 있다면 background-color를 red / 폰트 color를 white로 한다는 뜻이다.
- element에 있는 값이 클릭을 될 때마다 selected값은 클릭된 element로 변경된다.
JavaScript 사용 30줄
<script type="text/javascript">
function addEvent(target, eventType,eventHandler, useCapture) {
if (target.addEventListener) { // W3C DOM
target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
} else if (target.attachEvent) { // IE DOM
var r = target.attachEvent("on"+eventType, eventHandler);
}
}
function clickHandler(event) {
var nav = document.getElementById('navigation');
for(var i = 0; i < nav.childNodes.length; i++) {
var child = nav.childNodes[i];
if(child.nodeType==3)
continue;
child.className = '';
}
event.target.className = 'selected';
}
addEvent(window, 'load', function(eventObj) {
var nav = document.getElementById('navigation');
for(var i = 0; i < nav.childNodes.length; i++) {
var child = nav.childNodes[i];
if(child.nodeType==3)
continue;
addEvent(child, 'click', clickHandler);
}
})
</script>- 어디서부터 실행됐는가를 찾아라 => addEvent 라는 함수가 젤 먼저 실행되었다.
- 이 함수의 첫 번째 인자로 window가 전달됐고, 두 번째 인자로 load 라는 문자가 전달됐다. 세 번째 인자로는 함수가 전달됐다.
- window 객체는 브라우저 자체를 의미하는 객체이다.
- load 이벤트가 전달 됐다는 것은 window 객체가 load 이벤트를 발생했을 때(웹페이지에 있는 이미지, 리소스 같은 다운로드를 끝냈을 때) function의 로직을 호출해준다는 뜻이다.
addEvent가 무엇일까?
- 맨 위에 정의 되어있다.
- element 첫 번째 인자는 target, eventType,eventHandler, useCapture 이렇게 있다.
- 첫 번째 라인에는 if문이 들어가고 target.addEventListener가 들어간다.
- target은 첫 번째 인자이고, 밑에서 호출될 때 window가 호출 됐다. (window.addEventListener)가 된다.
- 그리고 if 문으로 이것이 true 인지 false인지를 체크하고 있다.
- JS에서 어떤 객체가 있고 그 객체가 가지고 있는 속성이 있는데 그 속성이 만약에 정의가 되어 있지 않다면
IF문의 인자로 전달했을 때 false가 된다.
target.addEventListener 를 if문에 대입했다는 것은?
- target 이 context에서는 window. window 객체에 .addEventListener 가 존재하느냐 않느냐 라는 것을 체크한다.
있다면 target.addEventListener 라는 method를 실행한다. - // W3C DOM은 인터넷 익스플로어를 제외한 대부분의 브라우저가 addEventListener라는 api를 제공한다라는 뜻
- 그 다음으로 else if 가 나오는데 그 인자로 target.attachEvent가 나온다.
- 이 뜻은 window가 target.attachEvent 라는 하는 method를 가지고 있는지 없는지 체크하는 것이다.
- // IE DOM은 인터넷 익스플로어 용이다.
=> 브라우저 마다 서로 지원하는 api method가 다르기 때문에, if문이 사용자가 현재 사용하고 있는 브라우저가 크롬인지, 스파이폭스인지, 인터넷 익스폴로어 인지에 따라 다른 로직들을 실행해주는 역할을 한다. 이런부분 때문에 jQuery를 쓰는 것이다.
addEvent(window, 'load', function(eventObj) {
var nav = document.getElementById('navigation');- id값이 navigation인 엘리먼트를 nav 변수에 대입한다라는 뜻이다.
- 자연스럽게 nav안에는 ul이 담겨 있는 것이다.
for(var i = 0; i < nav.childNodes.length; i++) {
var child = nav.childNodes[i];
if(child.nodeType==3)
continue;
addEvent(child, 'click', clickHandler);
}
})- .childNodes는 특정한 자식 엘리먼트들을 배열에 하나씩 담아가지고 그 담겨진 배열을 return해주는 것이다.
- .lengh로 그 자식이 몇 개 있는지 알 수 있다. 자식의 숫자만큼 i가 1씩 증가하면서 for문을 반복한다.
- child 변수 선언 => i에는 for문이 실행될 때마다 0부터 1씩 증가하는 값이 들어간다.
- i값으로 0을 주게되면, childNodes라는 배열안에 첫 번째 원소가 html 이 되고 1을 주면 CSS 이런식으로 이어간다.
- if조건문 안의 nodeType으로 특정한 엘리먼트의 성격을 체크할 수 있다.
- 이는 일반적인 엘리먼트인지, 의미없는 공백 문자인지 체크한다.
- 사실 ul과 li 사이에는 '공백'이라는 데이터가 있는데 만약 값이 3(공백)이라고 한다면 continue를 통해 스킵을 한다.
- addEvent를 다시 호출한다.
- li element들이 child에 담겨져있다.
- 누군가 child를 click했을 때, clickHandler가 실행이 되면서 밑의 clickHandler의 함수 로직이 실행된다.
function clickHandler(event) {
var nav = document.getElementById('navigation');
for(var i = 0; i < nav.childNodes.length; i++) {
var child = nav.childNodes[i];
if(child.nodeType==3)
continue;
child.className = '';
}
event.target.className = 'selected';
}- continue 까지는 위의 내용과 같다.
- className에 공백(' ')을 대입한 것이다. 모든 클래스를 해제 한다는 뜻이다.
- event라는 어떤 객체를 전달하는데 그 객체에 target이라는 속성이 있다.
- 여기에는 사용자가 클릭한 element에 대한 값이 들어가 있는 것으로, 사용자는 event.target이라는 api를 통해서 현재 clickHandler가 어떤 li가 클릭됨으로써 발생한 eventHandler인가 라는 사실을 알 수 있게 되는 것이다.
- 거기다가 className으로 selected를 주어서 li 엘리먼트의 class에 selected가 들어간 것이다.
jQuery 사용 단 4줄.
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$('#navigation li').live('click', function() {
$('#navigation li').removeClass('selected');
$(this).addClass('selected');
})
</script>$('#navigation li').live('click', function() {~~
- $으로 시작한다. id 값이 navigation인 li 엘리먼트들을 가져온 것이다.
- .live라고 하는 jQuery가 제공하는 일종의 이벤트 api를 실행하는 것이다.
- 첫 번째 인자는 click을 준다. 각각의 element들(HTML, CSS, javascript, jQuery, PHP, mysql)이 클릭되었을 때 function의 내용이 호출이 된다.
- 위의 addEvent, if문 등의 복잡한 절차들이 생략이 되어있다. jQuery가 해주는 것이다.
$('#navigation li').removeClass('selected');
- li 해당하는 element들을 가져온다.
- .removeClass는 모든 li element에 selected 라는 클래스 형을 가지고 있는 엘리먼트들의
모든 selected값을 제거해준다는 뜻이다. - 이걸 통해 암시적으로 for 문을 돌리는 것
$(this).addClass('selected');
- 클릭한 element를 this라고 인식한다.
- addClass 인자로 전달된 selected 가 class명으로 셋팅 되는 것이다.
팁
$('#navigation li').removeClass('selected');
$(this).addClass('selected');
이 두 줄보다,
$(this).addClass("selected").siblings("li").removeClass("selected");
한 줄이 더 좋겠지요.
그리고 가급적이면 이벤트는 on(), off()로 처리하는 게 좋습니다.
$('#navigation li').click(function() ... 보다
$('#navigation li').on("click", function ... 로 하는 게 타이핑 조금 더 하더라도 좋은 습관입니다.
왜냐하면 나중에 필요에 의해서 click 말고도 keydown 등의 이벤트를 같이 적용해야 할 때,
$('#navigation li').on("click keydown", function ... 이렇게 이벤트명만 쉽게 추가할 수 있기 때문이죠.
$(document).ready(function(){$('#navigation li').on("click", function() {$('#navigation li').removeClass('selected');$(this).addClass('selected');})})DOM들을 불러오기 전이라 on을 쓰게되면 ready를 써줘야할것 같네요 script가 위쪽에있기때문에
jQuery 1.7에 와서, .live() 함수는 사용이 중지되고, .on() 함수로 대체되었습니다. (이벤트연결 기능)
중요한 사항이니 꼭 참고하세요!!
간단하게는 위에서부터 순차적으로 실행되는데, Head에 장문의 Script를 선언하게되면 웹페이지 그리는 중에 멈추고 스크립트를 다 해석한뒤에 화면을 그리게되어, 화면이 늦게 그려질 수가 있어서 대부분 script는 </body> 이전에 선언하는게 좋습니다~ 자세히 공부해보고 싶으시면 웹 랜더링(파싱)이나 Javascript, HTML, css의 역할 등 보시면 될 것같아요~
http://d2.naver.com......361
JAVASCRIPT 기본 문법 시리즈
[생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교)
반응형