首页 > 编程语言 >python网站创建014:jQuery的引入、选择器和筛选器

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

时间:2023-12-24 22:11:25浏览次数:42  
标签:jQuery info python 标签 h1 v1 info2 选择器

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>

 

标签:jQuery,info,python,标签,h1,v1,info2,选择器
From: https://www.cnblogs.com/FBGG/p/17923776.html

相关文章

  • 【Python常用模块之logging模块】---日志输出功能(示例代码)
    title:【Python常用模块之logging模块】---日志输出功能(示例代码)date:2023-12-2420:14:06updated:2023-12-2420:23:00description:【Python常用模块之logging模块】---日志输出功能(示例代码)cover:https://pythonjishu.com/tdcgatffvrvdoop/2023年6月......
  • 【python常用模块之sys模块】---系统模块(sys)
    title:【python常用模块之sys模块】---系统模块(sys)date:2023-12-2419:54:06updated:2023-12-2420:05:00description:【python常用模块之sys模块】---系统模块(sys)cover:http://www.tuohang.net/article/277594.htmlsys模块“sys”即“system”,“系统......
  • 【python常用模块之subprocess模块】---subprocess模块
    title:【python常用模块之subprocess模块】---subprocess模块date:2023-12-2418:54:06updated:2023-12-2419:50:00description:【python常用模块之subprocess模块】---subprocess模块cover:https://www.cnblogs.com/xxpythonxx/p/17625032.htmlsubproc......
  • 人工智能算法原理与代码实战:从Python到C++
    1.背景介绍人工智能(ArtificialIntelligence,AI)是一门研究如何让计算机模拟人类智能的学科。它涉及到多个领域,包括机器学习、深度学习、计算机视觉、自然语言处理、机器人等。随着数据量的增加和计算能力的提升,人工智能技术的发展得到了极大的推动。在过去的几年里,人工智能的研究......
  • Python入门实战:多线程与多进程
    1.背景介绍随着信息技术的飞速发展,计算机技术也在日新月异的推进着自己的发展趋势。近几年,随着人工智能、云计算等新兴技术的兴起,计算机已经可以处理更加复杂的计算任务,如图像识别、语音识别、机器学习、数据分析等。由于这些新兴技术的需求驱动,传统的单机应用正在慢慢被替换成分布......
  • Python算法——最近公共祖先
    Python中的最近公共祖先(LowestCommonAncestor,LCA)算法详解最近公共祖先(LowestCommonAncestor,LCA)是二叉树中两个节点的最低共同祖先节点。在本文中,我们将深入讨论最近公共祖先问题以及如何通过递归算法来解决。我们将提供Python代码实现,并详细说明算法的原理和步骤。最近公共祖先......
  • Python从入门到实践project Web 应⽤程序 Django ⼊门.2
    projectWeb应⽤程序Django⼊门1.创建网页:学习笔记主页2.创建其他网页创建网页:学习笔记主页映射URLfromdjango.urlsimportpath,includepath('',include('learning_logs.urls')),"""定义learning_logs的URL模式"""fromdjango.urlsimportpath......
  • SciTech-Python-编译Python的C/C++扩展的setup.py
    https://github.com/google-deepmind/tree/setup.py"""Setupforpippackage."""importos,platform,sys,sysconfig,shutil,subprocess,setuptoolsfromsetuptools.commandimportbuild_exthere=os.path.dirname(os.path.abspath......
  • Python教程(17)——python模块是什么?python模块详解
    Python模块简介模块是一个包含了Python定义和语句的文件,可用于将功能组织成可重用和可维护的代码块。每个Python文件都可以作为一个模块,模块可以包含变量、函数、类或可执行代码。通过使用模块,我们可以将代码分离成逻辑单元,促进模块化编程。所以我们可以简单的理解为,一个py文件就......
  • Python3.12新增内容
    https://medium.com/techtofreedom/5-handy-python-3-12-new-features-that-improve-your-coding-experience-fe2d6e1f05b4类型系统,更方便的类型别名声明方式简便的类型别名声明我们可以直接如下定义类型别名Point=tuple[float,float]classPointTest: def__init__(s......