jQuery DOM

모덴웹을 위한 Javascript, JQuery입문 [윤인성 지음] 참고

2017 - 11 - 06 (월)

속성추가

문서객체 추가

문서객체 내부검사

속성 추가

class 속성 추가하기 : addClass()

//dom 조작
    $(document).ready(function(){
        $('h1').addClass('item'); //class에 item 추가
    })

//콜백함수로 클래스 추가 (h1 태그에 각각 다름이름의 클래스명 부여)
    $(document).ready(function(){
        $('h1').addClass(function(index){
            return 'item'+index;
        })
    }) // h1 태그 순서대로 item1 , item2 , item3 이런식으로 클래스 명이 부여된다.

class 속성 삭제하기 : removeClass()

//클래스 삭제하기
    $(document).ready(function(){
        $('h1').removeClass('item2')
    })

속성 체크하기 : attr() , 매개변수로 들어가는 속성의 값을 반환한다.

//attr로 속성 체크
$(document).ready(function(){
    var src = $('img').attr('src');
//            alert(src);  src 가 가지고있는 값을 반환한다.
//            alert($('img').attr('alt'))
//            $('img').attr('width',60)
})

attr() 을 활용해서 속성: 값 셋팅하기

//아래 세가지 방법을 지원한다.
$(selector).attr(name, value);
$(selector).attr(name, function(index,attr){});
$(selector).attr(object);

//        $(document).ready(function(){
//            $('img').attr('width',function(index){
//                return (index+1) * 50;
//            })
//        })

        $(document).ready(function(){
            $('img').attr(
                {
                    width: function(index){
                return (index+1) * 100;},
                    height: 200

                });
        });

속성 제거하기 : removeAttr()

$(document).ready(function(){
          $('h1').removeAttr('data-index');
          $('#test1').click(function(){
              var text =$('h1').first().remove(); // h1 태그를 첫번째부터 순서대로 제거

              alert(text);
          })
          $('#test2').click(function(){
              $('h1').first().empty(); // h1 태그를 첫번째부터 비운다.
          })
          $('#test3').click(function(){
              $('h1').first().text('header') //text 채우기
          })
      });

문서객체 추가

문서객체 생성하기 : append()

//문서객체 추가하기
       $(document).ready(function(){
           $('<img>').attr(
               {
                   src : 'img/13H.jpg',
                   width : 350,
                   height : 250
               }
           ).appendTo('body')
       })
       //append() 는 그 뒤에 바로 붙이기 prepend() 는 앞에 붙이기

문서객체 이동하기 : appendTo()

$(document).ready(function(){
    $('img').css('width',250);

    setInterval(function(){
        $('img').first().appendTo('body');
    }, 500); // 첫번째 이미지가 계속 맨뒤로 이동한다.
})

메서드 이름	설명
$(A).appendTo(B)	A를 B의 뒷부분에 추가한다.
$(A).prependTo(B)	A를 B의 앞부분에 추가한다.
$(A).insertAfter(B)	A를 B의 뒤에 추가한다.
$(A).insertBefore(B)	A를 B의 앞에 추가한다.
$(A).append(B)	B를 A의 뒷부분에 추가한다.
$(A).prepend(B)	B를 A의 앞부분에 추가합니다.
$(A).after(B)	B를 A의 뒤에 추가합니다.
$(A).before(B)	B를 A의 앞에 추가합니다.

$(document).ready(function(){
  var h1 = '<h1>header</h1>';
  var h2 = '<h2>header</h2>';
  $('body').append(h1,h2,h1,h2);
});

//배열을 사용하여 append 하기
$(document).ready(function(){
  var content = [
    {name : 'shj', region : 'seoul'}
    {name : 'lhj', region : 'seoul'}
    {name : 'chj', region : 'seoul'}
  ]
  $('div').append(function(index){
    var item = content[index];
    var output = '';
    output += '<h1>'+ item.name +'</h1>';
    output += '<h2>' + item.region + '</h2>';
    return output;
  })
})

문서객체 내부검사

html() : 문서 객체 내부의 글자와 관련된 모든 기능을 수행(html태그도 인식)

$(document).ready(function(){
  var html = $('h1').html();
  $('div').html('<h1>header</h1>')
})

text() : 문서객체 내부의 글자에 관련한 기능 수행

$(document).ready(function(){
  var text = $('h1').text()
  $('#header').html(text);
})

val() : 문서 객체 내부의 값에 관련한 기능 수행

$(document).ready(function(){
  var value = $('textarea').val();
  $('textarea').val('test message');
})