python网站创建014：jQuery的引入、选择器和筛选器

1. 下载jQuery之后， 那如何使用呢？假如我想操作一个div标签， 给这个标签补充文字

复制代码
<!DOCTYPE html>
<html>
<head>
    <title>初识：JavaScript</title>
    <meta charset="UTF-8">

</head>

<body>
    <!--定义一个无文本的div标签-->
    <div id = "info"></div>

    <!--将jQuery引入-->
    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        // $("#info")：意思是找到id为“info”的标签，.text的意思是给这个标签插入文本
        $("#info").text("插入的数据");
    </script>
</body>
</html>
复制代码

效果：

2、 jQuery的选择器：使用jQuery操作标签时，首先第一部得找到要操作的标签，如何寻找自己想要的标签？ 就通过选择器来寻找

id选择器：$("#info")

<body>
    <div id = "info"></div>
    
    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        $("#info").text("插入的数据");
    </script>
</body>

 

class选择器：$(".info")

复制代码
<body>
    <div class="info"></div>
    <div class="info"></div>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        $(".info").text("插入的数据");
    </script>
</body>
复制代码

 

标签选择器：$("h1")

复制代码
<body>
    <h1 class="info"></h1>
    <h2 class="info"></h2>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        $("h1").text("插入的数据");
    </script>
</body>
复制代码

 

多选择器，也就是以不同条件选择多个标签：$("h1,.info2,#v1")

复制代码
<body>
    <h1 class="info"></h1>
    <h2 class="info2"></h2>
    <div id ='v1'></div>
    
    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        $("h1,.info2,#v1").text("插入的数据");
    </script>
</body>
复制代码

 

层级选择器，空格代表下一层级：$("#v1 h1.info2")

复制代码
<body>

    <div id ='v1'>
        <h1 class="info"></h1>
        <h1 class="info2"></h1>
    </div>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        $("#v1 h1.info2").text("插入的数据");
    </script>
</body>
复制代码

 

3、 jQuery的筛选器：有了选择器之后为啥还有筛选器呢？在实际工作当中，当使用（选择器）之后可能要需要再做一层筛选，这时就用到了筛选器， 其实（筛选器）更像（关系选择器），它是使用（子、兄、父、子孙...）关系来进行筛选标签的

父级：parent

复制代码
<body>

    <div id ='v1'>
        <h1 id="info"></h1>
    </div>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        // .info 找到h1标签，parent找到它的父级标签，最后找到div标签
        $(".info").parent();
    </script>
</body>
复制代码

 

孩子：children

复制代码
<body>
    <div id ='v1'>
        <h1 id="info1"></h1>
        <h2 id="info2"></h2>
    </div>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        // .v1 找到div标签，children找到它的孩子标签，最后找到h1和h2标签
        $(".v1").children();
    </script>
</body>
复制代码

 

兄弟：

上面的兄弟：prev

下面的兄弟：next

找与自己同层级上面和下面所有兄弟，除自己外：siblings

复制代码
<body>
    <div id ='v1'>
        <h1 id="info1"></h1>
        <h2 id="info2"></h2>
        <h3 id="info3"></h3>
        <h4 id="info4"></h4>
    </div>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        // .info2 找到h2标签，prev上面兄弟h1标签
        $(".info2").prev();
        // .info2 找到h2标签，prev下面兄弟h3标签
        $(".info2").next();
        // .info2 找到h2标签，siblings与自己同级的所有兄弟，找到h1、h3、h4标签
        $(".info2").siblings();
    </script>
</body>
复制代码

 

子孙：find

复制代码
<body>
    <div id="v1">
        <div id ='v2'>
            <h1 id="info1"></h1>
            <h1 id="info2"></h1>
            <h1 id="info3"></h1>
            <h1 id="info4"></h1>
        </div>
    </div>
    
    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        // 找到所有h1标签
        $(".v1").find('h1');
        // 找到id=info1的h1标签
        $(".v1").find('#info1');
    </script>
</body>
复制代码

 

补充1：在（筛选器）里面是可以加条件的， 如下：在找其他兄弟过程中， 加上#test，意思是找其他兄弟id等于test的兄弟

$(".info2").siblings(“#test”);

补充2：jQuery支持链式编程，也就是不断地在后面点下去

$(".v1").find('#info1').find('#info2')...;
posted @   博无止境  阅读(22)  评论(0)  编辑  收藏  举报
相关博文：
·  python网站创建015：jQuery的各种操作
·  python网站创建013：jQuery的下载安装
·  jQuery 筛选器 选择器
·  【2.0】前端基础jQuery之引入
·  jQuery基础
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手