这么快就jq了?!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-3.3.1.min.js"></script>
    <title>Document</title>
    <script>
        // window.onload = function () {
        //     console.log(0)
        // }
        // onload = function () {
        //     console.log(0)
        // }

        // alert();
        // window.alert();

        // jquery对象的三种表现形式
        // $(document).ready(function(){

        // })
        // $().ready(function(){

        // })
        // $(function(){

        // })

        // js对象转换jq对象
        // js => jq
        // jq = $(js/dom)
        // jq = $(div)
        // jq = $("<li>列表</li>")

        // jq对象转换成js对象
        // [0]
        // js = jq[0]
        // 例子:
        // js = $(div)[0]
        // js = $div[0]

        $(function () {
            // 将js封装为jq
            // 简化前
            // var div = document.querySelector(".div");
            // var $div = $(".div")

            // 简化后
            var $div = $(".div")

            // js封装成jq之前
            // div.onclick = function(){

            // }

            // js封装成jq之后
            // $div.click(function(){

            // })

            $("li:frist")
            // eq 代表等于
            $("li:eq(2)").css("color", "red")
            // gt 代表大于
            $("li:gt(2)").css("color", "green")
            // lt 代表小于
            $("li:lt(2)").css("color", "bule")
            // li:eq(2)中li 和 :eq之间不能加空格!!!因为过滤的是li自身所以要紧挨着:eq

            // 内容过滤器
            // $("li:parent").css("color","red")
            // $("li:parent").css("color","red") 文本节点(空格/换行)也可以起作用 用来验证里面有没有东西
            //$("li:has(.span)").css("color","red")验证其中有无内容 选择器
            //$("li:contain(999)").css("color","red")文本检查 检查的是文本 选择器
            //display:none看不见 选择器只识别display:none
        })
    </script>
</head>

<body>
    <div class="div"></div>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4<span class="span">999</span></li>
        <li>列表5</li>
        <li>

        </li>
    </ul>
</body>

</html>
posted @ 2021-11-08 12:20  610鸭  阅读(19)  评论(0)    收藏  举报