[jQuery] 엘리먼트의 속성값을 array로 가져오는 방법

Published on: 2013.11.14 14:17 by krespo
<ul>
	<li itemid='a'>아이템1</li>
	<li itemid='b'>아이템2</li>
<ul>
jQuery에서 Selector를 통해 dom element를 가져오게되면 하나의 element를 가져오던, 여러개의 element를 가져오던간에 항상 array형태로 돌려주게 된다. 예를 들어 $("li") 를 셀렉트 하면 jQuery는 Array 형태로 선택된 엘리먼트를 리턴해 주게 된다. 만약 이때 li의 속성으로 들어가 있는 itemid의 리스트를 가져오려면 어떻게 해야 할까?
$("li").attr("itemid")
로 속성값을 array로 받을 수 있을것 같지만 첫번째 검색된 엘리먼트의 itemid 속성을 리턴해 준다. 그러면 다른 방법으로
var tempArray = new Array();
$("li").each(function(){
	tempArray.push($(this).attr("id"));
});
정도로 코딩할수 있겠다. 위에서 사용한 each는 loop문으로서 검색된 li를 한번씩 돌면서 하나하나씩 데이터를 가져오는 방식으로 그닥 효율성 있게 보이지 않는다. 그래서 jQuery에서 지원하는 method인 $.map$.makeArray를 통해 선택된 속성의 값을 array형태로 가져와 보겠다. (상세한 method설명은 위의 링크에서 확인하자) 간단히 말해 $.map은 array나 object를 새로운 array로 만들어 주는것이고,  $.makeArray는 배열처럼보이는 object를 실제 JavaScript Array형태로 만들어 주는 method이다. 위의 두개의 method를 가지고 li 속성값을 array형태로 가져오려면 다음과 같이 하면 된다.
var itemids = $.makeArray($("li").map(function(){
	return $(this).attr("itemid");
}));
위 내용처럼 map으로 선택된 엘리먼트의 속성을 가져와 array형태로 만들고 이 array를 javascript native array로 만들기 위해 makeArray를 사용하여 변환하였다.
저작자 표시
신고
Name
Password
Homepage
Secret

[jQuery] jQuery 라이브러리를 동적으로 로드시키기

Published on: 2013.11.14 13:12 by krespo
스크립트 작업을 하다보면 때에 따라서 스크립트 라이브러리를 동적으로 로드해야 하는 경우가 생길수 있습니다. 만약  이와 같은 경우가 생기면 아래의 코드로 해당 스크립트 라이브러리를 이용하여 동적으로 로드시킬 수 있습니다.
window.onload = function(){
	if(typeof jQuery == 'undefined') {
		var jqueryElement = document.createElement('script');
		jqueryElement.src = 'http://code.jquery.com/jquery-1.7.2.min.js';

		jqueryElement.onload = function(){
			//여기에 jquery를 이용한 스크립트를 입력하면 됩니다.
			$("body").html("여기에 들어갑니다.");
		}

		document.getElementsByTagName('head')[0].appendChild(jqueryElement);
	}
}
 
저작자 표시
신고
Name
Password
Homepage
Secret

[jQuery] jQuery Library 사용유무 확인하기

Published on: 2013.11.14 13:12 by krespo
현재페이지에서 jQuery 자바스크립트 라이브러리를 사용하고 있는지 확인하는 방법은 다음과 같습니다.  
if (jQuery) {  
    // jQuery is loaded
} else {
    // jQuery is not loaded
}
또 다른 방법은 javascript의 키워드인 typeof를 사용하는 방법입니다.  
if (typeof jQuery == 'undefined') {  
    // jQuery is not loaded  
} else {
    // jQuery is loaded
}
저작자 표시
신고
Name
Password
Homepage
Secret