3 快速前端开发

3 前端JavaScript

  • 3 前端JavaScript
    • 1. JavaScript
      • 1.1 代码位置
      • 1.2 注释
      • 1.3 变量
      • 1.4 字符串类型
        • 案例：跑马灯
      • 1.5 数组
        • 案例：动态数据
      • 1.6 对象（字典）
        • 案例：动态表格
      • 1.7 条件语句
      • 1.8 函数
    • 2.DOM
      • 2.1 事件的绑定
    • 3.知识点的回顾
    • 4. jQuery
      • 4.1 快速上手
      • 4.2 寻找标签（直接寻找）
      • 4.3 间接寻找
      • 案例：菜单的切换
      • 4.4 操作样式
      • 4.5 值的操作
      • 案例：动态创建数据
      • 4.6 事件
      • 案例：表格操作
    • 5. 前端整合
      • 案例：添加数据页面
    • 总结

各位小伙伴想要博客相关资料的话关注公众号：chuanyeTry即可领取相关资料！

3 前端JavaScript

概要：

  • JavaScript，是一门编程语言。浏览器就是JavaScript语言的解释器。

  • DOM和BOM

    相当于编程语言内置的模块。
例如：Python中的re、random、time、json模块等。

  • jQuery

    相当于是编程语言的第三方模块。
例如：requests、openpyxl

1. JavaScript

JavaScript是一门编程语言。

JavaScript的意义是什么？

让程序实现一些动态的效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.menus{width: 200px;border: 1px solid red;}.menus .header{background-color: gold;padding: 20px 10px;}</style>
</head>
<body><div class="menus"><div class="header" onclick="myFunc()">大标题</div><div class="item">内容</div></div><script type="text/javascript">function myFunc() {//alert("你好呀");confirm("是否要继续？")}</script>
</body>
</html>

前端三大组件：

  • HTML，裸体。
  • CSS，好看的衣服。
  • JavaScript，动态。

1.1 代码位置

在这里插入图片描述

JS代码的存在形式：

  • 当前HTML中。

    <script type="text/javascript">// 编写JavaScript代码
</script>

  • 在其他js文件中，导入使用。

在这里插入图片描述

1.2 注释

  • HTML的注释

    <!-- 注释内容 -->

  • CSS的注释，style代码块

    /* 注释内容 */

  • JavaScript的注释，script代码块

    // 注释内容/* 注释内容 */

1.3 变量

  • Python，编程语言。

    name = "高倩"
print(name)

  • JavaScript，编程语言。

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script type="text/javascript">var name = "高倩";console.log(name);</script>
</body>
</html>

1.4 字符串类型

// 声明
var name = "高倩";
var name = String("高倩");

// 常见功能
var name = "中国联通";var v1 = name.length; 
var v2 = name[0];   // name.charAt(3)
var v3 = name.trim();
var v4 = name.substring(0,2); // 前取后不取
案例：跑马灯
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><span id="txt">欢迎中国联通领导高倩莅临指导</span><script type="text/javascript">function show() {// 1.去HTML中找到某个标签并获取他的内容（DOM）var tag = document.getElementById("txt");var dataString = tag.innerText;// 2.动态起来，把文本中的第一个字符放在字符串的最后面。var firstChar = dataString[0];var otherString = dataString.substring(1, dataString.length);var newText = otherString + firstChar;// 3.在HTML标签中更新内容tag.innerText = newText;}// JavaScript中的定时器，如：每1s执行一次show函数。setInterval(show, 1000);
</script>
</body>
</html>

1.5 数组

// 定义
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);

// 操作var v1 = [11,22,33,44];v1[1]
v1[0] = "高倩";v1.push("联通");        // 尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通");     // 尾部追加 ["联通", 11,22,33,44]
v1.splice(索引位置,0,元素);
v1.splice(1,0,"中国");  // 尾部追加 [11,"中国",22,33,44]v1.pop()     //尾部删除
v1.shift()   //头部删除
v1.splice(索引位置,1)
v1.splice(2,1);  // 索引为2的元素删除 [11,22,44];

var v1 = [11,22,33,44];
for(var idx in v1){// idx=0/1/2/3/    data=v1[idx]
}

var v1 = [11,22,33,44];
for(var i=0; i<v1.length; i++){// i=0/1/2/3   data=v1[idx]
}

注意：break和continue

案例：动态数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul id="city"><!-- <li>北京</li> --></ul><script type="text/javascript">// 发送网络请求，获取数据var cityList = ["北京","上海","深圳"];for(var idx in cityList){var text = cityList[idx];// 创建 <li></li>var tag = document.createElement("li");// 在li标签中写入内容tag.innerText = text;// 添加到id=city那个标签的里面。DOMvar parentTag = document.getElementById("city");parentTag.appendChild(tag);}</script>
</body>
</html>

1.6 对象（字典）

info = {"name":"高倩","age":18
}info = {name:"高倩",age:18
}

info.age
info.name = "郭智"info["age"]
info["name"] = "郭智"delete info["age"]

info = {name:"高倩",age:18
}for(var key in info){// key=name/age      data=info[key]
}
案例：动态表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1"><thead><tr><th>ID</th><th>姓名</th><th>年龄</th></tr></thead><tbody id="body"></tbody>
</table><script type="text/javascript">var info = {id: 1, name: "郭智", age: 19};var tr = document.createElement("tr");for (var key in info) {var text = info[key];var td = document.createElement('td');td.innerText = text;tr.appendChild(td);}var bodyTag = document.getElementById("body");bodyTag.appendChild(tr);</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1"><thead><tr><th>ID</th><th>姓名</th><th>年龄</th></tr></thead><tbody id="body"></tbody>
</table><script type="text/javascript">// 网络请求获取，写入到页面上。var dataList = [{id: 1, name: "郭智1", age: 19},{id: 2, name: "郭智2", age: 19},{id: 3, name: "郭智3", age: 19},{id: 4, name: "郭智4", age: 19},{id: 5, name: "郭智5", age: 19},];for (var idx in dataList) {var info = dataList[idx];var tr = document.createElement("tr");for (var key in info) {var text = info[key];var td = document.createElement('td');td.innerText = text;tr.appendChild(td);}var bodyTag = document.getElementById("body");bodyTag.appendChild(tr);}</script>
</body>
</html>

1.7 条件语句

if ( 条件 )  {}else{}if (1==1){}else{}

if ( 条件 ){}else if ( 条件 ){}else if ( 条件 ){}else{}

1.8 函数

def func():函数的内容...func()

function func(){...
}func()

2.DOM

DOM，就是一个模块，模块可以对HTML页面中的标签进行操作。

// 根据ID获取标签
var tag = document.getElementById("xx");// 获取标签中的文本
tag.innerText// 修改标签中的文本
tag.innerText = "哈哈哈哈哈";

// 创建标签 <div>哈哈哈哈哈</div>
var tag = document.createElement("div");// 标签写内容
tag.innerText = "哈哈哈哈哈";

<ul id="city"><li>北京</li>
</ul><script type="text/javascript">var tag = document.getElementById("city");// <li>北京</li>var newTag = document.createElement("li");newTag.innerText = "北京";tag.appendChild(newTag);
</script>

2.1 事件的绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city"></ul><script type="text/javascript">function addCityInfo() {var newTag = document.createElement("li");newTag.innerText = "联通";var parentTag = document.getElementById("city");parentTag.appendChild(newTag);}</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser"/>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city"></ul><script type="text/javascript">function addCityInfo() {// 1.找到输入标签var txtTag = document.getElementById("txtUser");// 2.获取input框中用户输入的内容var newString = txtTag.value;// 判断用户输入是否为空，只有不为空才能继续。if (newString.length > 0) {// 3.创建标签 <li></li> 中间的文本信息就是用户输入的内容var newTag = document.createElement("li");newTag.innerText = newString;// 4.标签添加到ul中var parentTag = document.getElementById("city");parentTag.appendChild(newTag);// 3.将input框内容清空txtTag.value = "";}else{alert("输入不能为空");}}</script>
</body>
</html>

注意：DOM中还有很多操作。

DOM可以实现很多功能，但是比较繁琐。
页面上的效果：jQuery来实现 / vue.js / react.js

3.知识点的回顾

  • 编码相关

    文件存储时，使用某种编码，打开时就需要使用相同的编码，否则就会乱码。
字符底层存储时本质上都是0101010101010101。
字符和二进制的对应关系（编码）：- ascii编码，256中对应关系。- gb2312，gbk，中文和亚洲的一些国家【中文是2个字节】- unicode，ucs2/ucs4，包括现在发现的所有文明。- utf-8编码，【中文是用几个字节？3字节】Python默认解释器编码(utf-8)python.exe  代码文件如果你将代码文件保存成了gbk编码，将Python模式解释器编码修改成gbk

    data = "中"
res = data.encode('utf-8')
print(res)  # b'\xe4\xb8\xad'data = "国"
res = data.encode('gbk')
print(res)  # b'\xb9\xfa'

  • 计算机中的单位

    位/字节/KB/M/G/T...办流量/硬盘/内存

  • 字符串格式化（三种）

    v1 = "我是{}，锦娘{}".format("武沛齐",77)   # 推荐v2 = "我是%s，今年%d岁" %("武沛齐",77, ) name = "武沛齐"
age = 19
v3 = f"我是{name}，今年{age}岁"

  • 数据类型

    常见数据类型：int、bool、str、list、tuple、dict、set、float、None- 哪些转化弄成布尔值为False：空、None、0- 可变和不可变划分，可变的有哪些：list、set、dict- 可哈希和不可哈希，不可哈希的有哪些：list、set、dict- 字典的键/集合的元素，必须是可哈希的类型（list、set、dict不能做字典的键和集合元素）主要数据类型：- str- 独有功能：upper/lower/startswith/split/strip/join注意：str不可变，不会对原字符串进行修改，新的内容。- 公共功能：len/索引/切片/for循环/判断是否包含- list- 独有功能：append、insert、remove、pop...注意：list可变，功能很多都是对原数据操作。- 公共功能：len/索引/切片/for循环/判断是否包含- dict- 独有功能：get/keys/items/values- 公共功能：len/索引for循环/判断是否包含（判断键效率很高）

  • 运算符

    基本运算符：加减乘除、...一般：1>2 and 3<10
特殊的逻辑运算(整体结果取决于谁？)v1 = 99 and 88    # 88v2 = [] or 10	  # 10v3 = "联通" or []  # "联通"

  • 推导式（简化生成数据）

    data = []
for i in range(10):data.append(i)v1 = [ i for i in range(10) ]
v2 = [ i for i in range(10) if i<5 ]   # [0,1,2,3,4]

  • 函数编程

    函数的基础知识- 定义- 参数，概念：位置传参/关键字传参/参数默认值/动态参数*args,**kwargs- 返回值- 函数中一旦遇到return就立即返回，后续代码不再执行。- 函数么有返回值默认返回None
函数的进阶：- Python中是为函数为作用域。- 全局变量和局部变量，规范：全局变量（大写）、局部变量（小写）。- 在局部变量中可以使用global关键字，global的作用？引用全局的那个变量（不是在局部新建）。内置函数（python内部提供的函数）：- bin/hex/odc/max/min/divmod/sorted/open文件操作文件操作：- 基本操作：打开、操作、关闭，为了防止忘记关闭文件，可以怎么做？with- 打开文件时有模式：- r/rb，读        【文件不存在，报错】       【文件夹不存在，报错】- w/wb，写（清空） 【文件不存在，自动新建】    【文件夹不存在，报错】- a/ab，追加      【文件不存在，自动新建】    【文件夹不存在，报错】注意：os.makedirs/os.path.exsits、是否存在，不存在新建目录。

  • 模块

    模块的分类：- 自定义模块：- os.path，导入模块时python内部都回去那个目录找。- 自己写py文件时，不要与python内置模块同名。- import/from xx import xx- 内置模块：time/datetime/json/re/random/os..- 第三方模块：requests、openpyxl、python-docx、flask、bs4查看当前目录下所有的文件：os.listdir / os.walk
关于时间模块：时间戳 / datetime格式 / 字符串 ，三种时间格式可以互相转化。
关于JSON模块：- JSON本质是字符串，有一些自己格式的要求，例如：无元组/无单引号。- json.dumps序列化时，只能序列化Python常用数据类型：+-------------------+---------------+| Python            | JSON          |+===================+===============+| dict              | object        |+-------------------+---------------+| list, tuple       | array         |+-------------------+---------------+| str               | string        |+-------------------+---------------+| int, float        | number        |+-------------------+---------------+| True              | true          |+-------------------+---------------+| False             | false         |+-------------------+---------------+| None              | null          |+-------------------+---------------+
关于re正则模块：- 正则：\d  \w - 贪婪匹配和非贪婪匹配（默认），想让他不贪婪个数后面 ? 。- re.search/re.match/re.findall第三方模块，都有哪些方式可以让我们安装第三方模块。- pip管理工具- 源码- wheel包

  • 面向对象

    目标：不是为了用面向对编程（推荐使用函数编程，面向对象要看的懂）。面向对象三大特性：封装、继承、多态。

  • 前端开发

    - 前端知识点分为三部分：- HTML，标签具有模式特点。- CSS，修改标签的特点。- JavaScript，动态。- HTML标签- div/span/a/img/input/form/table/ul...- 块级和行内标签，例如：div span 默认谁是块级标签？div注意：css样式，发现行内标签设置高端、宽度、内边距、外边距都是无效。- form表单 + input/select/textarea 数据框- action，提交地址- method，提交方式- form标签中有一个submit- 内部标签都需要设置name属性- CSS样式- 局部一定会用到的样式：div + float（脱离文档流，clear:both; clearfix）- 高度和宽度- 边距- 内边距，padding- 外边距，margin- 字体大小/颜色- 边框- 背景颜色- hover，鼠标放上去就会触发的CSS样式。

4. jQuery

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

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

4.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">中国联通1</h1>
<h1 class="c1">中国联通2</h1>
<h1 class="c2">中国联通3</h1>

    $(".c1")

  • 标签选择器

    <h1 class="c1">中国联通1</h1>
<div class="c1">中国联通2</h1>
<h1 class="c2">中国联通3</h1>

    $("h1")

  • 层级选择器

    <h1 class="c1">中国联通1</h1>
<h1 class="c1"><div class="c2"><span></span><a></a></div>
</h1>
<h1 class="c2">中国联通3</h1>

    $(".c1 .c2 a")

  • 多选择器

    <h1 class="c1">中国联通1</h1>
<h1 class="c1"><div class="c3"><span></span><a></a></div>
</h1>
<h1 class="c2">中国联通3</h1>
<ul><li>xx</li><li>xx</li>
</ul>

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

  • 属性选择器

    <input type='text' name="n1" />
<input type='text' name="n1" />
<input type='text' name="n2" />

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

4.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>青浦区</div><div class="p10">宝山区</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(".p10")          // 所有的儿子中寻找class=p10$("#c1").find(".p10")              // 去所有子孙中寻找class=p10
$("#c1").find("div")              // 去所有子孙中寻找class=p10

案例：菜单的切换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.menus{width: 200px;height: 800px;border: 1px solid red;}.menus .header{background-color: gold;padding: 10px 5px;border-bottom: 1px dotted #dddddd;}.menus .content a{display: block;padding: 5px 5px;border-bottom: 1px dotted #dddddd;}.hide{display: none;}</style>
</head>
<body><div class="menus"><div class="item"><div class="header" onclick="clickMe(this);">上海</div><div class="content hide"><a>宝山区</a><a>青浦区</a><a>浦东新区</a><a>普陀区</a></div></div><div class="item"><div class="header" onclick="clickMe(this);">北京</div><div class="content hide"><a>海淀区</a><a>朝阳区</a><a>大兴区</a><a>昌平区</a></div></div></div><script src="static/jquery-3.6.0.min.js"></script><script>function clickMe(self) {// $(self)  -> 表示当前点击的那个标签。// $(self).next() 下一个标签// $(self).next().removeClass("hide");   删除样式$(self).next().removeClass("hide");}</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.menus{width: 200px;height: 800px;border: 1px solid red;}.menus .header{background-color: gold;padding: 10px 5px;border-bottom: 1px dotted #dddddd;cursor: pointer;}.menus .content a{display: block;padding: 5px 5px;border-bottom: 1px dotted #dddddd;}.hide{display: none;}</style>
</head>
<body><div class="menus"><div class="item"><div class="header" onclick="clickMe(this);">上海</div><div class="content hide"><a>宝山区</a><a>青浦区</a><a>浦东新区</a><a>普陀区</a></div></div><div class="item"><div class="header" onclick="clickMe(this);">北京</div><div class="content hide"><a>海淀区</a><a>朝阳区</a><a>大兴区</a><a>昌平区</a></div></div></div><script src="static/jquery-3.6.0.min.js"></script><script>function clickMe(self) {var hasHide = $(self).next().hasClass("hide");if(hasHide){$(self).next().removeClass("hide");}else{$(self).next().addClass("hide");}}</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.menus {width: 200px;height: 800px;border: 1px solid red;}.menus .header {background-color: gold;padding: 10px 5px;border-bottom: 1px dotted #dddddd;cursor: pointer;}.menus .content a {display: block;padding: 5px 5px;border-bottom: 1px dotted #dddddd;}.hide {display: none;}</style>
</head>
<body>
<div class="menus"><div class="item"><div class="header" onclick="clickMe(this);">上海</div><div class="content"><a>宝山区</a><a>青浦区</a><a>浦东新区</a><a>普陀区</a></div></div><div class="item"><div class="header" onclick="clickMe(this);">北京</div><div class="content hide"><a>海淀区</a><a>朝阳区</a><a>大兴区</a><a>昌平区</a></div></div><div class="item"><div class="header" onclick="clickMe(this);">上海2</div><div class="content hide"><a>宝山区</a><a>青浦区</a><a>浦东新区</a><a>普陀区</a></div></div><div class="item"><div class="header" onclick="clickMe(this);">北京2</div><div class="content hide"><a>海淀区</a><a>朝阳区</a><a>大兴区</a><a>昌平区</a></div></div>
</div><script src="static/jquery-3.6.0.min.js"></script>
<script>function clickMe(self) {// 让自己下面的功能展示出来$(self).next().removeClass("hide");// 找父亲，父亲的所有兄弟，再去每个兄弟的子孙中寻找 class=content，添加hide样式$(self).parent().siblings().find(".content").addClass("hide");}
</script>
</body>
</html>

4.4 操作样式

  • addClass
  • removeClass
  • hasClass

4.5 值的操作

<div id='c1'>内容</div>

$("#c1").text()        // 获取文本内容
$("#c1").text("休息")   // 设置文本内容

<input type='text' id='c2' />

$("#c2").val()            // 获取用户输入的值
$("#c2").val("哈哈哈")     // 设置值

案例：动态创建数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="txtUser" placeholder="用户名">
<input type="text" id="txtEmail" placeholder="邮箱">
<input type="button" value="提交" onclick="getInfo()"/><ul id="view">
</ul><script src="static/jquery-3.6.0.min.js"></script>
<script>function getInfo() {// 1.获取用户输入的用户名和密码var username = $("#txtUser").val();var email = $("#txtEmail").val();var dataString = username + " - " + email;// 2.创建li标签，在li的内部写入内容。 $("<li>")var newLi = $("<li>").text(dataString);// 3.把新创建的li标签添加到ul里面。$("#view").append(newLi);}</script>
</body>
</html>

4.6 事件

<input type="button" value="提交" onclick="getInfo()"/><script>function getInfo() {}
</script>

<ul><li>百度</li><li>谷歌</li><li>搜狗</li>
</ul><script>$("li").click(function(){// 点击li标签时，自动执行这个函数；// $(this)  当前你点击的是那个标签。});
</script>

<!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>$("li").click(function () {var text = $(this).text();console.log(text);});</script>
</body>
</html>

在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>$("li").click(function () {$(this).remove();});</script>
</body>
</html>

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

<!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>

案例：表格操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1"><thead><tr><th>ID</th><th>姓名</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>武沛齐</td><td><input type="button" value="删除" class="delete"/></td></tr><tr><td>1</td><td>武沛齐</td><td><input type="button" value="删除" class="delete"/></td></tr><tr><td>1</td><td>武沛齐</td><td><input type="button" value="删除" class="delete"/></td></tr><tr><td>1</td><td>武沛齐</td><td><input type="button" value="删除" class="delete"/></td></tr></tbody>
</table><script src="static/jquery-3.6.0.min.js"></script>
<script>$(function () {//找到所有class=delete的标签，绑定事件$(".delete").click(function () {// 删除当前行的数据$(this).parent().parent().remove();});})
</script>
</body>
</html>

5. 前端整合

  • HTML
  • CSS
  • JavaScript、jQuery
  • BootStrap（动态效果依赖jQuery）。

案例：添加数据页面

人员信息录入功能，需要提供用户信息：

用户名、年龄、薪资、部门、入职时间（*）

对于时间的选择：不能输入；选择；（插件） datetimepicker

  • 下载插件
  • 应用插件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css"><link rel="stylesheet" href="static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css">
</head>
<body>
<div class="container"><form class="form-horizontal" style="margin-top: 20px"><div class="row clearfix"><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">姓名</label><div class="col-sm-10"><input type="text" class="form-control" placeholder="姓名"></div></div></div><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">年龄</label><div class="col-sm-10"><input type="text" class="form-control" placeholder="年龄"></div></div></div></div><div class="row clearfix"><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">薪资</label><div class="col-sm-10"><input type="text" class="form-control" placeholder="薪资"></div></div></div><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">部门</label><div class="col-sm-10"><select class="form-control"><option>IT部门</option><option>销售部门</option><option>运营部</option></select></div></div></div></div><div class="row clearfix"><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">入职日期</label><div class="col-sm-10"><input type="text" id="dt" class="form-control" placeholder="入职日期"></div></div></div></div><div class="row clearfix"><div class="col-xs-6"><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary">提 交</button></div></div></div></div></form></div><script src="static/js/jquery-3.6.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
<script src="static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script><script>$(function () {$('#dt').datepicker({format: 'yyyy-mm-dd',startDate: '0',language: "zh-CN",autoclose: true});})
</script>
</body>
</html>

总结

  1. 了解HTML标签、标签结构，基于他可以实现简单的页面。
  2. CSS，了解基本样式； 在别人模板的基础改就可以。
  3. JavaScript、jQuery，了解基本使用
    • 事件绑定/寻找标签/操作标签。
    • 导入现成插件。

后续开发过程中，对于前端就是在BootStrap的基础整改。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/613996.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

redis中的string相关的部分命令

redis中的string相关的部分命令

redis命令手册 redis中文官网查看文档 挨个进行输出调试 Redis Setnx 命令 Redis Getrange 命令 Redis Mset 命令 redis 127.0.0.1:6379> MSET key1 "Hello" key2 "World" OK redis 127.0.0.1:6379> GET key1 "Hello" redis 127.0.0.1:…
阅读更多...
LLVM的安装步骤实战

LLVM的安装步骤实战

目录 1. 准备环境 1.1 安装必备软件包 1.2 配置Git 2. 用CMake构建 2.1 克隆代码库 2.2 创建构建目录 2.3 生成构建系统文件 3. 自定义构建 3.1 CMake定义的变量 3.2 LLVM定义的变量 4. 总结 1. 准备环境 首先操作系统可以是Linux、FreeBSD、macOS或Windows。 同…
阅读更多...
2.【CPP】入门（宏||内联函数||拷贝构造||析构函数||构造函数）

2.【CPP】入门（宏||内联函数||拷贝构造||析构函数||构造函数）

0x01.引言 1.实现一个宏函数ADD #define ADD(x,y) ((x)(y))//宏是预编译阶段完成替换&#xff0c;注意括号2.宏的优缺点 优点&#xff1a; 1.增强代码的复用性 2.宏函数不用建立栈帧&#xff0c;提高性能 缺点&#xff1a; 1.不方便调试 2.没有安全检查 0x02.内联函数 1.以空…
阅读更多...
可狱可囚的爬虫系列课程 11：Requests中的SSL

可狱可囚的爬虫系列课程 11：Requests中的SSL

一、SSL 证书 SSL 证书是数字证书的一种&#xff0c;类似于驾驶证、护照、营业执照等的电子副本。SSL 证书也称为 SSL 服务器证书&#xff0c;因为它是配置在服务器上。 SSL 证书是由受信任的数字证书颁发机构 CA 在验证服务器身份后颁发的&#xff0c;其具有服务器身份验证和…
阅读更多...
base64与BytesIO图片进行编码、解码；api调用

base64与BytesIO图片进行编码、解码；api调用

base64与BytesIO简单介绍 io.BytesIO 和 Base64 编码都是用于在内存中处理二进制数据的方法&#xff0c;但它们的目的和使用场景有所不同。 1&#xff09; io.BytesIO io.BytesIO 是 Python io 库中的一个类&#xff0c;它提供了一个在内存中处理二进制数据的接口&#xff0…
阅读更多...
Linux最常用的几个时间日期命令

Linux最常用的几个时间日期命令

文章目录 Linux最常用的几个时间日期命令一日难再晨及时当勉励 date默认输入显示时区世界协调时格式化日期 时光总是催人老 time语法示例 休息一会 sleep休息5分钟1小时后提醒我时分秒搭配使用倒计时计时器结合脚本 更多信息 Linux最常用的几个时间日期命令 桃花谢了春红&…
阅读更多...
如何在Docker本地搭建流程图绘制神器draw.io并实现公网远程访问

如何在Docker本地搭建流程图绘制神器draw.io并实现公网远程访问

推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站 前言 提到流程图&#xff0c;大家第一时间可能会想到Visio&#xff0c;不可否认&#xff0c;VIsio确实是功能强大&#xff0c;但是软…
阅读更多...
C++里main函数int main(int argc, char **argv)

C++里main函数int main(int argc, char **argv)

C里main函数int main(int argc, char **argv), 这两个参数argc和argv分别是什么
阅读更多...
Vue3组件库 -- element plus 树形选择器组件怎样显示已有的树形菜单？

Vue3组件库 -- element plus 树形选择器组件怎样显示已有的树形菜单？

<el-tree-selectv-model"form.topmneu":data"tableData":props"{ label: title, value: id }":render-after-expand"false"style"width: 100%"check-strictly/> 添加 :props "{ lable : 字段名 , value: 字段…
阅读更多...
极客时间-读多写少型缓存设计

极客时间-读多写少型缓存设计

背景 内容是极客时间-徐长龙老师的高并发系统实战课的个人学习笔记&#xff0c;欢迎大家学习&#xff01;https://time.geekbang.org/column/article/596644 总览内容如下&#xff1a; 缓存性价比 一般来说&#xff0c;只有热点数据放到缓存才更有价值 数据量查询频率命中…
阅读更多...
java基础之异常练习题

java基础之异常练习题

异常 1.Java 中所有的错误/异常都继承自 Throwable类&#xff1b;在该类的子类中&#xff0c; Error 类表示严重的底层错误&#xff0c; 对于这类错误一般处理的方式是 直接报告并终止程序 &#xff1b; Exception 类表示异常。 2.查阅API&#xff0c;完成以下填空&#xff1a;…
阅读更多...
leetcode动态规划（零钱兑换II、组合总和 Ⅳ）

leetcode动态规划（零钱兑换II、组合总和 Ⅳ）

518.零钱兑换II 给定不同面额的硬币和一个总金额。写出函数来计算可以凑成总金额的硬币组合数。假设每一种面额的硬币有无限个。 示例 1: 输入: amount 5, coins [1, 2, 5] 输出: 4 解释: 有四种方式可以凑成总金额: 55 5221 52111 511111 示例 2: 输入: amount 3, coi…
阅读更多...
【江科大STM32单片机】day1点亮LED灯流水灯蜂鸣器

【江科大STM32单片机】day1点亮LED灯流水灯蜂鸣器

知识点 推挽模式&#xff1a;高-》低、低-》高电平都能驱动 开漏模式&#xff1a;只能低-》高电平能驱动&#xff0c;高电平相当于高阻态 GPIO_WriteBit 操作单个 GPIO_ResetBits 操作同组 3-2 led闪烁 配置相关驱动 USE_STDPERIPH_DRIVER 配置输出文件格式debug配置slink勾选…
阅读更多...
基于Springboot的课程答疑系统（有报告）。Javaee项目，springboot项目。

基于Springboot的课程答疑系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的课程答疑系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…
阅读更多...
Python知识点（史上最全）

Python知识点（史上最全）

Python期末考试知识点&#xff08;史上最全&#xff09; python简介 Python是一种解释型语言 Python使用缩进对齐组织代码执行&#xff0c;所以没有缩进的代码&#xff0c;都会在载入时自动执行 数据类型&#xff1a;整形 int 无限大 浮点型 float…
阅读更多...
小程序基础学习（组件化）

小程序基础学习（组件化）

&#xff08;一&#xff09;创建 找到components文件夹下面创建新的文件夹 然后再文件夹内创建component格式的文件 创建后这样 我创建的是my-info的文件夹以及my-info的components文件&#xff0c;跟着普通的页面一样 &#xff08;二&#xff09; 注册组件 找到你需要使用组…
阅读更多...
微信小程序-----宿主环境（组件介绍和代码编写）

微信小程序-----宿主环境（组件介绍和代码编写）

目录 前言 宿主环境简介 1. 什么是宿主环境 ​编辑 2.小程序的宿主环境 3. 小程序宿主环境包含的内容 一、通信模型 1. 通信的主体 2. 小程序的通信模型 二、运行机制 1.小程序启动的过程 2.页面渲染的过程 三、组件 常用的视图容器类组件 1.view 组件 2.scroll-…
阅读更多...
RK3399平台入门到精通系列讲解（驱动篇）eventpoll结构体详解

RK3399平台入门到精通系列讲解（驱动篇）eventpoll结构体详解

🚀返回总目录 文章目录 一、eventpoll 结构体二 、epitem 结构体三、eppoll_entry 结构体eventpoll 结构体：eventpoll 结构体是 epoll 在内核中的核心结构epitem 结构体：epitem 结构体用于表示 epoll 实例中的事件项eppoll_entry 结构体：它的作用就是关联Socket等待队列中…
阅读更多...
MES数据采集在制造业的应用

MES数据采集在制造业的应用

MES设备数据采集的流程包括以下几个步骤&#xff1a; 1. 设备接入&#xff1a;将设备接入MES系统&#xff0c;建立设备与MES系统之间的连接。 2. 数据采集&#xff1a;通过传感器和采集器等设备&#xff0c;采集设备运行数据和状态信息。 3. 数据存储&#xff1a;将采集到的设…
阅读更多...
【JaveWeb教程】（19） MySQL数据库开发之 MySQL数据库操作-DML 详细代码示例讲解

【JaveWeb教程】（19） MySQL数据库开发之 MySQL数据库操作-DML 详细代码示例讲解

目录 3. 数据库操作-DML3.1 增加(insert)3.2 修改(update)3.3 删除(delete)3.4 总结 3. 数据库操作-DML DML英文全称是Data Manipulation Language(数据操作语言)&#xff0c;用来对数据库中表的数据记录进行增、删、改操作。 添加数据&#xff08;INSERT&#xff09;修改数据…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023