JQuery

JQuery

모든 브라우저에서 동작하는 자바스크립트 라이브러리

1. $('선택자').메서드
1) 태그 선택자(하나)	$('태그').메서드('속성','값');	$('h1').css('color','Red');
태그 선택자(하나↑)       : 콤마 구분	$('태그1, 태그2').메서드('속성','값');	$('h1,p').css('color','Red');
2) 아이디 선택자	$('#아이디').메서드('속성','값');	$('#target').css('color','Red');
3) 클래스 선택자	$('.클래스').메서드('속성','값');	$('.item).css('color',Green');
	$('.클래스.클래스').메서드('속성','값');	$('.item1.item2').css('color','Yellow');
	$('태그.클래스').메서드('속성','값');	$('p.item).css('color','Blue');
4) 자식 선택자	$('선택자 > 선택자').메서드('속성','값');	$('body > *').css('color','Aqua');
5) 후손 선택자	$('선택자 선택자').메서드('속성','값');	$('body * ').css('color','Green');
6) 속성 선택자	1) 요소[속성] : 속성 객체 선택
	2) 요소[속성=값] : '속성=값' 객체 선택	$('input[type=text]').val('Hello jQuery..!');
	3) 요소[속성~=값] :      '값'을 단어로 포함하는 객체
	4) 요소[속성^=값]       특정 '값'으로 시작하는 객체
	5) 요소[속성$=값]      '값'으로 끝나는 객체
	6) 요소[속성*=값]      '값'을 포함하는 객체
7) 입력 양식 속성 선택자(1)	1) 요소: button  2) 요소: checkbox  3) 요소: file  4) 요소: image  5) 요소: password  6) 요소: radio  7) 요소: reset  8) 요소: submit  9) 요소:text
7) 입력 양식 속성 선택자(2)	1) 요소: checked   2) 요소: disabled  3) 요소: enabled  4) 요소: focus  5) 요소: input  6) 요소: selected	$('select > option:selected').val();
8) 위치 속성 관련        필터 선택자	1) 요소: odd  2) 요소: even  3) 요소: first  4) 요소: last	$('tr:odd').css('background','#F9F9F9');
9) 함수형태       필터 선택자	1) 요소: contains(문자열)  2) 요소: eq(n) : n번째 위치하는 객체 선택  3) 요소: gt(n)  4) 요소: has(h1)  5) 요소: it(n)  6) 요소: not(선택자)  7) 요소: nth-child(3n+1)	$('tr:eq(0).css('background','#000000')    .css(' color','White');
10) 배열	1) each(배열, 메서드(index, item))      객체나 배열의 요소 검사      $(선택자).each(메서드(index, item){})	$.each(array, function(index, item){});  $(selector).each(function(index, item){})
	2) 객체마다 다르게 적용하고 싶을 때 사용	$('h1').each(function(index,item){      $(item).addClass('high_light_'+index);  });
		$('h1').each(function(index,item){     $(this).addClass('high_light_'+index);  });
		$('h1').each(function(index,item){     return 'high_light_'+index;  });
11) 객체 확장	$.extends() 메서드   객체 생성 후 속성 추가	$.extends(object, {     gender: 'Male',     part: 'Second Guitar'  });
12) 프레임워크         충돌 방지	$.noConflict()
13) 필터링	filter()  1) $('선택자').filter('선택자');	$('h3').filter(':even')      .css({ backgroundColor:'Black',              color: 'White'       });
	2) $('선택자').filter(메서드);	$('h3').filter(function(){     return index % 3 == 0; }).css({     backgroundColor: 'Black',     color: 'White'  });
14) 문서 객체 탐색 종료	1) 체이닝	$('h1').css('backgorund','Orange').filter(':even')   .css('color','Red');
	2) 체이닝 종료 - end()	$('h1').css('background','Orange').filter(':even')          .css('color','White').end().filter(':odd').css('color','Red');
15) 특정 위치 객체 선택	1) eq()	$('h1').eq(0).css('background','Orange');  $('h1').eq(-1).css('background','Red');
	2) first()	$('h1').first().css('background','Yellow');
	3) last()	$('h1').last().css('background','Green');
16) 객체 추가 선택	add()	$('h1').css('background','Gray').add('h2').css('float','left);
17) 객체 특징 판단	is()	$('h1').each(function(){     if($(this).is('.select)){         $(this).css('background','Orange');     }  });
18) 특정 태그 선택	find()	var xmlDoc = $.parseXML(xml);   $(xmlDoc).find('friend').each(function (index){     var output='';     output += '<div>';     output += '    <h1>' + $(this).find('name').text() + '</h1>';     output += '    <p>'   + $(this).find('language').text() + '</p>';     output += '</div>';     document.body.innerHTML += output;  });
19) 객체의 클래스 속성 추가	addClass('클래스명')	$('h1).addClass('item');
		$('h1').addClass(function(index){     return 'class' + index;  });
20) 객체의 클래스 속성 제거	removeClass()	$('h1').removeClass('select');
		$('h1').removeClass(function(index){     return 'class'+index;  });
21) 객체 속성 추가	attr()	var src = $('img').attr('src');
		$('selector).attr(name,value); [Write]            ↓  $('img').attr('width','200');
		$('selector).attr(name,function(index, attr){});            ↓  $('img').attr({     width:function(index){ return (index+1)*100; },     height: 100  });
		$('selecotr).attr(object); [Read]
22) 객체 속성 제거	removeAttr()	$('h1').removeAttr('data-index');
23) 객체 스타일 추가         css()	1) $(선택자).css(속성,값);	$(selector).css(name,value);
	2) $(선택자).css(속성,function(){});	$('h1.sample').css({     color:function(index){         return color[index];     }, backgroundColor:'Black'  });  $('h1').css('color',function(index){     return color[index];
	3) $(선택자).css(객체)	$('h1').css(    { color:function(index){         return color[index];     },backgroundColor:'Black'   });
24) 객체 내부 검사	1) html()	var html = $('h1').html();
	2) text()	var text = $('h1').text();
25) 객체 내부 추가	1) html(value)	$('div').html('<h1>$().html() Method</h1>');
	html(function(index,html){})	$('div').html(function(index){     return '<h1>Header-' + index + '</h1>';  });
	2) text(value)	$('div').text('<h1>$().html() Method</h1>');
	text(function(index,text){})	$('div').text(function(index, html)}     return '★'+ html + '★';  });
26) 객체 제거	1) remove()  - one	$('h1').first().remove();
	2) empty() - every	$('h1').empty();
27) 객체 생성	1) $() - text 설정	$('<h1></h1>').html('Hello World').appendTo('body');  $('<h1>Hello World</h1>).appendTo('body');
	2) $() - attr()	$('<img />').attr('src','Apple.jpg').appendTo('body');  $('<img />',{     src: 'Banana.jpg',     width: 350,     height: 250   }).appendTo('body');
28) 객체 추가	1) $(A).appendTo(B) : A를 B의 뒷부분에  2) $(A).prependTo(B): A를 B의 앞부분에  3) $(A).insertAfter(B): A를 B의 뒤에  4) $(A).insertBefore(B): A를 B의 앞에

1차 선택	2차 선택	작업
#id   .class	filter()	prop()