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元素，无论前后位置

　　　　

转载于:https://www.cnblogs.com/halai/p/6858289.html