제이쿼리 2 jQuery

# 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('&nbsp; <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



G
M
T
음성 기능은 200자로 제한됨
G
M
T
음성 기능은 200자로 제한됨

덧글

댓글 입력 영역