1219_jquery选择器第36课

1 、ID选择器 $(‘#ID’)，类选择器 $(‘.class’), 元素选择器 $(‘element’)

<body>
    <input type="text" id="user" value="admin">
    <input type="text" class="phone" value="13912312345">
    <p id="paragraph">段落</p>
    <script type="text/javascript">
        //id选择器 $('#ID')
        var user = $('#user').val();
        //类选择器，$('.class')，class若有多个，取第一个
        var phone = $('.phone').val();
        //元素选择器 $('element')
        var paragraph = $('p').text();
        console.log( user );
        console.log( phone );
        console.log( paragraph );
    </script>
</body>

2 、子孙代选择器，兄弟选择器

<body>
    <div class="mydiv" style="background-color: #000;" id="div_black">黑色</div>
    <div class="mydiv" style="background-color: #ff0000;" id="div_red">红色</div>
    <p id="1">我是p标签</p>
    <div class="mydiv" style="background-color: #00ff00;" id="div_green">
        <p id="a">div中的p标签</p>
        <div>
            <p id="b">div中div中的p标签</p>
            <p id="c">P3</p>
        </div>
        <p id="d">div中的p标签</p>
    </div>
    <p id="2">我是p标签</p>
    <p id="3">我是p标签</p>
    <script type="text/javascript">
        // 与$('div p')效果一样，但可读性高
        var divp1 = $('#div_green  p'); // 后代 (子孙代)
        console.log( divp1 );
        var divp2 = $('#div_green > p'); // 子代
        console.log( divp2 );
        var divp3 = $('#div_green ~ p'); // 后面所有兄弟元素，
        console.log( divp3 );
        var divp4 = $('#div_green + p'); // 后面第一个兄弟元素
        console.log( divp4 );
    </script>
</body>

1219_jquery选择器 第36课

1 、ID选择器 $(‘#ID’)，类选择器 $(‘.class’), 元素选择器 $(‘element’)

2 、子孙代选择器，兄弟选择器

相关文章