Steve World 썸네일형 리스트형 3-13 text() 노드 DOCTYPE html>Insert title here /*text() 메서드 : 문서 객체 내부의 글자와 관련된 기능을 수행1. $(selector).text();- 선택자의 텍스트 노드의 값을 가져옴2. $(selector).text(value);- 선택자의 텍스트 노드의 값을 변경3. $(selector).text(function(index),text{});- */$(function(){var text = $('h1').text('change');//출력//첫번 째 문서 객체의 글자를 가져오지 않고 선택자로 선택한 모든 문서 객체의//글자를 이어서 출력 ;alert(text);});Header-0Header-1Header-2 DOCTYPE html>Insert title here /*text() 메.. 더보기 3-11 css 메서드 콜백 함수 DOCTYPE html>Insert title here$(function(){//배열 생성 - index 0 , 1, 2var color =['red','blue','purple'];// 문서 객체의 스타일을 변경// css() 메서드에서 두 번째 매개변수에 함수를 사용해서 개별적으로// 스타일 속성을 적용할 떄 사용$('h1').css('color',function(index){return color[index];})});Header-0Header-0Header-0 DOCTYPE html>Insert title here$(function(){//배열 생성 - index 0 , 1, 2var color =['red','blue','purple']; $('h1').css({'color': function(.. 더보기 3-8 removeAttr() DOCTYPE html>Insert title here/* removeAttr(name) 메소드 : 문서 객체의 속성을 제거*/$(function(){$('h1').removeAttr('data-index');});Header-0Header-0Header-0 더보기 3-6 attr() 콜백 함수 / 속성값 Object 사용 DOCTYPE html>Insert title here$(function(){$('img').attr('width',function(index){return(index+1)*100;});});DOCTYPE html>Insert title here$(function(){$('img').attr({width: function(index){return(index+1)*100;}, height: 100});}); 더보기 3-4 attr() DOCTYPE html>Insert title here$(function(){var src = $('img').attr('src');alert(src)}); DOCTYPE html>Insert title here$(function(){$('img').each(function(index, item){alert("index= "+ index + " , "+ $(item).attr('src'));})}); DOCTYPE html>Insert title here$(function(){$('img').attr('width',200);}); 더보기 3-1 addClass() 콜백 함수 DOCTYPE html>Insert title here.item0{background:orange}.item1{background:yellow}.item2{background:pink}$(function(){//each()처럼 $() 갯수 만큼 돈다.$('h1').addClass(function(index){alert();return 'item' + index;})})Header-0Header-1Header-2 더보기 2-10 xml 문서 find 로 찾기 DOCTYPE html>Insert title here //변수를 선언var xml = '';xml += '';xml += '';xml += '김영렬';xml += '영어';xml += '';xml += '';xml += '슈퍼맨';xml += '불어';xml += '';xml += '';xml += '베트맨';xml += '일어';xml += '';xml += ''; //alert(xml)$(function(){var xmlDoc = $.parseXML(xml);//문자열을 XML 문서 객체로 변견//$(xmlDoc) : 문서 객체 xmlDoc을 $() 메소드에 넣어 사용//friend 태그는 세 개 이므로 each() 메서드를 사용$(xmlDoc).find('friend').each(function(.. 더보기 2-4 체이닝_필터 end() eq() add() hide() show() DOCTYPE html>Insert title here//필터를 계속 줄 수 있다. (필터의 필터)$(function(){$('h1').css('background','orange').filter(':odd').end().css('color','red').filter(':even').css('color','white') }); Header-0Header-1Header-2Header-3Header-4Header-5 DOCTYPE html>Insert title here//필터를 계속 줄 수 있다. (필터의 필터)$(function(){$('h1').eq(0).css('background','orange');$('h1').eq(1).css('background','pink');$('h1').eq(-1).cs.. 더보기 2-4 체이닝 DOCTYPE html>Insert title here//필터를 계속 줄 수 있다. (필터의 필터)$(function(){$('h1').css('background','orange').filter(':even').css('color','red').filter(':even').css('color','blue')});Header-0Header2-0Header-1Header2-1Header-2 더보기 2-3 filter(function(index)) DOCTYPE html>Insert title here$(function(){$('h3').filter(function(index){return index % 3 == 0;// index가 3의 배수일 경우}).css({ backgroundColor:'orange', color:'yellow'});}); Header-0Header-1Header-2Header-3Header-4Header-5Header-6 더보기 이전 1 2 3 4 5 6 다음
