django学习入门系列之第七点《案例点击删除文本》

铁匠匠匠

已于 2024-08-13 01:12:03 修改

阅读量770

点赞数 6

分类专栏： django 文章标签： django 学习 python 笔记 sqlite 前端框架前端

于 2024-08-12 00:09:32 首次发布

本文链接：https://blog.csdn.net/qq_62548908/article/details/141114091

版权

django 专栏收录该内容

91 篇文章 0 订阅

订阅专栏

文章目录

前置回顾
案例点击删除文本
总结
往期回顾

前置回顾

HTML结构：

页面使用<!DOCTYPE html>声明为HTML5文档。
<html>标签定义了页面的根元素，并且设置了lang="en"属性，表示页面内容使用英语。
<head>部分包含了文档的元数据，如<meta charset="UTF-8">指定了页面编码为UTF-8，<title>标签定义了页面的标题。

页面内容：

<body>标签内定义了页面的可见内容，这里是一个无序列表<ul>，包含三个列表项<li>，分别是"百度"、“谷歌"和"必应”。

JavaScript脚本：

页面底部引入了一个外部JavaScript文件js.js，这个文件可能包含了页面所需的其他JavaScript代码。
紧接着是一个<script>标签，内嵌了一段JavaScript代码，使用了jQuery库来处理列表项的点击事件。
jQuery脚本功能：
使用$(function () {...})即jQuery的$(document).ready()方法，确保DOM完全加载后执行内部的函数。
$("li").click(function () {...})为每个<li>元素绑定了一个点击事件处理器，当点击任一列表项时，该项会被从页面中移除。

案例点击删除文本

<!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/js/js.js"></script>
<script type="text/javascript">

    $(function () {
        //当界面加载完成时自动执行（固定这么写）
        $("li").click(function () {
            $(this).remove();
        });
    })
</script>
</body>
</html>

为什么要用加载完成后自动执行那个
- 就像淘宝主页网络差时图片还没加载完你点击啊某些按钮也是可以生效的

总结

这是一个基础的HTML页面，展示了如何使用HTML和jQuery来创建具有交互性的网页元素。
页面中的列表项在被点击后会被删除，这是通过jQuery的事件绑定和DOM操作实现的。
需要注意的是，实际使用中应确保外部JavaScript文件js.js正确链接，并且服务器上该文件是可访问的，否则脚本将不会执行。

在这里插入图片描述