jQuery DOM 메서드

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

2017 - 11 - 05 (일)

DOM 메서드

JQuery DOM 메서드

필터 선택자

$(document).ready(function(){
    $('h3:even').css({
        color:'orange',
        backgroundColor: 'black'
    });
});

JQuery 필터 메서드(특정위치 선택)
- filter()
- eq() : 특정위치의 문서객체 선택
- first() , last()

//짝수 자리에 있는 element 선택
$(document).ready(function(){
      $('h3').filter(':odd').css({
          backgroundColor : 'orange',
          color : 'white'
      })
  })
// 특정 위치에 있는 element 선택
$(document).ready(function(){
      $('h3').eq(0).css({
          backgroundColor :'red'
      })
  })

xml 문자열 생성

<script>
    // xml 문자열 생성
    var xml = "";
    xml+='<friends>';
    xml+='    <friend>';
    xml+='        <name>신희준</name>';
    xml+='        <language>Ruby</language>';
    xml+= '    </friend>';
    xml += '    <friend>';
    xml += '        <name>임하준</name>'
    xml += '        <language>Basic</language>'
    xml += '    </friend>';
    xml += '    <friend>';
    xml+= '        <name>최효준</name>';
    xml += '        <language>C#</language>';
    xml += '    </friend>';
    xml += '</friends>'

    $(document).ready(function(){
        var xmlDoc = $.parseXML(xml);
        console.log(xmlDoc)
        $(xmlDoc).find('friend').each(function(index){
            var output = '';
            output += '<div>';
            output += '  <h1>' + $(this).find('name').text() + '</h1>';
            output += '  <p>' + $(this).find('language').text() +'</p>';
            output += '</div>';
            document.body.innerHTML +=output;
        });
    });
</script>

parent() 메서드

 <script>
        $(document).ready(function(){
            $('span').parent().css('background','red');
        })

 </script>
<!--span 태그의 부모에게 css속성 주입-->