12月19日jQuery选择器-九期线上班

jQuery选择器

var n1 = $('#a'); 给某个元素ID赋值

var n2 = $('.n'); 给元素类赋值

var n3 = $('.n p'); 给元素后匹配项赋值

var n4 = $('.n > p'); 父元素下所有直接匹配的子元素

var n5 = $('.n + p'); 指定元素后紧贴的元素

var n6 = $('.n ~ p'); 指定元素所有同级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器</title>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="n">
    <p id="a" style="background-color: #2d6a88">PHP中文网</p>
    <ul id="b" style="background-color: #0a68b4">PHP.CN</ul>
    <ul id="c" style="background-color: #3a87ad"><p id="d">PHP</p></ul>
    <div id="e" style="background-color: #1a9c39"> <li id="f"> js </li> </div>
</div>
<p id="g" style="background-color: #0C9A9A"> jQuery </p>
</body>
<script>
    //给某个元素ID赋值
    var n1 = $('#a');
    console.log(n1);
    //给元素类赋值
    var n2 = $('.n');
    console.log(n2);
    //给元素后匹配项赋值
    var n3 = $('.n p');
    console.log(n3);
    //父元素下所有直接匹配的子元素
    var n4 = $('.n > p');
    console.log(n4);
    //指定元素后紧贴的元素
    var n5 = $('.n + p');
    console.log(n5);
    //指定元素所有同级元素
    var n6 = $('.n ~ p');
    console.log(n6);
</script>
</html>

jQuery选择器

相关文章