Jquery中的选择器及隐式迭代以及链式编程.html

最新推荐文章于 2022-07-01 21:11:35 发布

一只极度渴望成长的Giser

最新推荐文章于 2022-07-01 21:11:35 发布

阅读量238

点赞数

分类专栏： Javascript、JQuery练习文章标签： Jquery中的选择器及隐式迭代以及链式编程.html

本文链接：https://blog.csdn.net/qq_32077521/article/details/99706799

版权

Javascript、JQuery练习专栏收录该内容

69 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <input type="button" value="按钮" id="btn1" />
    <div id="div1">
        <p>哈哈</p><p class="cls1" id="p1"><font>哈哈</font></p><p>哈哈</p><p>哈哈</p><p>哈哈</p><p>哈哈</p><p>哈哈</p>
    </div>
    <script type="text/javascript">
        //ID选择器：$("#div1")   类选择器：$(".cls1")    标签选择器：$("p")
        $(function () {
            $("p").text("全部改变了");//这里是获取页面的所有p标签，但是没有去循环遍历,是因为隐式迭代
            $("#div1").css({
                "width": "500px",
                "height": "500px",
                "backgroundColor": "red"
            }).css({
                "fontSize": "xx-large"
            }).text("哈哈哈");//链式编程
            //链式编程注意：只有使用方法进行设置值的时候才能进行链式编程的写法，如果只是获取值，则不能使用链式编程
            $("p.cls1").text("这是所有类样式为cls1的p标签");//标签+类样式选择器
            $(".cls,#btn1,div,p").css({ "backgroundColor": "red" });//组合选择器
            //层次选择器
            $("div p").text("哈哈");//这是层次选择器，选取的是所有div下的所有p标签
            $("p > font").text("我是所欲p标签下的直接子元素");//直接子元素选择器
            $("#p1 + p").css({});//选择#p1的p标签的下一个同胞p标签
            //上边等价于
            $("#p1").next("p").css({ "color": "blue" });//选择#p1的p标签的下一个同胞p标签
            $("#p1 ~ p").css({ "color": "blue" });//选择#p1的p标签的所有同胞p标签
            //上边等价于
            $("#p1").nextAll("p").css({ "color": "blue" });//选择#p1的p标签的所有同胞p标签
            //获取上一个同胞元素
            $("#p1").prev("p").text("我是上一个元素");
            //获取前面的所有同胞元素
            $("#p1").prevAll("p").text("hah");
            //获取当前元素的所有兄弟元素
            $("#p1").siblings("p").text("嘎嘎嘎");

        });
    </script>
</body>
</html>