jQuery-基本和層級選擇器

1、引用Jquery庫

<script type="text/javascript" src='jquery-3.2.1.min.js'></script>

2、類似JS中的window.onload

$(function () {
            // body...
});

3、選擇器

　　1）、基本選擇器

<script type="text/javascript">
        $(function() {
            $('#one').css('background','#bbffaa');  //id選擇器，選擇id為one的元素
            $('.mini').css('background','#feffaa');    //class選擇器，選擇class為mini的元素
            $('div').css('background','red');    //標簽選擇器，選擇div標簽
            $('*').css('background','blue');  //通用選擇器，選擇所有元素
            $('span,#two').css('background','green');  //組合選擇器，選擇span元素和id為two的元素
        });
</script>

　　2）、層級選擇器

$('body div').css('background','yellow');  //選擇body里面所有的div元素
$('body>div').css('background','pink');  //選擇body里面的div子元素
$('.one+div').css('background','black');  //選擇class為one的下一個兄弟元素
$('#two~div').css('background','grey');  //選擇id為two的元素的后面所有的div兄弟元素

$('.one+div')比較少用，可以用$('.one').next('div')代替

$('#two~div')可以用$('#two').nextAll('div')代替

$('#two').nextAll('div')：選取#two之后所有的同輩div元素

$('#two').siblings('div'):選取#two所有同輩的div元素，無論前后位置