[jquery] 탐색메서드, 이벤트, 효과

※ 탐색(Traversing) 메서드

 - 개체를 찾거나 필터하는 작업은 대부분 셀렉터를 통해서 이루어지지만, 1차적으로 셀렉터를 통해서 필터링을 하고 난 다음에, 그 결과 집합 내에서 추가적으로 필터링하거나, 추가 탐색하거나, 다른 결과 집합과 합치거나 하는 등의 작 업을 하기 위해서는 트래버스 메서드가 유용하게 사용됨

 

▶ 추가 필터링 관련 메서드

$(document).ready(function(){
		$('tr:first').css('font-style','italic');
		$('tr:even').css('font-size','25px');
		$('tr:eq(1)').css('color','orange');
		$('tr:gt(4)').css('color','blue').css('font-weight','bold'); // 메서드체이닝
        $('th:contains("제목2")').css('color','red');
	});

 

 

 ▷ end() 메서드

    - eq() 메서드를 사용한 경우에는 end()라는 메서드의 도움을 받아 이전 상태로 돌아갈 수 있다는 장점이 있다

    - 방금 일어난 작업 직전의 상태로 되돌림

 ▷ filter() 메서드

    - 셀렉터에 의한 1차적 검색 집합에 대해서 다시 추가적으로 필터링을 하 고 싶은 경우에 사용하는 API 메서드

$('div').filter(':odd')
			.eq(0).addClass('pink')
			.end()  //filter(':odd')
			.eq(1).addClass('orange')
			.end()  //filter(':odd')
			.css('border-width','5px');

 

 

▶ 찾기와 관계된 API들

 

 

▷ add(expr)

    - 셀렉터에 의해 1차적으로 검색된 결과 집합에 추가적인 검색 집합 을 합치는(add) 역할을 함

$("div")
.css("border", “3px solid red")
.add("p")
.css("background", "yellow");

  = > 모든 div와 p는 노란 배경색을 갖지만, 붉은 테두리는 div만 갖 게 됨

 

 

 

▷ find(expr)

    - 현재 검색된 요소의 자식을 대상으로 추가적인 검색을 수행

    - 검색된 결과 집합에서 찾는 것이 아니라, 결과 집합 내의 각 요소의 "자식"에게서 찾는 것

$(function(){
		$('div').eq(1)
			.siblings().css('border-width','3px') //자신을 제외한 형제요소들
			.end()  //eq(1)
			.next().css('background','cyan') //바로 다음 형제요소
			.end()
			.nextAll().css('color','red'); //다음의 모든형제요소들

		//div의 자식에서 p를 찾아 테두리 주고, span도 검색결과에 추가하여 노랑배경색 주기
		$('div').find('p').css('border','1px solid red')
			.add('span').css('background','yellow');
			
		$('div p, span').css('background','yellow');
		$('span').parent().css('font-size','1.5em')
	});

 

 

 

---

※ 이벤트 관련 메서드

 

 

▷ ready 문서 객체가 준비 완료되면

▷ load 윈도우를 불러들일 때 발생

▷ unload 윈도우를 닫을 때 발생

▷ scroll 윈도우를 스크롤할때 발생

▷ error 에러가 있을 때 발생

 

 

 

▶ jQuery가 제공하는 이벤트 관련 메서드

 

 

▷ on() : 이벤트를 연결함

$(selector).on (이벤트 이름, 이벤트 리스너);

  = 이벤트 리스너 안에서 this 키워드는 이벤트가 발생한 객체를 의미함

 

 

▷ off() : 이벤트를 제거함

[1] $(selector).off(); 해당 문서 객체와 관련된 모든 이벤트를 제거
[2] $(selector).off(eventName); 해당 문서 객체의 특정 이벤트와 관련된 모든 이벤트를 제거
[3] $(selector).off(eventName, function); 특정 이벤트 리스너를 제거

$(function(){
		$('button').click(function(){
			$(this).html('클릭됨');
			alert('이벤트 발생');
			
			$(this).off();
		});

  = > 한번만 실행되고 이벤트가 사라짐

 

 

 

▷ trigger()

    - 코드를 사용해서 특정 이벤트를 일으키기 위한 메서드

         ㄴex ) 실제로 사용자가 클릭 액션을 하지 않았음에도, 클릭을 한 것처럼 이벤트를 일으키는 코드

$("#MyBtn").trigger("click");

 

 

 

▷ hover()

   - mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결함

	$('table tr:eq(0)').nextAll().hover(function(){
			$(this).addClass('hover');
		}, function(){
			$(this).removeClass('hover');			
		});

 

▷ preventDefault() - 기본 이벤트를 제거함

    stopPropagation() - 이벤트 전달을 제거함

     - jQuery는 return false 를 사용하면 이 두 가지를 함께 적용 한 것으로 인식함

$('a').click(function(event) {
$(this).css('background-color', 'pink');
        //event.stopPropagation();
        //event.preventDefault();
return false;
});

 

 

 

▶ 자주 사용되는 이벤트

 

▷ submit - submit 버튼 누르면 발생

▷ reset - reset 버튼 누르면 발생

 

▷ foucs - 입력양식에 초점을 맞추면 발생

▷ blur()   - 입력양식에 초점이 사라지면 발생 ▽

$('.infobox').blur(function(){
			if($(this).val().length<1){
				$(this).parent().find('.error').show();
			}else{
				//$(this).next().hide();				
				$(this).next('.error').hide();				
			}
		});

 

 

▷ select() - 입력양식을 선택할 때 발생 

      - (input[type="text"]) / textarea 태그 제외

▷ change()

  - 입력 양식의 내용을 변경할 때 발생

$(function(){
		$('#chkAll').change(function(){
        $('#chkItem').find('input[type=checkbox]')
				.prop('checked', this.checked);			
		});
	});

 

 

 

▷ keypress 글자가 입력될 때 발생 (한글지원 XX)

▷ keyup 키보드를 뗄 때 발생

$(function(){
		$('#txtPwd').keyup(function(){
			$('#lblError').text('');
		});
		$('#txtPwdConfirm').keyup(function(){			
			if($('#txtPwd').val()!=$(this).val()){
				$('#lblError').html('<b>비밀번호가 틀립니다.</b>');
			}else{
				$('#lblError').html('<b>비밀번호가 맞습니다.</b>');				
			}
		});		
	});

 

 

▷ click 마우스를 클릭할때 발생

▷ mouseover 마우스가 요소 위에 올려지면 발생

     - 이벤트는 이벤트 버블링을 적용함

▷ mouseout 마우가 요소에서 나갈 때 발생

▷ mouseenter 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생 ▽

$('.div3 button').mouseenter(function(){
			$(this).css('background','orange');
		}).mouseleave(function(){
			$(this).css('background','');
		});

 

 

▷.prop()

     - 지정한 선택자를 가진 첫 번째 요소의 속성값을 가져오거나 속성값을 추가함

 .prop( propertyName )   속성값을 가져올 때

.prop( propertyName, value )  속성값을 추가할 때

$( document ).ready( function() {
    $( '#chkAll' ).click( function() {
        $('#chkItem').children().prop( 'checked', this.checked );
    } );
} );

 

 

 

▶ effect 관련 메서드

$(selector).method()
$(selector).method(speed)  효과를 진행할 속도를 지정(밀리초,slow, normal, fast)
$(selector).method(speed, callback)  효과를 모두 완료하고 실행할 함수

 

 

▷ hide() 대상이 되는 모든 엘리먼트를 보이지 않도록 함

▷ show() 대상이 되는 모든 엘리먼트를 보이도록 함

$('#btn1').click(function(){
			$('img:eq(1)').show(2000, function(){
				alert('show animation complete!');
			});	
		});

 

▷ toggle() 대상 엘리먼트가 화면에 보이는 경우 보이지 않게 만들 고, 보이지 않는 경우 보여지도록 변경

$('button:eq(0)').click(function(){
			$('img:gt(1)').toggle();
		});

 

 

▷ slideUp( speed [, fn] ) 

  - 대상 엘리먼트의 style 속성값이 "display:block" 인 경 우 상단방향으로 speed 수치의 시간안에 서서히 사라 지게 함

▷ slideDown( speed [, fn] )

  - 대상 엘리먼트의 style 속성값이 "display:none" 인 경우

     상단에서부터 하단으로 speed 수치의 시간안에 서서히 보여지도록 함

$("#div1 img").slideDown(2000);

▷ slideToggle( speed [, fn] )

  - 대상 엘리먼트의 style 속성값이 "display:none" 인 경우 slideDown을 실행시키고,

                                             "display:block" 일 경우 slideUp을 실행시킴

$("img").slideToggle(2000);

 

▷ fadeIn, fadeoutn( speed [, fn] ) - 불투명도

 

 

▷ animate() : 사용자 지정 효과를 생성

$(selector).animate(object)
$(selector).animate(object, speed)
$(selector).animate(object, speed, callback)

   => 첫 번째 매개변수인 객체에 입력할 수 있는 속성 : opacity width, height margin, padding left, right, top, bottom

 

 

▷ stop() : 현재 진행중인 애니메이션 효과를 멈춤

 

---

 ▶UI 관련 플러그인

 

대부분의 jQuery 플러그인은 http://plugins.jquery.com/ 에서 확인 가능

http://jqueryui.com/ 최신버전의 jQuery UI 관련 플러그인 다운로드