1. 기본선택자
jQuery 기본형태 : jQuery('h1').css('color', 'red'); // jQuery(선택자).메서드;
전체선택자 : html페이지에 있는 모든 문서객체를 선택
태그선택자 : 특정한 태그를 선택
아이디선택자 : 특정한 id속성을 가지고 있는 문서객체를 선택
클래스선택자 : 특정한 class속성을 가지고 있는 문서객체를 선택
2. 자식선택자 & 후손선택자
3. 속성선택자
4. 입력양식 필터선택자
5. 필터선택자
6. 배열관리
each() 메서드 : 매개변수로 입력한 함수를 사용해 for in 반복문처럼 객체나 배열의 요소를 검사하는 메서드
1. $.each(object, function(index, item){})
2. $(selector).each(function(index, item){})
// $.each()
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
var array = [
{name: 'Hanbit Media', link: 'http://hanb.co.kr'},
{name: 'Naver', link:'http://naver.com'},
{name: 'Daum', link:'http://daum.net'},
{name: 'Paran', link:'http://paran.com'}
];
$.each(array, function(index, item){
var output = '';
output += '<a href="'+item.link+'">';
output += '<h1>'+item.name+'</h1>';
output += '</a>';
document.body.innerHTML += output;
});
});
</script>
addClass() 메서드 : 문서 객체에 class 속성을 추가하는 메서드
removeClass() 메서드 : 문서 객체의 class 속성을 제거하는 메서드
this 키워드
// $(selector).each()
<head>
<style>
.high_light_0 {background:Yellow;}
.high_light_1 {background:Orange;}
.high_light_2 {background:Blue;}
.high_light_3 {background:Green;}
.high_light_4 {background:Red;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$('h1').each(function (index, item) {
$(this).addClass('high_light_'+index);
});
});
</script>
</head>
<body>
<h1>item-0</h1>
<h1>item-1</h1>
<h1>item-2</h1>
<h1>item-3</h1>
<h1>item-4</h1>
</body>
7. 객체확장
$.extend() 메서드 : 많은 수의 속성을 추가할 때
$.extend(object, addObject, addObject, ...)
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
var object = { name: 'RintIanTta' };
$.extend(object, {
gender: 'Male',
part: 'Second Guitar'
});
var output = '';
$.each(object, function (key, item) {
output += key + ': ' + item + '\n';
});
alert(output);
});
</script>
'강의노트 > 웹' 카테고리의 다른 글
| DTO와 DAO 패턴 (0) | 2013.06.14 |
|---|---|
| 로그인하기 (0) | 2013.06.05 |
| JQry 이벤트 (0) | 2013.05.13 |
| JQry 문서객체조작 (0) | 2013.05.13 |
| JQry 문서객체탐색 (0) | 2013.05.07 |