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

news2024/12/23 12:21:07

文章目录

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

前置回顾

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正确链接，并且服务器上该文件是可访问的，否则脚本将不会执行。

在这里插入图片描述

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例小米商城头标】
15.【案例小米商城头标总结】
16.【案例小米商城二级菜单】
17.【案例商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例小米商城中app图标代码】
21.【边框及总结】
22.【BootSrap初了解】
23.【BootSrap的目录栏】
24.【BootSrap的栅格系统】
25.【案例博客案例】
26.【案例登录】
27.【案例后台管理样例】
28.【图标】
29.【BootStrap依赖】
30.【javascript初了解】
31.【jJavaScript的变量】
32.【JavaScript的字符串类型】
33.【JavaScript的数组介绍】
34.【案例动态数据】
35.【javascript 对象（字典）】
36.【案例动态表格】
37.【Javascript的条件语句和函数】
38.【DOM初了解】
39.【DOM的事件了解】
40.【jQuery初了解】
41.【jQuery寻找标签】
42.【jQuery寻找标签2】
43.【jQuery寻找标签(间接寻找)】
44.【案例菜单的切换】
45.【案例只能打开一个菜单】
46.【jQuery 简单操作】
47.【案例动态创建数据】
48.【案例点击获取文本】