【Python Web】Flask框架（七）jQuery类库

最新推荐文章于 2025-02-05 09:24:44 发布

LibraFree

最新推荐文章于 2025-02-05 09:24:44 发布

阅读量712

点赞数 2

分类专栏： python篇文章标签：前端 flask jquery

本文链接：https://blog.csdn.net/qq_51670115/article/details/126913262

版权

文章目录

- jQuery类库

jQuery类库

jQuery是一个JavaScript第三方模块

基于jQuery，自己开发一个功能。
现成的工具，依赖jQuery。例如：bootstrap动态效果。

快速上手

下载jQuery
jQuery下载文件
应用jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1 id="txt">中国联通</h1>

    <script src="static/js/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        //利用jQuery实现某些功能

        //找到id=txt的标签
        //内容修改
        $("#txt").text("广西联通")
        
    </script>

</body>
</html>

寻找标签

直接寻找

    <h1 id="txt">bkys</h1>
    <h1>bkys</h1>
    <h1>bkys</h1>

   $("#txt")

样式选择器

    <h1 class="c1">bkys</h1>
    <h1 class="c2">bkys</h1>
    <h1>bkys</h1>

	$(".c1")

标签选择器

    <h1 class="c1">bkys</h1>
    <div>bkys</div>
    <h1>bkys</h1>

	$("h1")

层级选择器

// c1下的c2中的a标签
	$(".c1 .c2 a")

多选择器

	$("#c1, #c3, li")

属性选择器

    <input type="text", name="n1">    
    <input type="text", name="n1">    
    <input type="text", name="n3">

	$("input[name = 'n1']")

间接寻找

找兄弟

<div>
    <div>1</div>
    <div id="c1">2</div>
    <div>3</div>
    <div>4</div>
</div>

$("#c1").prev()  //上一个 找到1
$("#c1").next()  // 下一个 2
$("#c1").next().next() // 下一个的下一个 4
$("#c1").siblings()  // 所有的兄弟

找父子

$("#c1").parent() // 父亲
$("#c1").parent().parent() // 的父亲

$("#c1").children()  // 所有的儿子
$("#c1").children(".uu")  // 所有的儿子中寻找class=uu

$("#c1").find(".uu")  // 所有的子孙中的uu
$("#c1").find("div")  // 所有的子孙中的div

案例：菜单的切换

点击展开，再点击隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

最低0.47元/天解锁文章