- JQuery 를 이용한 배열 관리(1) : 자바 스크립트 배열을 이용한 배열관리
사용 예) array : 받은 배열, index : 배열인덱스 자동, item : array 배열의 해당 인덱스에 속한 객체의Key 값
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$.noConflict();
var J = jQuery;
J(function () {
var array = [
{ name: "hanbit", link: "http://hanb.co.kr" },
{ name: "Naver", link: "http://naver.com" },
{ name: "Yahoo", link: "http://yahoo.co.kr" },
{ name: "PAran", link: "http://paran.com" }
];
J.each(array, function (index, item) {
var output = "";
output += "<a href='" + item.link + "'>";
output += "<h1>" + item.name + "</h1>";
output += "</a>";
document.body.innerHTML += output;
});
});
</script>
<title>Untitled Page</title>
</head>
<body>
</body>
</html>
- JQuery 를 이용한 배열 관리(1) : 선택자를 이용한 배열관리
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style>
.high_light_0 { background : Yellow; }
.high_light_1 { background : Pink; }
.high_light_2 { background : Blue; }
.high_light_3 { background : Red; }
.high_light_4 { background : Orange; }
.high_light_5 { background : Green; }
</style>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$.noConflict();
var J = jQuery;
J(function () {
J("h1").each(function (index, item) {
J("item").addClass("high_light_" + index);
});
});
</script>
<title>Untitled Page</title>
</head>
<body>
<h1>item - 0</h1>
<h1>item - 1</h1>
<h1>item - 2</h1>
<h1>item - 3</h1>
<h1>item - 4</h1>
<h1>item - 5</h1>
</body>
</html>
'공부 > JQuery' 카테고리의 다른 글
| JQuery_[JQuery filter() 메서드 사용] (0) | 2013.01.07 |
|---|---|
| JQuery_[JQuery 를 이용한 객체 확장] (0) | 2013.01.07 |
| JQuery_[필터 선택자] (0) | 2013.01.07 |
| JQuery_[속성 선택자] (0) | 2013.01.07 |
| JQuery_[JQuery 자식, 후손 선택자] (0) | 2013.01.07 |