자바스크립트와 제이쿼리 비교

<div id="wrapper">

    <ul>

        <li class="Um">

            <span>엄.... 여기에 css속성 적용하기</span>

        </li>

    </ul>

</div>

< 위 코드를 자바스크립트로 수행하는 코드를 아래 작성 합니다. >

window.onload = function(){ // 웹페이지의 요소가 모두 불러진 시점에 함수가 호출됩니다.

    

    var wrapper = document.getElementById('wrapper')

    var ul = wrapper.getElementsByTagName('ul')

    var li = ul[0].getElementsByTagName('li')

    

    

    

    for(var i=0; i<li.length; i++)

        {

            var l = li[i]

            if(l.className == 'Um'){

                

                var changeColor = l.getElementsByTagName('span')

                changeColor[0].style.color = "red"

            }

        }

}

< 위 코드를 제이쿼리로 작성 합니다. >

$( document ).ready(function(){ // DOM의 요소가 모두 로드되면 콜백함수가 호출됩니다.

    

    $('#wrapper>ul>.Um>span').css('color', 'pink'); // JQuery selector을 이용하여 표시된 엘리먼트를 선택하여 스타일을 적용시켜 글자색을 변경합니다. 

    

})