js 언어 jQuery 라이브러리(1)

jQuery와 원시 js의 차이
window.onload: 페이지가 렌더링이 끝날 때까지 기다립니다. jQuery: 페이지 노드 (탭) 가 불러오기 시작하면 실행됩니다.
jQuery 로드

약자 방식

$(function(){
        var $div = $('#div');//CSS     ，      
        //html()       JS innerHTML
        alert($div.html() + 'jQuery');
        })

jQuery 선택기
//요소를 선택하는 규칙은 css 스타일과 같습니다$('#div1').css({color: 'pink'});
jQuery 선택 세트 이동

//prev()         ，prevAll()           
//next()         ，nextAll()           

    //  #div1         
    $('#div1').next().css({color: 'red'});

    //  #div1     p      
    $('#div1').nextAll('p').css({color: 'red'});

    //         
    *$('#span01').parent().css({
                background:'gold'
            })*/


//closest            ，       ，      
            $('#span01').closest('div').css({
                background:'pink'
            })

            /*
$('.list li') $('.list').children()   ：
                         
                $('.list li')    end()    
                $('.list').children()    end()    
            */
            $('.list').children().css({
                background:'gold',
                height:'30px',
                marginBottom:'10px'
            }).end().css({
                background:'green'
            })

            //eq(2)       2    li，siblings()             li
            $('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});

            //find()   div  class  link1   
            $('#div2').find('.link1').css({color:'red'});

jQuery 스타일 작업

/*jQuery           、     */
                      //    
            alert($('#div1').css('fontSize'));//16px
            //  （  ）  
            $('#div1').css({background:'gold'});

            //      
            $('#div1').addClass('big');
            //      ，         
            $('#div1').removeClass('div2 big');

jQuery 인덱스 값: $(this).index () # 아래 첨자 팝업
jQuery 특수 효과

$ ('.box').fadeOut();//  
$('.box').fadeIn();//  
$('.box').fadeToggle();//      
$('.box').toggle();//      
$('.box').slideToggle();//