jQuery
- 2006년 John Resig가 제작하여 발표한 1세대 javaScript Library.
- jquery.com에서 무료로 배포
- write less, do more - 적게 쓰고 많은 일을 하기위해 개발된 JS Library
- 단순화한 형태로 가독성 향상과 개발의 효율성을 고려하여 제작됨
- 웹 표준 기반으로 개발(모든 웹 브라우저에서 동작 - cross browsing)
- CSS의 selector를 그래도 도입하여 사용.
- AJAX(Asynchronous JavaScript & XML)의 단순화 ,,
- 배포판은 압축버전(min파일)과 비 압축버전 두가지를 제공함 (직접 다운받아 사용, CDN 사용)
D
CDN(Content Delivery Network)을 통해서 배포
접속자가 존재하는 지리적인 위치에서 가장 가까운 서버에서 파일을 다운로드하는 기술.
AJAX, event, effect, DOM ,plug-in 의 기술을 제공함.
plug-in: 외부개발자가 개발하여 제공하는 라이브러리.
사용법
1.CDN이나 다운로드 받을 파일을 외부 파일 방식으로 연결해서 사용함
<script src="사용할 파일 주소"> </script>
2. <script>태그를 열어서 코드 작성
jQuery 코드를 사용할 수 있다.
jQuery문법)
$ : jQueryObject임, jQuery 에서 모든 기능을 제공하는 객체.
$("selector").jquery에서 제공하는 함수(function() { //이런형태는 first class function 이기에 구현가능
코드 정의 , , ,
} ) ;
jQuery로딩
-document 로딩 : HTML문서 <body>태그의 태그 정보가 로딩되면 jquery가 실행됨
//<body>의 하위태그가 어떤 태그가 있는지만 로딩되면 실행됨
문법)
$(document).ready(function(){ //document.ready는 생략가능함== $(function() {} ) 이런 형태로 많이 씀.
});
-window 로딩: HTML문서 <body>태그에서 사용되는 모든 객체가 로딩되면 jQuery가 실행됨.
document로딩보다 속도가 느리다. => 잘 사용하지 않는다.
문법)
$(window).load(function() {
}) ;
jQuery selector
-CSS의 selector와 같다 => tag를 찾을 때 사용한다.
id selector
가장 빠른건 id selector이다 ,, 특정 태그 하나를 찾을 때 사용한다.
$("#id명").기능(function() {
});
class selector
여러개의 태그를 찾을 때 사용한다.
$(".클래스명").함수(function() { });
tag selector
정의되는 모든 태그를 찾을 떄 사용한다
$("태그명").기능( function() { } );
multiple selector
정의되는 모든 태그를 찾을 떄 사용한다
$("selector , , , ").기능(function() {} );
attribute(name) selector
속성=값 의 형태를 가진 모든 태그를 찾을 때 사용
$("[속성명=' 값 ' ] ").기능(function() {} );
sub selector
특정 구조의 하위 태그를 찾을 때 사용함.
$("부모태그명>자식태그명 , , ,") .기능(function() {} )
//behavior selector => 지원하지 않는다. =>함수로 처리한다
//$("#msgDiv:hover").hide();
$("#msgDiv").hover(function(){
$("#msgDiv").hide();
})
출력
html() , text() 를 사용함.
원하는 태그에 출력할 수 있다
$("selector").html("출력값"); // html은 innerHTML 속성과 같다.
출력값에 HTML 태그가 존재하면, HTML태그를 해석해서 출력해준다.
$("selector").text("출력값");
출력값에 HTML태그가 존재 해도 태그를 해석하지 않고 문자열 그대로 보여준다
CSS함수
selector로 선택된 대상 태그에 stylesheet를 설정하거나
태그에 설정된 style 값 얻기
var 변수명 =$("selector").css("속성명");
태그에 style 값 설정.(여러 개의 속성을 설정해야 한다면 함수를 여러번 호출하면 된다. )
$("selector").css("속성명","값")
class속성 사용
emded방식 <style> 으로 선언된 stylesheet 코드에서 class 속성을 jQuery함수로 참조하여 사용하는방식.
여러개의 스타일 코드를 정의하기 편리하다.
1.class selector로 style에 정의
<style>
클래스명{디자인코드}
</style>
2. jQuery함수에서 addClass를 사용
$("selector") //디자인을 적용할 놈 .addClass("클래스명");
기존에 적용된 class삭제
$("selector").removeClass("클래스명")
jQuery에서의 Event Handling
사용자의 동작이 있을 때 그 동작에 대한 대비코드를 만들고 실행하는 것.
문법)
on함수.
이벤트 함수 두가지로 설정 가능
on함수
$(selector).on("이벤트종류", 무기명함수(){ });
클릭이벤트 예시 : $(selector).on("click",function() {} );
이벤트함수
$(selector).이벤트함수(무기명 함수() { } );
클릭이벤트 예시 : $(selector).click(function() {} );