jQuery개요

1. jQuery 개요

-개요

http://jquery.com/ jquery 사이트에서 jquery-1.6.2.min.js파일을 다운 받는다.

Eclipse - WebContent폴더 안에 폴더(ex:WebContent/data/js/)를 만들고 다운로드 받은jquery-1.6.2.min.js파일을 붙여 넣기 한다.(빨간색 x표시가 나도 무시해도 됨.^^)

Jquery를 사용하기 위해서 .jsp파일을 만들고 다음과 같이 js파일을 붙여넣기 한 경로를 지정해 준다.

<script type="text/javascript" src="<%=cp%>/data/js/jquery-1.6.2.min.js"></script>

-특징

DOM : 엘리먼트 셀렉터

DOM : HTML, XML을 제어할 목적으로 사용한다.

태그 : $(“a”), ${“div} //a, div를 제어하고 싶을 때 사용한다.

클래스 : $(“.클래스”), $(“태그.클래스명”)

ID : $(“#id) a document.getElementByid(“id”)

중첩구조 : $(“#id”).find(“li”)=>$(“#id li”)

-AJAX 지원

-Plugin 확장 지원

-단순화된 이벤트 처리

-브라우저별 호환성 지원

2. Core

Core는 jQuery의 핵심사항으로 jQuery()라고 사용하지만 축약어로 $()를 사용한다.

*jQuery 객체

- jQuery()/$()

jQuery(selector, context)

jQuery(element)

jQuery(elementArray)

jQuery(jQuery 객체)

jQuery(html)

jQuery(callback)

*jQuery(callback)/ $(callback)

$(document).ready(callback)의 단축형 : document, 화면상의 내용을 제어 하겠다.

== 웹이 화면에 보이기 직전에 보여주겠다.

$(document).ready(function(){ //$를 쓰면 다른 라이브러리와 충돌이 일어날 수 있다.

//소스

});

$(function(){

//소스

});

jQuery(document).ready(function(){

//소스

});

jQuery(function(){

//소스

});

3. Selectors(선택자)

//* : 모든 요소($(“*”)로 표현)

$("*").css("font-size","20pt"); //HTML문서내의 모든 요소를 찾아 폰트 크기를 20로 변경한다.

//ID ($(“#id”)로 표현)

$("#div1").css("border","3px solid red"); //ID가 div1인 요소를 찾아 테두리를 “3px solid red”로 변경한다.

//Element ($(“elementName”)로 표현)

$("p").css("color","blue"); // p 태그를 찾아 색상을 “blue”로 변경한다.

Class ($(“.className”)로 표현)

$(".test").css("color","green"); //클래스가 test인 것을 찾아 색상을 “green”로 변경한다.

//계층적(조상의 자손)

$("form input").css("border","2px solid blue"); //<form><input>인 것을 찾아 테두리가“2px solid blue”으로 변경한다.

//계층적(조상의 1단계 자손만)

$("#main>*").css("border","3px double red");//id = "main" 인 하위 1단계 자손만 테두리를 "3px double red"로 변경한다.

//앞뒤원소에 매치되는 뒤원소에 color="red" val="뭐냐"

$("label + input").css("color","red").val("뭐냐");

//컨텍스트 필터(contains : 저장한 텍스트를 포함한 경우)

:contains(text) -> 저장한 텍스트를 포함한 경우

:empty -> 자식을 가지지 않은 경우

:has(selector) -> 지정된 셀렉터를 갖는 모든 요소

:parent -> 부모

:animated : 현재 애니메이션이 적용되고 있는 엘리먼트를 선택

:button : 모든 버튼을 선택함(input[type=submit],input[type=reset],input[type=button])

:disabled : 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.

:enabled : 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.

:file : 모든 파일 엘리먼트를 선택함.

:header : 헤더 엘리먼트만 선택한다.

:hidden : 감춰진 엘리먼트만 선택한다.

:image : 폼 이미지를 선택한다.

:input : 폼 엘리먼트만 선택한다.

:not(filter) : 필터의 값을 반대로 변경한다.

:parent : 빈 앨리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.

:passwore : 패스워드 엘리먼트를 선택한다.

:reset : 리셋 버튼을 선택

:selected : 선택된 엘리먼트만 선택한다.

4. Attributes(속성)

//jquery에서 속성을 알아내고 싶을 때는 attr()을 사용한다.

var title=$("p").attr("title"); //p요소의 title의 속성을 가져옵니다.

//사용하지 않게 한다. 서버로 값이 넘어가지 않는다. attr( , ) : ()안의 콜론앞 부분이 속성이고 ()안의 콜론 뒷부분이 값이다.

$("#name").attr("disabled","disabled");

//속성을 제거 할때 사용한다.(removeAttr)

$("#name").removeAttr("disabled"); //id가 name준 속성 “disabled”를 제거한다.

//클릭하면 bk의 속성이 나타났다 사라졌다 하게 한다.

.$(this).toggleClass("bk");

//html()은 id가 div1인 요소의 소스를 보여준다.

var s = $("#div1").html();

val() : 값(value 속성)을 리턴 받는다.(괄호 속에 인자가 없으면)

val(“값”) : 값을 대입한다.

$("#name").val("자바"); //id가 name인 요소에 “자바”를 넣는다.

$("#city").val("busan"); //id가 city인 요소에 “busan”을 넣는다.

$("#hb").val(["축구","농구"]); //id가 hb인 요소에 축구, 농구를 선택한다.

$("#chk").val(["true"]); //배열인 요소는 [ ]을 사용하여 표현한다.

5. Manipulation(조작)

//hello가 p태그 안에 추가 된다.

$("p:first").append("<b>hello</b>"); //매칭된 원소에 주어진 내용 추가

//자바가 먼저 나오고 예제가 나온다.

$("span").appendTo("#div1"); //매칭된 원소의 내용을 주어진 원소에 추가(span태그에 있는 내용을 div에 추가하라.)

//#을 붙이지 않으면 태그, 붙이면 id가 된다.

//var s =$("#div1").text(); //text()는 문자열을 가지고 오는데 사용된다.

//var s=$("#div1").html(); //html()은 소스를 가져오는데 사용된다.

//alert(s);

$("p").prepend("<b>앱</b>");//매치되는 원소들의 맨앞에 추가

after(content) //매치되는 모든 원소 뒤에 추가

before(content) //매치되는 모든 원소 앞에 추가

insertAfter(content) //매치되어진 원소들을 주어진것에 매치되는 원소의 뒤에

insertBefore(content) //매치되어진 원소들을 주어진것에 매치되는 원소의 앞에

wrap(html) //매치되어진 원소를 주어진 html로 감싼후 객체 변환

replaceWith(content) //매칭된 원소를 주어진 내용과 치환

empty() : 매치되어진 모든것을 없앤다.

clone() //선택되어진 원소를 복사

6. Events

blur : 요소에 포커스를 잃을 경우에 발생하는 이벤트

bind : 이벤트 추가

unbind : 이벤트 제거

click : 마우스 클릭 시

chage :<input/><textarea/><select/>요소의 값 변경시 발생하는 이벤트이다.

dbclick :마우스를 더블 클릭했을 때

focus : 요소에 포커스 되었을 때 발생

hover : 마우스가 요소 위에 위치했을 때 발생하는 이벤트

keydown : 키 입력시 발생하는 이벤트이며, 모든 키에 대해 적용이 됩니다.

keypress : 키다운 이벤트와 동일하게 키 입력 시 발생이 되지만 enter, tab등의 특수키에는 이벤트가 발생되지 않습니다.

keyup : 키 입력 후 발생되는 이벤트

mousedown : 마우스 클릭 시 발생하는 이벤트

mouseenter : 선택한 요소의 영역에 마우스가 위치했을 때 발생되는 이벤트

mouseleave : 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트, 인터넷 익스플로러에서만 발생되는 이벤트지만 jQuery는 브라우저 관계없이 사용할 수 있도록 시뮬레이터 됩니다.

mousemouse : 선택한 요소에 마우스를 클릭 후 발생하는 이벤트

mouseout : 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트

mouseover : 선택한 요소에 마우스가 위치했을 때 발생하는 이벤트

mouseup : 마우스가 클릭 후 발생되는 이벤트

ready : DOM이 모두 준비 되었을 대 발생하는 이벤트

resize : resize될 경우 발생하는 이벤트

select : 선택한 개체를 마우스를 통해 선택 하였을 때 발생하는 이벤트

scroll : HTML문서가 스크롤 되었을 때 발생하는 이벤트

submit : submit이 일어날 때 발생하는 이벤트

hover(over, out) : 요소에 마우스가 이동 했을 때(over),

요소에서 마우스가 벗어났을 때(out)

$("#btn2").hover(

function(){$(this).addClass('hover');},

function(){$(this).removeClass('hover');}

);

//이벤트가 한번 실행되고 해제

$("#btn3").one("click",function(){

alert("..........");

});

[출처] jquery정리|작성자

[출처] jQuery 개요 |작성자 와키