1. JQUERY?
- Javascript Library이다.
2. Library?
- 자주 사용하거나, 직접 구현이 어려운 기능을 모아 놓은 program group으로 J-query 외에도 RequireJS,Prototype,AngluarJs, Backbone.등이 있음
3. J-Query 를 사용 하는 이유는?
1) 사용의 편리성이 있다.
자바스크립트의 경우,
var elem = document.getElementById( “demo” );
elem.addListener(“click”, function(){
alert( “hello, j-Query” );})
J-query로 바꾸면
$( “#demo” ).click( function(){
alert( “hello, j-Query” );});
2) Cross Browsing
- Java Script 는 Browser 에서 해석하므로 종류나 버전마다 표현이 안되거나 다르게 되는 경우가 있다.
- J-Query 에서는 내부적으로 Browser 마다 처리를 해 놓았기 때문에 신경 쓸 필요가 없다.
3) 다양한 Plugin
- J-Query 를 기초로 한 유용한 Plugin 이 많다.
- Bootstrap, J-query UI, Pagination 등
4. Selector
J-query에서는 css에서 사용하는 selector의 기능을 차용하여 원하는 요소를 쉽게 가져올 수 있다.
- $("p") : p태그인 요소
$("#btn"): 아이디가 btn인 요소
$(".btn"): 클래스가 btn인 요소
$("*"): 모든 element 선택
$(this): 현재 element 선택
$("p:first"): <p>태그 중에서 첫번째 element
$(“a[href]"): a 태그 중에서 href 속성이 있는 요소
$("a[target='_blank']"): a 태그 중에서 target 속성이 _blank 인 요소(안쪽에 큰따옴표 사용시 바깥쪽은 작은 따옴표)
5. event 등록
1). $(selector).click(function);
2). $(selector).on(“click”, function);
* On 으로 생성한 이벤트는 Off 를 통해 이벤트를 삭제 할 수 있다.
6. css()
- 비교적 단순한 스타일 적용에 활용
$(selector).css( “attribute” ); // 선택한 요소의 스타일 값을 받아온다.
$(selector).css( “attribute”,”value” ); // 선택한 요소의 스타일 값을 변경 한다.
Quiz. 문제 해결방법
Q1. 클릭했을때, 두번째 <P> tag만 배경색을 바꾸세요