jQuery常用API

最新推荐文章于 2024-06-26 08:15:00 发布

原创最新推荐文章于 2024-06-26 08:15:00 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript

前端的进步专栏收录该内容

59 篇文章

订阅专栏

jQuery选择器

jQuery基础选择器

原生js获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准

$（"选择器"） //里面选择器直接写CSS选择器即可，但是要加引号

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
    </ol>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function () {
            console.log($(".nav"));
        })
    </script>
</body>

隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

<body>
    <div>我是一个保安，上班为了下班</div>
    <div>我是一个保安，上班为了下班</div>
    <div>我是一个保安，上班为了下班</div>
    <div>我是一个保安，上班为了下班</div>
    <ul>
        <li>爱你呦</li>
        <li>爱你呦</li>
        <li>爱你呦</li>
    </ul>
    <script>
        //1.获取四个div元素
        console.log($("div"));
        //2.给四个div设置背景颜色为蓝色 jquery对象不能使用style
        $("div").css("background", "blue");
        //3.隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
        $("ul li").css("color", "red");
    </script>
</body>

jQuery筛选选择器

<script>
        $(function () {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");  //奇数
            $("ol li:even").css("color", "pink"); //偶数
        })
    </script>

jQuery筛选方法（重点）

<body>
    <div class="grandfather">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>
    <div class="nav">
        <p>我是p</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <script>
        //注意一下都是方法 带括号
        $(function () {
            //1.父 parent() 返回的是 最近一级的父级元素 亲爸爸
            console.log($(".son").parent());
            //2.子
            //(1)亲儿子 children() 子代选择器 ul>li
            $(".nav").children("p").css("color", "purple");
            //(2)可以选里面所有的孩子 包括儿子和孙子 find（） 类似于后代选择器
            $(".nav").find("p").css("color", "red");
            //3.兄
        });
    </script>
</body>

新浪下拉菜单，鼠标经过离开下拉菜单显示隐藏

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px;
        }

        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav>li>a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function () {
            //鼠标经过
            $(".nav>li").mouseover(function () {
                //$(this) jquery 当前元素 this不要加引号
                //show() 显示元素
                $(this).children("ul").show();
            });
            //鼠标离开
            $(".nav>li").mouseout(function () {
                $(this).children("ul").hide();
            })
        })
    </script>
</body>

jQuery筛选方法（重点）

<body>
    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
        <li class="item">我是ul 的li</li>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
    </ul>
    <div class="current">俺有current</div>
    <div>俺木有current</div>
    <script>
        //注意一下都是方法 带括号
        $(function () {
            //1.兄弟元素 siblings 除了自身元素之外的所有亲兄弟
            $("ol .item").siblings("li").css("color", "red");
            //2.第n个元素
            var index = 2;
            //(1)我们可以利用选择器的方式选择
            // $("ul li:eq(2)").css("color", "blue");
            //(2)我们可以利用选择方法的方式选择
            // $("ul li").eq(2).css("color", "blue");
            $("ul li").eq(index).css("color", "blue");
            //3.判断是否有某个类名
            console.log($("div:first").hasClass("current"));
            console.log($("div:last").hasClass("current"));
        })
    </script>
</body>

jQuer里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式

<button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function () {
            //1.隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function () {
                //2.当前的元素变化背景颜色
                $(this).css("background", "pink");
                //3.其余的兄弟去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background", "");
            })
        })
    </script>

案例：淘宝服饰精品案例