sundries 썸네일형 리스트형 체크박스 선택 시 5초뒤 알람창으로 출력 DOCTYPE html>Insert title here$(function(){setTimeout(function(){var output='';$('input:checked').each(function(index, item){output += $(item).val()+' , ';});alert('선택한 스킬은'+ output.substring(0,output.length-3)+ '입니다.');},3000);}); 스킬: HTML CSS JavaScript JSP DOCTYPE html>Insert title here $(function(){var selecteSkill='';$('input[type=checkbox]').click(function(){selecteSkill += $(this).val() +.. 더보기 3-20 $() 메소드 문서 객체 생성 DOCTYPE html>Insert title here//결과가 나오지 않는다// body 에 붙이는게 없기 때문에$(function(){$('').html('Hello World..!');//Hello World ..! }) DOCTYPE html>Insert title here//.appendTo('body') 를 하면 결과가 출력된다.$(function(){$('').html('Hello World..!').appendTo('body');//Hello World ..! }) 더보기 3-18 empty() remove() DOCTYPE html>Insert title here/*//empty () : 문서 객체 내부를 비웁니다. 내부만 사라진다.*/$(function(){ $('div').empty();});Header-0Header-1Header-2 DOCTYPE html>Insert title here/*//first()인덱스 선택첫번쨰 지우기//remove() 선택자와 모든 것들이 사라진다.*/$(function(){ $('h1').first().remove();});Header-0Header-1Header-2 더보기 3-14 html(메서드) DOCTYPE html>Insert title here/*문서 객체의 내부 추가html() :문서 객체 내부의 글자와 관련된 모든 기능을 수행(HTML 태그인식)text() : 문서 객체 내부의 글자와 관련된 모든 기능을 수행형식)1. $(selector).html(value);2. $(selector).html(function(index,html){});- */$(function(){$('div').html('html() 메서드 입니다.')//$('div').text('html() 메서드 입니다.') }); DOCTYPE html>Insert title here/*문서 객체의 내부 추가 - html() 메서드html() 메서드에서 가용된 함수의 두번째 매개 변수 html()은원래 있던 HTML의 내용을.. 더보기 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 더보기 이전 1 2 3 4 다음
