jQuery的选择器

阅读量: 57 编辑

jQuery的选择器

一、jQuery选择器的常用写法

- $("#myID")                           //ID选择器
- $("div")                                //元素选择器
- $(".classname")                    //类选择器
- $(".classname1,.classname2,#id1")    //组合选择器。用英文 , 分开;“或” 的关系

二、代码实战

代码的详细解读,可以参考视频教程

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="./res/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <div id="myDIV">ddddd</div>
        <div id="myDIV2">eeee</div>

        <ul>
            <li>java</li>
            <li>python</li>
            <li>javascript</li>
            <li>html</li>
        </ul>

        <div class="cl1">我是class</div>

        <button onclick="doClick()">点击</button>

        <script type="text/javascript">
            function doClick(){
                $('#myDIV').html('我是div')

                let len = $('div').length;
                // alert(len)
                // alert($('#myDIV').html())

                //标签选择器
                let liArray = $('li');
                // for(let i = 0; i < liArray.length; i++){
                //
                // }
                //遍历
                $.each(liArray,function(){
                    let content = $(this).html() //liArray[i]
                    alert(content)
                })

                //类的选择器
                alert($('.cl1').html())

                //混合
                alert($(".cl1,li,#myDIV").length)
            }
        </script>
    </body>
</html>