# delegate방식
- on()메서드는 현재 존재하는 태그에만 이벤트를 연결하기 때문에
- 동적으로 생성된 태그에 이벤트를 걸기 위해서는
상위 태그에 이벤트를 연결하고 하위 태그를 클릭했을 때 검출해야한다.
- $('body').on('click','div',function(){});
ㄴ 실제 이벤트를 걸 녀석
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <title>Insert title here</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function (){ $('button').click(function(){ $('body').append('<div>Hello jQuery!!!'+$('div').size()+'th</div>'); //append() : 붙힌다 }); // 나중에 추가된 div는 이벤트가 먹히지 않는다. // $('div').click(function(){ // alert($(this).html());//html() : 안에 소스를 뽑을 수 있다. // }); // 동적으로 생된 태그에 이벤트를 거는법. $('body').on('click','div', function(){ alert($(this).html()); }); }); </script> </head> <body> <button>Add Button</button> <div>Hello jQuery!!!</div> </body> </html> | cs |
# event.preventDefault(), event.Propagation() : 주로 두개 같이 씀
- 기본 이벤트 제거 (a태그 등의 이동, 값 넘기는거 등)
- return false;를 입력하면 위의 두 함수가 모두 입력된 것으로 인식한다.
stopPropagation()
- 이벤트 버블링 방지
[스타일]
# css() : 개별적으로 스타일 변경
- css(name) : name에 해당하는걸 뽑아내는거
- css(name,value) : 설정, 여러개 넣을 때는 객체 형태로 css({})
# width(value), width()
height(value), height()
- 셋, 겟으로 생각
# animate(properties, duration, easing, callback)
- 과정을 보여줌.
- properties : 도달할 마지막 값
- duration : 5000(시간), fast, slow
- easing : 애니메이션을 미묘하게 바꿀 때 사용
- callback : 마지막에 호출 할 함수
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | $(function() { var $speech = $('div.speech'); // Jquery객체 저장 var defaultSize = $speech.css('fontSize'); // 12px // alert(defaultSize); $('#switcher button').click(function() { var num = parseInt($speech.css('fontSize')); // 12px switch (this.id) { // 선택한 버튼의 id로 구분 case "switcher-large": num *= 1.2; break; case "switcher-small": num /= 1.2; break; default: num = parseInt(defaultSize); break; } $speech.animate({ fontSize : num + 'px' }, 'slow'); }); $('div.label').click(function() { // 패딩 포함, outerWidth(true) : margin까지 포함 // p태그의 너비에서 div의 너비를 뺀 값 만큼을 왼쪽에 마진을 준다. var pWidth = $('div.speech p').outerWidth(); var dWidth = $('#switcher').outerWidth(); var num = parseInt(pWidth) - parseInt(dWidth); $('#switcher') .fadeTo('fast', 0.5) .animate({marginLeft : num }, 'slow') .fadeTo('fast', 1) .slideUp('slow', function() { $(this).css('background', 'red'); }) .slideDown('slow'); }); }); $(function() { //1. 두번째 p를 화면에 숨기기 var $p = $('.speech p').eq(1); $p.css('display','none'); //2. slideToggle('slow') // read more <=> read less => text(), text(value) $('.more').click(function(){ var $more = $(this).text(); var $link = $(this); $p.slideToggle('slow', function(){ if($more == 'read more'){ $link.text('read less'); } else{ $link.text('read more'); } }); }); }); | cs |
[DOM]
# 엘리먼트 프로퍼티 조작
- attr(name,value), attr(name)
- html() : 태그포함시
text() : 텍스트만
# 중요한 8가지 엘리먼트 조작
- 엘리먼트 복사, 이동(부모 자식관계)
- A.append(B) : B를 A 뒤에 추가 (막내)
- B.apendTo(A) : A를 B 뒤에 추가
- A.prepend(B) : B를 A 앞에 추가 (첫째)
- B.prependTo(A) : A를 B 앞에 추가
- 엘리먼트 복사, 이동(형제 관계)
- A.before(B) : B를 A 앞에 추가
- B.insertBefore(A): A를 B 앞에 추가
- A.after(B) : B를 A 뒤에 추가
- B.insertAfter(A) : A를 B 뒤에 추가
1 2 3 4 5 6 7 8 9 10 | $(function(){ $('<ol id="notes"></ol>').insertBefore('#footer'); $('span.footnote').each(function(index) { $(this).before('<a id="context-'+(index+1)+'">['+(index+1)+']</a>') .appendTo('#notes') .append(' <a href="#context-'+(index+1)+'">context'+(index+1)) .wrap('<li></li'); }); }); | cs |
[Ajax]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | //step01, html형식 $(function() { $('#letter-a').click(function() { $('#dictionary').hide().load('a.html', function() { $(this).fadeIn(2000); }); return false; // 기본 이벤트 취소 }) }); // step02, json형식 $(function() { $('#letter-b').click(function() { $.getJSON('b.json', function(data) { // data안에 값이 있다. $('#dictionary').empty(); // each $.each(data, function(index, item) { var html = '<div class="entry">'; html += '<h3 class="term">' + item.term + '</h3>'; html += '<div class="part">' + item.part + '</div>'; html += '<div class="definition">' + item.definition + '</div>'; html += '</div>'; $('#dictionary').append(html); }); }); return false; }); }); // step03, 자바스크립트 (스크립트를 불러오면 알아서 실행됨) $(function() { $('#letter-c').click(function() { $.getScript('c.js'); }); }); //step04, xml형식 $(function() { $('#letter-d').click(function() { $.get('d.xml', function(data) { $('#dictionary').empty(); $(data).find('entry').each(function(index) { var $entry = $(this); var html = '<div class="entry">'; html += '<h3 class="term">' + $entry.attr('term') + '</h3>'; html += '<div class="part">' + $entry.attr('part') + '</div>'; html += '<div class="definition">' + $entry.eq(0).text() + '</div>'; html += '</div>'; $('#dictionary').append(html); }); }); return false; }); }); //step05, 데이터전달 $(function() { $('#letter-e a').click(function() { $.get('server3.jsp', {'term':$(this).text()}, function(data) { $('#dictionary').html(data); }); return false; }); }); | cs |
#mission
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script type="text/javascript"> $(function() { $.get('ajax01.jsp', function(data) { var j = JSON.parse(data); // alert(j); var html = '<table border=1>'; html += '<tr><th>주소</th><th>이름</th></tr>'; $.each(j, function(index, item) { html += '<tr><td>' + item.address + '</td><td>' + item.name + '</td></tr>'; }); html += '</table>'; $('#message').append(html); }); return false; }); </script> | cs |
덧글