035-12月19日-JS第4节-jquery选择器1

选择器6种：

1.id和class选择器：符号标识与css一样
2.标签选择器：除了基本的按标签名选择以外，还有
（1）祖先后代（2）父 > 子(3)老n + 老（n+1）（4）老n ~ 老n所有弟与妹
示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../jquery-3.4.1.js"></script>
    <title>jquery基本选择器--6种</title>
    <style>
        div{
            width: 400px;
            height: 150px;
        }
        .p1{
            background: yellow;
        }
        .p2{
            background: yellowgreen;
        }
    </style>
</head>
<body>
<div style="background:red;">
    div1
    <p class="p1">1</p>
    <p class="p2">2</p>
    <input type="text" id="user">
    <input type="text">
</div>
<div style="background:green;">
    div2
    <p class="p1">I
        <input type="text">
    </p>
    <p class="p2">II</p>
</div>
<div style="background:blue;">
    div3
    <p class="p1">甲</p>
    <p class="p2">乙</p>
</div>
<button onclick="tag()">按标签选</button>
<button onclick="qClass()">按class选</button>
<button onclick="grandTag()">标签下的所有子孙标签</button>
<button onclick="sonTag()">标签下的所有子标签</button>
<button onclick="bro1()">标签后面紧跟的某标签</button>
<button onclick="broAll()">标签后面所有的兄弟标签</button>
<script type="text/javascript">
    function tag() {
        return $("p").css("fontsize","50px");
        // var p1 = $('p').val();
        // alert(p1);
    }
    function qClass() {
        var p2 = $('.p2');
        var arg2 = $("#user");
        console.log(p2);
        console.log(arg2);
    }
    function grandTag() {
        var arg3 = $('div  input ');
        console.log(arg3);
    }
    function sonTag() {
        var arg4 = $('div > input ');
        console.log(arg4);
    }
    function bro1() {
        var arg5 = $('p + input ');
        console.log(arg5);
    }
    function broAll() {
        var arg6 = $('p ~ input ');
        console.log(arg6);
    }
</script>
</body>
</html>

选择器6种：

相关文章