UI Laboratory

UI 개발을 위한 레퍼런스

INDEX

jQuery와 css와의 관계


jQuery는 특정노드를 찾기 위해 일종의 Query(질의)를 함수의 매개변수로 전달하며 이 매개변수가 우리가 알고 있는 css 선택자 개념과 일치한다.

$()의 정체


$()는 일종의 함수이다. $("div") 함수를 호출한 결과는 jQuery 기능이 담긴 확장 집합(wrapper set)이라고 하는 객체이다. 이 확장 집합은 NodeList 처럼 일종의 컬렉션 객체이며, length프로퍼티와 size()라는 메서드를 이용해 확장 집합 안에 들어 있는 요소의 개수를 알수있다. 이 개수의 의미는 확장 집합의 개수가 아닌 확장 집합 안에 들어 있는 Node 개수를 의미한다.

확장 집합 내부의 노드에 접근하기


종종 자바스크립트 DOM의 기능을 사용해야 할 때는 확장 집합에 들어 있는 노드에 접근해야 한다.

$divs = $("div")일 경우 다음과 같은 방법으로 특정 노드에 접근할 수 있다.

			$divs = $("div");

			//배열 방식으로 접근
			var div0 = $divs[0];
		
			$divs = $("div");

			//get()메서드를 이용
			var div0 = $divs.get(0);
		

get(0)과 divs[0]에서 반환되는 값은 jQuery와는 관련이 없는 DOM Node이다.

CDN(Content Delivery Network)을 이용한 jQuery 라이브러리 삽입


CDN이란 콘텐츠를 여러 서버에 분산 배치해서 콘텐츠를 전송하는 과정에서 발생하는 트래픽 집중 & 병목 현상 및 데이터 손실을 해결하기 위한 기술이다.

			//구글 Ajax API CDN
			
			//마이크로소프트 CDN
			
			//jQuery CDN
			
		

ready()함수


이 메서드는 DOM이 모두 로딩됐을 때 호출할 일종의 콜백함수를 전달받는다. 단 매개변수로 전달된 콜백함수가 실행되는 시점은 DOM만 로드됐을 뿐 image, swf와 같은 무거운 콘텐츠는 아직 로딩되지 않은 시점이다. 이것이 바로 window.onload 이벤트와 다른 점이다. window.onload는 DOM 뿐 아니라 웹페이지의 모든 내용이 로드된 시점에 발생하는 이벤트이다.

노드 다루기


자식 노드 찾기

			//1. 모든 자식노드 찾기
			//1-1. 텍스트 노드를 포함한 모든 자식 노드 찾기
			var $nodes1 = $("body").contents();
			alert("body의 자식 노드 개수는 ? "+$nodes1.size());
					
			//1-2. 텍스트 노드를 제외한 태그 노드 찾기  			
			var $nodes2 = $("body").children();
			alert("body의 자식 노드 개수는 ? "+$nodes2.size());
			
					
			//2. 자식노드에 하나씩 접근하기 
			var $nodes3 = $("#sample_page").children();
			for(var i=0;i<$nodes3.length;i++){
				//i번째 노드를 감싼 확장 집합을 구한다.
				var $node = $nodes3.eq(i);
				$node.css('border','4px solid #ff0000');

				//또는,
				//i번째 노드를 직접 구한다.
				var node = $nodes3.get(i); //또는 $nodes3[i]
				node.style.border = '4px solid #ff0000';
			}
			
			//3. 첫번째 자식 노드에 접근
			var $firstChild = $("body").contents(":first");
			var $firstChild = $("body").contents().first();
			var $firstChild = $("body").contents(":eq(0)");
			var $firstChild = $("body").contents().eq(0);
				
			//4. 마지막 자식 노드에 접근
			var $lastChild = $("body").contents(":last");
			var $lastChild = $("body").contents().last();
			var $lastChild = $("body").contents(":eq(9)");
			var $lastChild = $("body").contents().eq(9);
		

형제 노드 찾기

jQuery에서는 prev() 함수와 next() 함수를 이용해 각 이전 형제 노드와 다음 형제 노드에 쉽게 접근할 수 있다. 일반적으로 텍스트 노드를 제외한 일반 엘리먼트만 반환값으로 전달한다.

			var $content = $("#content");		
			
			// prev()를 이용해서 content노드의  형제 노드인 #header에 접근 
			$content.prev().css("border", "4px solid #ff0000");
			
			// next()를 이용해서 content노드의  형제 노드인 #footer에 접근
			$content.next().css("border", "4px solid #ff0000");
		

노드 생성 및 추가

노드를 생성하는 방법은 $()함수에 태그 정보가 담긴 HTML 문자열을 인자로 전달하면 노드가 생성됨과 동시에 노드를 감싸고 있는 확장 집합이 만들어 진다.

			var $page = $("#sample_page");
			
			//첫번째 영역에 추가
			$page.html("<p style='border:4px solid #ff0000'>추가내용1</p>"+$page.html());		

			//두번째 영역에 추가
			var $content = $("#content");
			var $div1 = $("<div style='border:4px solid #ff0000'></div>");	
			$div1.html("생성할 Node가 많은 경우,<span>어떤 방법을?</span> 사용해야 할까요?");
			$div1.insertBefore($content);

			//세번째 영역에 추가
			$page.html($page.html()+"<p style='border:4px solid #ff0000'>추가내용2</p>");	
		

노드 이동

			$header = $("#header");
			$header.css("border", "4px solid #ff0000");
			$("#content").append($header);
			//또는
			//$header.appendTo($("#content"));
		

텍스트 노드 생성 및 추가

jQuery에서는 텍스트 노드를 생성하는 기능은 제공하지 않으며 다음처럼 훨씬 간결하게 텍스트를 생성한다.

			$("#content").append("추가내용");
		

텍스트 노드의 내용 변경

jQuery에서는 Text 객체의 nodeValue 프로퍼티에 텍스트를 대입한 것과 같은 기능을 수행하는 text() 메서드를 제공한다.

			$("#content").text("내용이 변경되었습니다.");
		

스타일 다루기


스타일 속성값 설정

			$("#test_1").css({position:"absolute", left:"100px", color:"#ff0000"});
			//또는
			$("#test_1").css({position:"absolute", left:100, color:"#ff0000"});		
		

left와 같은 위치 관련 스타일에는 "100px"와 같은 문자열 대신 숫자를 바로 사용할 수 있다.

스타일 속성 제거

			$("#test_1")[0].style.removeProperty("border");
			$("#test_1")[0].style.removeProperty("margin");		
		

jQuery에서는 스타일 속성을 제거하는 기능은 제공하지 않으므로 DOM 노드로 접근해서 자바스크립트에서 제공하는 메서드를 이용하여 속성을 제거한다.

속성 다루기


속성값 알아내기

			var $test1 = $("#test_1");
			
			//방법1
			$test1.attr("id");
			$test1.attr("data-value");

			//방법2
			$test1[0].id;
			$test1.get[0].data-value;
		

속성값을 알아낼 때도 jQuery와 자바스크립트 DOM을 함께 사용할 수 있다.

속성값 설정

			var $test1 = $("#test_1");
			
			//방법1
			$test1.attr("className", "myClass");
			$test1.attr("data-value", "new-data1");

			//방법2
			$test1.attr({className:"myClass", data-value:"new-data1"});
		

속성 제거

			var $test1 = $("#test_1");
			
			$test1.removeAttr("data-value");
		

스타일과는 달리 속성을 제거하는 removeAttr()이라는 메서드를 제공한다.

이벤트 다루기


리스너 추가

			//방법1
			$("#btn_1").bind("mouseover", function(e){
				...
			});
		
			//방법2
			$("#btn_1").mouseover(function(e){
				...
			});
		
			//방법3
			$("#btn_1").bind("mouseover click", function(e){
				...
			});
		

여러개의 이벤트를 동시에 등록할 수 있다.

			//방법4
			$("#btn_1").bind("mouseover.myEventGroup", function(e){
				...
			});
			$("#btn_1").bind("click.myEventGroup", function(e){
				...
			});
		

이벤트 리스너를 위와 같이 하나의 그룹으로 묶은 후 단 한번의 명령으로 등록된 모든 리스너를 제거할 수 있다.

bind
이벤트를 등록하는 가장 일반적인 방법
unbind
이벤트를 제거하는 가장 일반적인 방법
one
이벤트가 발생하는 경우 등록한 이벤트 리스너는 실행된 후 자동으로 제거된다. 즉, 이벤트 리스너가 오직 한번만 실행되게 하고 싶을 때 사용한다.
live
현재 문서에 존재하지 않는 요소, 즉 앞으로 생성될 수 있는 요소에게도 이벤트를 등록할 수 있다.
die
live로 등록한 이벤트를 제거하는 함수이다.

리스너 삭제

			//방법1
			$("#btn_1").bind("mouseover", on_Mouseover);
			$("#btn_1").mouseover(on_Mouseover);

			$("#btn_1").unbind("mouseover", on_Mouseover);
		
			//방법2
			$("#btn_1").bind("mouseover", function(e){
				...
			});

			$("#btn_1").unbind("mouseover");
		
			//방법3
			$("#btn_1").bind("mouseover.myEventGroup", function(e){
				...
			});
			$("#btn_1").bind("click.myEventGroup", function(e){
				...
			});
			$("#btn_2").bind("mouseout.myEventGroup", function(e){
				...
			});

			$("*").unbind(".myEventGroup");
		

이벤트를 등록할 때 그룹으로 묶은 경우 unbind() 메서드에 그룹 이름을 첫번째 매개변수로 전달하면 그룹에 해당하는 모든 이벤트를 제거할 수 있다. 다른 엘리먼트라 하더라도 그룹으로 묶어서 제어할 수 있다.

			//방법4
			$("#btn_1").unbind();
		

그냥 엘리먼트에 할당된 이벤트 리스너를 모두 지우고 싶을 때 사용한다.

이벤트 발생시키기

			var $btn_1 = $("#btn_1");
			var $btn_2 = $("#btn_2");
			
			$btn_1.bind("click",function(e){
				//1.이벤트 생성.
				var mouseEvent = jQuery.Event("click");
				//2.  이벤트 객체에 이벤트와 함께 실어서 보낼 데이터 추가.
				mouseEvent.clientX = 100;
				mouseEvent.clientY = 100;
				
				//3.이벤트 발생.
				$btn_2.trigger(mouseEvent);
			});
			
			$btn_2.bind("click",function(e){
				alert("click이벤트 발생 , target = "+e.target.id+", clientX = "+e.clientX+", clientY = "+e.clientY);
			});	
		

jQuery를 이용해 이벤트를 발생시키는 순서는 다음과 같다.

  1. 1. jQuery.Event() 함수에 발생시키려는 이벤트 객체 타입을 전달하면 해당 타입의 이벤트 객체가 생성된다.
  2. 2. 이벤트와 함께 실어서 보낼 데이터를 mouseEvent.보낼 데이터 키 = "데이터 값" 또는 jQuery.Event("click",{데이터키:"데이터 값" ...});과 같은 방식으로 설정한다.
  3. 3. 이벤트 초기화 작업은 하지 않아도 된다.
  4. 4. 끝으로 jQuery의 trigger라는 메서드의 매개변수로 전달해서 실행한다.

사용자 정의 이벤트 만들기

			var $btn_1 = $("#btn_1");
			
			$btn_1.bind("click",function(e){
				//1.이벤트 생성.
				var myEvent = jQuery.Event("myEvent")
				//2.  이벤트 객체에 이벤트와 함께 실어서 보낼 데이터 추가
				myEvent.data1 = "이 정보를 이벤트에 담아서 보내주세요.";
						
				//3.이벤트 발생.
				$btn_1.trigger(myEvent);
			});
			
			$btn_1.bind("myEvent",function(e){
				alert("myEvent 이벤트 발생 , target = "+e.target.id+", data1 = "+e.data1);
			});
		

jQuery.Event() 메서드에 일반 이벤트 타입 대신 사용자 정의 이벤트 타입을 할당한 후 추가로 이벤트에 담아 보낼 데이터를 넣어주기만 하면 된다.