Web开发：django+前端+数据库（5）

jQuery是一个Javascript第三方模块（第三方类库）。

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

6.1 快速上手

下载jQuery，网址：https://jquery.com/

快速简单应用jQuery

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

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

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

    $("#txt").text("广东");
</script>
</body>
</html>

4.2 寻找标签

ID选择器：

<h1 id="txt">广东</h1>
<h1>湖南</h1>
<h1>湖北</h1>
$("#txt")

样式选择器

<h1 class="c1">广东</h1>
<h1 class="c1">湖南</h1>
<h1 class="c2">湖北</h1>
$(".c1")

标签选择器

<h1 class="c1">广东</h1>
<div class="c1">湖南</h1>
<h1 class="c2">湖北</h1>
$("h1")

层级选择器

<h1 class="c1">广东</h1>
<h1 class="c1">
    <div class="c2">
        <span></span>
        <a></a>
    </div>
</h1>
<h1 class="c2">湖北</h1>
$(".c1 .c2 a")

多选择器

<h1 class="c1">广东</h1>
<h1 class="c1">
    <div class="c3">
        <span></span>
        <a></a>
    </div>
</h1>
<h1 class="c2">湖北</h1>
<ul>
    <li>xx</li>
    <li>xx</li>
</ul>
$("#c1,#c2,li")

属性选择器

<input type='text' name="n1" />
<input type='text' name="n1" />
<input type='text' name="n2" />
$("input[name='n1']")

6.3 间接寻找

找到上一个兄弟

<div>
    <div>广东</div>
    <div id='c1'>湖南</div>
    <div>湖北</div>
    <div>新疆</div>
</div>

$("#c1").prev()     //上一个
$("#c1")
$("#c1").next()      //下一个
$("#c1").next().next()      //下下一个
$("#c1").siblings()        //所有的系统

找父子

<div>
    <div>
        <div>广东</div>
        <div id='c1'>
            <div class="p1">长沙</div>
            <div>郴州</div>
        </div>
        <div>湖北</div>
        <div>新疆</div>
    </div>
    <div>
        <div>陕西</div>
        <div>河南</div>
        <div>河北</div>
        <div>江西</div>
    </div>    
</div>

$("#c1").parent()      //父亲
$("#c1").parent().parent()      //父亲的父亲
$("#c1").children()           //所有的儿子
$("#c1").children(".p1")      //所有的儿子中寻找p1
$("#c1").find(".p1")          //所有的子孙中寻找p1

6.4 操作样式

addClass、removeClass、hasClass

6.5 值的操作

<div id='c1'>内容</div>
$("#c1").text()          //获取文本内容
$("#c1").text("吃饭")          //设置文本内容

<input type='text' id='c2' />
$("#c2").val()           //获取用户输入的值
$("#c2").val("不吃饭")      //设置值

6.6 事件

<input type="button" value="提交" onclick="getInfo()" />

<script>
    function getInfo() {
    }
</script>

在jQuery中可以删除某个标签。

<div id='c1'>内容</div>
$("#c1").remove();

当页面框架加载完成后执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>广东</li>
    <li>湖南</li>
    <li>湖北</li>
</ul>

<script src="static/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        // 当页面的框架加载完成之后，自动就执行。
        $("li").click(function () {
            $(this).remove();
        });

    })


</script>
</body>
</html>