JQUERY 자료

HMLT&CSS&JS/jQuery

Quick API Reference :  http://oscarotero.com/jquery/

 

jQuery 속성선택자

 

요소[속성]	특정 속성을 가지고 있는 문서 객체를 선택함
요소[속성=값]	속성 안의 값이 특정 값과 같은 문서 객체를 선택함
요소[속성~=값]	속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택함
요소[속성^=값]	속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택함
요소[속성$=값]	속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택함
요소[속성*=값]	속성 안의 값이 특정 값을 포함하는 문서 객체를 선택함

 

 

사용 예)

<inuput type="text" />

 

$('input[type=text]').val("텍스트 값추가"); 

 

 

 

1. jQuery 기본 필터 선택자

 

요소:odd	홀수 번째에 위치한 문서 객체르 선택함
요소:even	짝수 번째에 위치한 문서 객체를 선택함
요소:first	첫 번째 위치한 문서 객체를 선택함
요소:last	마지막에 위치한 문서 객체를 선택함

 

사용 예)

<table> 

<tr><th>과일명 </th> <th>당도</th> <tr>

<tr><td>사과 </td> <td>2</td> <tr>

<tr><td>딸기 </td> <td>3</td> <tr>

<tr><td>수박 </td> <td>4</td> <tr>

<tr><td>멜론 </td> <td>2</td> <tr>

</table>

$('tr:odd').css('background', '#F9F9F9');

$('tr:event').css('background', '#9F9F9F');

$('tr:first').css('background', '#333333').css('color','#FFFFFF');    // 배경색 / 글자색

2. jQuery 입력 양식 필터 선택자

 

[요소]:button	input 태그중 type 속성이 button인 문서 객체와 button 태그를 선택함
[요소]:checkbox	input 태그중 type 속성이 check인 문서 객체를 선택
[요소]:file	input 태그중 type 속성이 file인 문서 객체를 선택
[요소]:image	input 태그중 type 속성이 image인 문서 객체를 선택
[요소]:password	input 태그중 type 속성이 password인 문서 객체를 선택
[요소]:radio	input 태그중 type 속성이 radio인 문서 객체를 선택
[요소]:reset	input 태그중 type 속성이 reset인 문서 객체를 선택
[요소]:submit	input 태그중 type 속성이 submit인 문서 객체를 선택
[요소]:text	input 태그중 type 속성이 text인 문서 객체를 선택
[요소]:checked	체크된 입력 양식을 선택함
[요소]:disabled	비활성화된 입력 양식을 선택함
[요소]:enabled	활성화된 입력 양식을 선택함
[요소]:focus	초점이 맞춰져 있는 입력 양식을 선택함
[요소]:input	모든 입력 양식을 선택함(input , textarea , select , button 태그)
[요소]:selected	option 객체 중 선택된 태그를 선택함

 

 

사용 예) $("부모태그">"자식태그")

<select>

<option>사과 </option>

<option>딸기 </option>

<option>수박 </option>

<option>멜론  </option>

</select>

$('select > option:selected').val();   // select 로 선택된 값이 찾기 

 

 

3. jQuery 함수 필터 선택자

[요소]:animated	애니메이션 중인것 / ":not(:animated)" => 애니메이션중이지 않은것
[요소]:contains(문자열)	특정 문자열을 포함하는 문서 객체를 선택함
[요소]:eq(n)	n번째에 위치하는 문서 객체를 선택함
[요소]:gt(n)	n번째 초과에 위치하는 문서 객체를 선택함
[요소]:lt(n)	n번째 미만에 위치하는 문서 객체를 선택
[요소]:has(h1)	h1 태그를 가지고 있는 문서 객체를 선택
[요소]:not(선택자)	선택자와 일찌하지 않는 문서 객체를 선택함
[요소]:nth-child(3n+1)	3n+1번째에 위치하는 문서 책체를 선택함
[요소]:hidden	hidden 인것을 선택
[요소]:visible	visible 인것을 선택

 

 

사용 예)

<table> 

<tr><th>과일명 </th> <th>당도</th> <tr>

<tr><td>사과 </td> <td>2</td> <tr>

<tr><td>딸기 </td> <td>3</td> <tr>

<tr><td>수박 </td> <td>4</td> <tr>

<tr><td>멜론 </td> <td>2</td> <tr>

</table>

$('tr:eq(0)').css('background', '#000000').css('color', 'White');

$('td:nth-child(3n)').css('background', '#454545');

$('td:nth-child(3n+1)').css('background', '#333333').css('color','#FFFFFF');    // 배경색 / 글자색

 

 

4. jQuery 어트리뷰트 기반으로 요소 선택

- $("img[alt])                 // 이미지태그에 alt 속성이 있는것을 선택

- $("div[id~="name"])    //  DIV태그에 아이디값이 "name"포함하는 모든것

[attr]	특정 어트리뷰트를 가지고 있는 요소와 일치 하는것
[attr=val]	지정되 어트리뷰트가 특정 값을 가지는 요소와 일치
[attr!=val]	지정된 어트리뷰트나 값을 갖지 않은 요소와 일치
[attr^=val]	지정된 어트리뷰트가 특정 값으로 시작하는 요소와 일지
[attr$=val]	지정된 어트리뷰트가 특정 값을 끝나는 요소와 일찌
[attr~=val]	공백과 함께 특정 값을 포함하는 요소와 일치

 

 

 

 

 

 

jQuery 배열 

 

$.each(array ,     function(index,item){ }) ;	(배열 , 함수(배열인덱스, 배열 인덱스 값))   // 함수를 배열겟수만큼 반복실행
$(selector).each(array ,      function(index,item){ }) ;	선택한 속성.each(배열 , 함수(배열인덱스, 배열 인덱스 값))  // 함수를 배열겟수만큼 반복실행

 

 

 

 

jQuery 메서드 (문서 객체 다루기) 

 

addClass()	문서 객체의 클래스 속성을 추가 함. => $('선택').addClass('정의한 클래스이름');
removeClass()	문서 객체의 클래스 속성을 제거 함. => $('선택'). removeClass ('삭제할 클래스이름');
arrt()	속성과 관련되 모든 기능을 수행함.  1. 이미지태그의 경로 속성값 알아내기    => $('img').attr('src');  2. 속성 값추가   => $(selector).attr(속성이름 , 속성값);  => $(selector).attr(속성이름  , function( 속성각각의 index값  ,attr ){} );  => $(selector).attr(object);    => $('<img />').attr('src', 'image.jpg').appendTo('body'); // body 에 img태스생성  => $('<img />' , {src:''image.jpg, width:350, height:250}).appendTo('body');
removeAttr(name)	문서 객체의 속성을 제거 함.  => $('h1').removeAttr('data-index') // h1태그의 data-index 속성제거
css()	스타일과 관련된 모든 기능 수행  1. 스타일 속성값 가져오기    => $('h1').css('color')  // h1 태그의 색상값   2. 속성 값 추가   => $(selector).css(name , value);   => $(selector).css(name , function(속성 각각의 index값 ,style){} );   => $(selector).css(object);
html()	문서 객체 내부의 글자와 관련된 모든 기능을 수행함 (html 태그인식)  1. 값 가져오기   => $('h1').html();   // 맨처음 h1 태그 값만 출력 2. 값 추가  => $(selector).html(value);  => $('div').html('<h1> 내용  </h1>');   // 태그인식
text()	문서 객체 내부의 글자와 관련된 모든 기능을 수행함 1. 값 가져오기    =>  $('h1').text();  // 모든 h1태그 값을 출력   2. 값 추가  => $(selector). text (value);  => $('div'). text ('<h1> 내용  </h1>');   // 정규표현식 으로 표현
remove()	특정 문서 객체를 제거.  => $('h1').first().remove();    // 첫번쩨 h1 삭제
empty()	특정 문서 객체의 후손을 모두 제거 함.  => $('div').empty();             // div 자식 객체까지 삭제
$()	문서 객체를 생성함   => $('<h1></h1>');  => $('<h1></h1>').html('내용');  => $('<h1></h1>').html('내용').addendTo('body');    // 태그와 내용을 body 에추가
$(a).appendTo(b)	a를 b의 뒷 부분에 추가함. (태그안)  => $('img').first().appendTo('body');   // 첫번째이미지를 body 안 맨뒤로 보냄
$(a).prependTo(b)	a를 b의 앞 부분에 추가함. (태그안)
$(a).insertAfter(b)	a를 b의 뒷에 추가함.  (태그 밖)
$(a).insertBefore(b)	a를 b의 앞에 추가함.  (태그 밖)
$(a).append(b)	b를 a안의 뒷 부분에 추가함.
$(a).prepend (b)	b를 a안의 앞 부분에 추가함.
$(a).after(b)	b를 a의 뒷에 추가함.
$(a).before(b)	b를 a의 앞에 추가함.
$(a).wrapAll(b);	b를 a의 안에 추가함.
clone()	문서 객체를 복사  $('div').append( $(h1) ).clone());   // h1 태그를 div 태그안으로 복재

 

 

 

 

jQuery 이벤트 

 

이벤트 객체속성

event.pageX	브라우저의 화면을 기준으로 한 마우스의 X좌표 위치
event.pageY	브라우저의 화면을 기중으로 한 마우스의 Y좌표 위치
event.preventDefault()	기본 이벤트를 제거함
event.stopPropagation()	이벤트 전달을 제거함

 

 

이벤트 메소드

$(document).ready()	html 문서가 다불러와지면 실행
bind()	이벤트를 연결함  => $(selector).bind(eventName, function(event){} );  => $(selector).bind(object);
unbind()	bind() 메서드를 사용한 이벤트 연결 제거  => $(selector).unbind();  => $(selector).unbind(eventName);  => $(selector).unbind(eventName, function);
delegate()	현재 또는 미래에 존재하는 문서 객체에 이벤트를 연경함    (version:1.4.3*)
undelegate()	delegate() 메서드를 사용해 연결한 이벤트를 제거함   (version:1.4.3*)
live()	현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결함
die()	live() 메서드를 사용해 연결한 이벤트를 제거함  => $(selector).die()  => $(selector).die(eventName)  => $(selector).die(eventName , function)
one()	이벤트를 한번만 연결함
on()	이벤트를 연결함, 아래 이벤트열결을 대체함   ( delegate 대체함 version:1.7 )  => bind() :       $(selector).on(eventName , eventHandler)  => live() :        $(document).on(eventName , selector, eventHandler)  => delegate() : $(selector).on(eventName , selector , eventHandler)
off()	이벤트를 제거함  => unbind() :       $(selector).off(eventName[, eventHandler])  => die() :            $(document).off(eventName , selector[, eventHandler])  => undelegate() : $(selector).off(eventName , selector[, eventHandler])
toggle(function(event){}, ... , function(event){} )	click 이벤트를 여러 이벤트 핸들러를 번갈아가며 실행할 수있게 연결함
hover(mouseenter , mouseleave)	mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결함
trigger()	이벤트를 강제 발생   => $(selector).trigger(eventName)  => $(selector).trigger(eventName, data)

 

 

마우스 이벤트

click	마우스를 클릭할 때 발생함.
dblclick	마우스를 더블클릭할 때 발생함.
mousedown	마우스 버튼을 누를 때 발생함.
mouseup	마우스 버튼을 뗄 때 발생함.
mouseenter	마우스 요소의 경계 외부에서 내부로 이동할 때 발생. (자기자신만 이벤트)
mouseleave	마우스 요소의 경계 내부에서 외부로 이동할 때 발생. (자기자신만 이벤트)
mousemove	마우스를 움직일 때 발생함.
mouseout	마우스가 요소를 벗어날 때 발생함.    (버블링)
mouseover	마우스를 요소 안에 들어올 때 발생함.(버블링)

 

 

키보드 이벤트

keydown	키보드가 눌러질 때 발생함.
keypress	글자가 입력될 때 발생함.
keyup	키보드가 떼어질 때 발생함.

 

윈도우 이벤트

ready	문서 객체가 준비를 완료함.
load	윈도우(문서 객체)를 불러들일 때 발생함.
unload	윈도우(문서 객체)를 닫을 때 발생함.
resize	윈도우의 크기를 변화시킬 때 발생함.
scroll	윈도우를 스크롤할 때 발생함.  => $(window).scroll(function(){ });
error	에러가 있을 때 발생함.

 

 

입력 양식 이벤트

change	입력 양식의 내용을 변경할 때 발생함.
focus	입력 양식에 초점을 맞추면 발생함.
focunsin	입력 양식에 초점이 맞춰지기 바로 전에 발생함.
focusout	입력 양식에 초점이 사라지기 바로 전에 발생함.
blur	입력 양식에 초점이 사라지면 발생함.
select	입력 양식을 선택할 때 발생함(input[type=text] 태그와 textarea 태그 제외).
submit	submit 버튼을 누르면 발생함.
reset	reset 버튼을 누르면 발생함.

 

 

 

간단한 이벤트 종류

 

blur	focus	focusin	focusout	load
resize	scroll	unload	click	dblclick
mousedown	mouseup	mousemove	mouseover	mouseout
mouseenter	mouseleave	change	select	submit
keydown	keypress	keyup	error	ready

 

 

 

$(select).methodName(function(event){ }); 

 

 

 

jQuery effects 

 

메서드

show()	문서 객체를 크게 하며 보여줌.
hide()	문서 객체를 작게 하며 사라지게 함.
toggle()	show() 메서드와 hide() 메서드를 번갈아 실행함.
slideDown()	문서 객체를 슬라이드 효과와 함께 보여줌.
slideUp()	문서 객체를 슬라이드 효과와 함께 사라지게 함.
slideToggle()	slideDown() 메서드와 slideUp() 메서드를 번갈아 실행함.
fadeln()	문서 객체를 선명하게 하며 보여줌.
fadeout()	문서 객체를 흐리게 하며 사라지게 함.
fadeToggle()	fadeln() 메서드와 fadeOut() 메서드를 번갈아 실행함.
animate()	사용자 지정 효과를 생성함.   ( opacity , height , width , top , bottom , left , right , margin , padding )  => $(selector).animate(object);  => $(selector).animate(object , speed);  => $(selector).animate(object , speed , easing);  => $(selector).animate(object , speed , easing , callback);
clearQueue()	큐의 내용을 제거 함.
stop()	효과와 애니메이션을 정지함.  => $(selector).stop()  => $(selector).stop(clearQueue)   => $(selector).stop(clearQueue , goToEnd)
delay()	큐에 있는 명령을 잠시 중지함.  => $(this).delay(500).animate({ left:500 }, 'slow' )

 

 

1. $(selector).method();

2. $(selector).method(speed);                            // 밀리초 단위의 숫자나 문자열 ( slow, normal , fast ) 

3. $(selector).method(speed , callback);             // callback 효과를 모두 완료한 후에 실행할 함수를 지정

4. $(selector).method(speed , easing , callback);// 기본(linear , swing ) , easing플러그인 설치.