jQuery
jQuery란
- 제이쿼리는 오픈소스 기반의 자바스크립트 라이브러리
- 자바스크립트를 더욱 쉽게 활용할 수 있게 함
- 짧고 단순한 코드로 웹 페이지에 다양한 효과 및 연출을 적용
- 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리
jQuery 문법
- $로 시작한다. jQuery를 의미
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#msgid").html("This is Hello World by jQuery").css('background-color', 'red');
});
</script>
This is Hello World by HTML
<div id="msgid"></div>
</body>
method().method2()와 같은 형태를 체인이라고 한다.
javascript로 작성했을 때
<body>
<script>
window.onload = function()
{
console.log('html이 준비되면 실행');
document.getElementById('pp').style.color = 'pink';
}
function fn_click(color)
{
document.getElementById('pp').style.color = color;
}
</script>
<p id="pp">Hello World : Javascript</p>
<button id="red" onclick="javascript:fn_click('red')">red</button>
<button id="blue" onclick="javascript:fn_click('blue')">blue</button>
</body>jQuery로 작성했을 때
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script>
window.onload = function()
{
console.log('html이 준비되면 실행');
$('#pp').css('color', 'pink');
}
function fn_click(color)
{
$('#pp').css('color', color);
}
</script>
<p id="pp">Hello World : jQuery</p>
<button id="red" onclick="javascript:fn_click('red')">red</button>
<button id="blue" onclick="javascript:fn_click('blue')">blue</button>
</body>
같은 결과를 도출하지만 jQuery로 작성하면 더 간결하다.
$ 대신 jQuery를 사용해도 되지만 귀찮음.
레퍼
레퍼란
-
레퍼란 사전적 의미로 '포장지'를 나타내며 무언가를 감싼다는 의미.
붉은색 표시가 레퍼. -
인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환
-
엘리먼트 오브젝트 또는 CSS 스타일 선택자 둘 중 하나가 들어감.
레퍼의 안전한 사용
- $(엘리먼트)와 jQuery(엘리먼트)는 같은 의미지만 $를 사용하는 다른 라이브러리들과의 충돌때문에 다음과 같은 방법을 사용한다.
-
그냥 jQuery를 사용한다.
-
$를 함수의 지역변수로 선언하여 외부의 타 라이브러리와의 $ 충돌 예방
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<ul class="obj>
<li>HTML</li>
</ul>
<ul class="obj">
<li>javascript</li>
</ul>
<script>
// 선택자에 의한 대상 지정
(function($) {
$('ul.obj').click(function(){
$('li', this).css('background-color','yellow');
})
})(jQuery)
// 엘리먼트에 의한 대상 지정
$(document.body).css('background-color','blue');
</script>
</body>
선택자
- jQuery wrapper에는 CSS 선택자가 위치할 수 있는데, 이를 통해서 제어하려는 엘리먼트를 빠르고 정확하게 지정할 수 있다.
자바스크립트 DOM 기반의 태그, 아이디, 클래스 선택자
<body>
<div>별 하나의 사랑과 별 하나의 추억과</div>
<div>별 하나의 사랑과 별 하나의 추억과</div>
<div>별 하나의 사랑과 별 하나의 추억과</div>
<p id="myid">아이디</p>
<p class="myclass">클래스</p>
<p class="myclass">클래스</p>
<p class="myclass">클래스</p>
<script>
var divArr = document.getElementsByTagName("div");
for(var i = 0; i < divArr.length; i++)
{
divArr[i].style.color = "blue";
}
var myid = document.getElementById("myid");
myid.style.backgroundColor = "yellow";
var myclassArr = document.getElementsByClassName("myclass");
for(var i = 0; i < myclassArr.length; i++)
{
myclassArr[i].style.color = "white";
myclassArr[i].style.backgroundColor = "green";
}
</script>
</body>제이쿼리 기반의 태그, 아이디, 클래스 선택자
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div>별 하나의 사랑과 별 하나의 추억과</div>
<div>별 하나의 사랑과 별 하나의 추억과</div>
<div>별 하나의 사랑과 별 하나의 추억과</div>
<p id="myid">아이디</p>
<p class="myclass">클래스</p>
<p class="myclass">클래스</p>
<p class="myclass">클래스</p>
<script>
$('div').css("color", 'blue');
$('#myid').css("background-color", 'yellow');
$('.myclass').css('backgroundcolor', 'green').css('color', 'white');
</script>
</body>
Chain
제이쿼리와 자바스크립트의 코드 비교
제이쿼리
$('#tutorial').attr('href','http://jquery.org').attr('target', '_blank').css('color','')vs
자바스크립트
tot.setAttribute('href','http://jquery.org');
tot.setAttribute('target', '_blank');
tot.style.color = 'red';Chain의 장점
- 코드가 간결해진다.
- 인간의 언어와 유사하게 사고의 자연스러운 과정과 일치
(주어 + 서술어 + 서술어 ...) : 여러개의 서술어가 가능 - 제이쿼리 관점 : 나는 밥을 먹으면서 TV를 보았다.
자바스크립트 관점 : 나는 밥을 먹는다. 나는 TV를 본다.
탐색(traversing)
탐색이란
- Chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법
- 너무 복잡한 chain은 코드의 가독성을 떨어뜨릴 수 있다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<ul class="first">
<li class="foo">list item1</li>
<li>list item2</li>
<li class="bar">list item3</li>
</ul>
<ul class="second">
<li class="foo">list item1</li>
<li>list item2</li>
<li class="bar">list item3</li>
</ul>
<script>
$('ul.first').find('.foo').css('background-color', 'green').css('color', 'yellow').end()
.find('.bar').css('background-color', 'red')
</script>
</body>
이벤트(Event)
이벤트란
- 시스템에서 일어나는 사건을 의미
- 자바스크립트나 제이쿼리에게 이벤트란 브라우저에서 일어나는 사건을 의미(클릭, 마우스 이동, 타이핑, 페이지 로딩 등)
- 이벤트 발생 시 작동할 로직을 시스템에게 알려두면 이벤트 발생 시 로직이 호출
제이쿼리의 이벤트
- 크로스 브라우징 문제를 해결
- bind로 이벤트 핸들러 설치, unbind로 제거
- trigger로 이벤트 핸들러 강제로 실행
- click, ready와 같이 다양한 이벤트 헬퍼 제공
- live를 이용하면 현재 존재하지 않는 엘리먼트에 이벤트 핸들러를 설치 가능
이벤트 예제(bind, unbind, trigger)
ready
- 문서의 UI가 렌더링이 완료되면 발생하는 이벤트
bind
- 이벤트를 설치할 때 사용하는 메소드
$('#click_me').bind('click',clickHandler);- bind 함수는 버튼 요소와 이벤트 핸들러를 연결시킨다.
unbind
$('#click_me').unbind('click',clickHandler);- unbind 함수는 해당 이벤트 핸들러 연결을 무력화 시킨다.
trigger(방아쇠)
$('#click_me').trigger('click');- 트리거(trigger)로 해당 요소의 이벤트를 호출한다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<script>
function clickHandler()
{
alert("thank you");
}
$(document).bind('ready', function(){
$('#click_me').bind('click', clickHandler);
$('#remove_event').bind('click', function(e){
$('#click_me').unbind('click', clickHandler);
})
$('#trigger_event').bind('click', function(e){
$('#click_me').trigger('click');
})
})
</script>
<button id="click_me" value="click me">Click me</button>
<button id="remove_event" value="unbind">Unbind</button>
<button id="trigger_event" value="trigger">trigger</button>
<!-- bind는 묶는다. -->
</body>
엘리먼트
append(), after(), wrap(), remove(), before(), html(), text()...
알고 쓰자!