본문 바로가기

sundries

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 더보기
2-2 filter() DOCTYPE html>Insert title here$(function(){/*$('h3:even').css({backgroundColor:'black',color: 'white'});같은 의미로 사용 가능*/$('h3').filter(':even').css({backgroundColor:'hotpink',color:'white'});$('h3').filter(':odd').css({backgroundColor:'orange',color:'yellow'});}); Header-0Header-1Header-2Header-3Header-4Header-5Header-6 더보기
2-1 필터 선택자 요소 콜론 DOCTYPE html>Insert title here $(function(){$('h3:even').css({backgroundColor:'black',color: 'white'});}); Header-0Header-1Header-2Header-3Header-4Header-5Header-6 더보기
꿈틀이 DOCTYPE html>Insert title here $(function(){ $('li').css('display','inline').css('float','left').css('width','100px').css('height','60px').css('text-align','center') .css('line-height','60px'); $('li:nth-child(2n+1)').css('background','hotpink'); $('li:nth-child(2n)').css('background','orange');$('li:nth-child(1)').css('border-top-left-radius','8px') .css('border-bottom-left-radius','8px');$('li.. 더보기
1-22 jQuery 충돌 방지 DOCTYPE html>Insert title here.high-light{background:orange;} .append::before{content:'※' }.append::after{content:'※'}$.noConflict(); //더이상 jQuery 의 식별자로 $를 사용할 수 없음var j = jQuery; //jQuery 객체를 다른 변수에 저장해서 사용함//jQuery 를 사용j(function(){alert('출동 방지 예제');j('h1').removeClass('high-light'); //클래스 속성 제거j('h1').addClass('append');//클래스 속성 추가});item - 0 더보기
1-21 클래스 속성 $.each DOCTYPE html>Insert title here$(function(){var array=[{name:"네이버", link:"http://www.naver.com"},{name:"다음", link:"http://www.daum.net"},{name:"구글", link:"http://www.google.com"}];var output='';$.each(array, function(index,item){output += '';output += ' ' + item.name +'';output += '';});document.body.innerHTML += output;}); 더보기
1-21 클래스 속성 추가 each DOCTYPE html>Insert title here .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;}.high-light-5{background:gray;} window.onload=function(){var hs = document.getElementsByTagName('h1');hs[0].setAttribute('class','high-light-0');hs[1].setAttribute('class','high-light-1');hs[2].setAttribute('.. 더보기

티스토리툴바