前端知识总汇
HTML
- 超文本标记语言
注释
由于 HTML 代码杂乱无章，我们习惯性的用注释来划定区域方便后续的查找HTML 的文档结构
DOCTYPE html><html lang="en"><head> head><body>body>html>head 内常用标签
<head> <meta name="keyword" content="搜索关键字"> <meta name="description" content="网页秒数信息"> <title>title> <style>style> <link rel="stylesheet" href="mycss.css"> <scritpt>scritpt> <script src="myjs.js">script> head>body 内常用标签
基本标签
<h1> 一级标签 h1> <b>加粗b><i>斜体i><u>下划线u><s>删除线s><br> <hr> 标签的分类
- 块级标签
- 独占一行
- 可以修改长宽
- 块级标签内部可以嵌套任意的块级标签和行内标签
- 例外： p 标签只能嵌套行内标签
常见的块级标签<h1>h1><div>div><p>p>- 行内标签
- 自身文本多大就占多大
- 只能嵌套行内标签
<i>斜体i><u>下划线u><s>删除线s><br> <hr> 特殊符号
<p> p> <p>> <p> <p>&p> <p>¥p> <p>©p> <p>®p> 常用标签
<div> <span>Hello Worldspan> div><a href="" id="d1">a><br><img src="111.png" alt="this is my wife" height="400px" title="YiFei Liu"><br><a href=""id="#d1">点此回到图片上a>列表标签
无序列表
<ul> <li>第一项li> <li>第二项li> <li>第二项li> <li>第二项li> ul>有序列表
<ol type="1" start="5"> <li>111li> <li>222li> <li>333li> ol>标题列表
<dl> <dt>标题1dt> <dd>内容1dd> <dt>标题2dt> <dd>内容2dd> <dt>标题3dt> <dd>内容3dd> dl>表格
<table> <thead> <tr> <th>usernameth> 加粗文本 <td>usernametd> 正常文本 tr> thead> <tbody> <tr> <td>jasontd> <td>123td> <td>readtd> tr> tbody>table><table border="1"> 加外边宽<td colspan="2">egontd> 水平方向占多行 <td rowspan="2">DBJtd> 垂直方向占多行表单标签
- 能够获取前端用户的数据，基于网络发送给后端服务
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <input> form>input标签 就类似于前端的变形金刚 通过type属性变形text:普通文本 password:密文date:日期 submit:用来触发form表单提交数据的动作 button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能 reset:重置内容 radio:单选 默认选中要加checked='checked' <input type="radio" name="gender" checked='checked'>男 当标签的属性名和属性值一样的时候可以简写 <input type="radio" name="gender" checked>女checkbox:多选 <input type="checkbox" checked>DBJ file:获取文件 也可以一次性获取多个 <input type="file" multiple>select标签 默认是单选 可以加mutiple参数变多选 默认选中selected<select name="" id="" multiple> <option value="" selected>新垣结衣option> <option value="" selected>斯佳丽option> <option value="">明老师option> select>textarea标签 获取大段文本 <textarea name="" id="" cols="30" rows="10">textarea># 能够触发form表单提交数据的按钮有哪些(一定要记住)1、<input type="submit" value="注册">2、<button>点我button> # 所有获取用户输入的标签 都应该有name属性name就类似于字典的key 用户的数据就类似于字典的value <p>gender: <input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="radio" name="gender">其他 p>标签的两个重要属性
id值，类似于身份证号，同一个 HTML 页面上唯一不能重复class值，一个标签可以继承多个 class 值- 标签内可以有默认的属性（键值对），也可以有自自定义的属性
CSS
- 层叠样式表：给 HTML 添加样式
注释
语法结构
选择器 { 属性1:值1; 属性2:值2; 属性3:值3; 属性4:值4;}css 三种引入方式
1.style标签内部直接书写(为了教学演示方便我们用第一种) 2.link标签引入外部css文件(最正规的方式 解耦合) "stylesheet" href="mycss.css">3.行内式(一般不用) "color: green">老板好 要上课吗?
css 选择器
基本选择器
组合选择器
div span { color: red; } div>span { color: red; } div+span { color: aqua; } div~span { color: red; }属性选择器
""1 含有某个属性2 含有某个属性并且有某个值3 含有某个属性并且有某个值的某个标签"""属性选择器是以[]作为标志的[username] { background-color: red; }*/[username='jason'] { background-color: orange; }input[username='jason'] { background-color: wheat; }选择器优先级
- 选择器相同 书写顺序不同
- 就近原则:谁离标签更近就听谁的
- 选择器不同 …
- 行内 > id选择器 > 类选择器 > 标签选择器
- 精确度越高越有效
css 属性
- 行内标签无法设置长宽，就算写了也无法生效
字体属性
font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的 写多个备用*!*/font-size: 24px; font-weight: inherit; color: red; color: #ee762e; color: rgb(128,23,45); color: rgba(23, 128, 91, 0.9); 文字属性
text-align: center; */text-align: right;text-align: left;text-align: justify; text-decoration: underline;text-decoration: overline;text-decoration: line-through;text-decoration: none;a {text-decoration: none; }边框
p { background-color: red; border-width: 5px; border-style: solid; border-color: green; } div { border-left-width: 5px; border-left-color: red; border-left-style: dotted; border-right-width: 10px; border-right-color: greenyellow; border-right-style: solid; border-top-width: 15px; border-top-color: deeppink; border-top-style: dashed; border-bottom-width: 10px; border-bottom-color: tomato; border-bottom-style: solid; } #d1 { background-color: greenyellow; height: 400px; width: 400px; border-radius: 50%; }display 属性
display: none; display: inline; display: block; display: inline-block; 溢出属性
overflow: visible; overflow: hidden; overflow: scroll; overflow: auto;盒子模型
- 标签和标签之间的距离
margin外边距 - 标签的边框
border - 内容到边框的距离
padding内边距 - 注意：浏览器会自带 8px 的 margin，可以去掉
body {margin: 0;}
margin: 0; margin: 10px 20px 30px; margin: 10px 20px 30px 40px; margin-left: 0;margin-top: 0;margin-right: 0;margin-bottom: 0; margin: 0 auto; #d1 {margin-bottom: 50px;} #d2 {margin-top: 20px; }定位
-
静态
所有的标签默认都是静态的static，无法改变位置
-
相对定位(了解)
相对于标签原来的位置做移动relative
-
绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
-
固定定位(常用)
相对于浏览器窗口固定在某个位置
eg:右侧小广告
position: static; position: relative;position: absolute; position: fixed; 文档流(原来的位置是否还保留)
- 不脱离文档流：相对定位
- 脱离文档流：浮动、绝对定位、固定定位
JavaScript
- 现在最多用的是 5.9 和 6.0 版本的 js
HTML 插入 JS
<button type="button" onclick="alert('欢迎!')">点我!button><script type="javascript">...script><script type="javascript" src="myjs.js">script>注释和变量
注释
// 单行注释注意
- js 和 python 一样，是动态类型的语言，不需要为此定义变量类型
声明变量的两种方式
var 变量名; // 全局变量let 变量名; // 可以区分全局和局部变量常量
const PI = 3.14; // 更改会报错数值类型number
- js 不区分数值的整数和小数，一律都是 number 类型
var a = 10;typeof(a) // number类型转换
parseInt()parseFloat() // 将字符串型转换为 numberparseInt('12312312') // 12312312// 将字符串型转换为 number, 并保留小数parseFloat('11.11') // 11.11// 将字符串型转换为 number, 不保留小数parseInt('11.11') // 11// 对于有其他字符的，只保留前面的一部分parseInt('123sdasdajs2312dasd') // 123// 当前面不是字符串时，会返回 NaNparseInt('asdasdad123sdasdajs2312dasd') // NaN// NaN 是 number 类型typeof NaN // number字符串类型string
var name = 'codeFun' // 单引号声明var name = "codeFun" // 双引号声明// 不支持三引号声明模板字符串
name = 'codeFun';age = 18;str = `my name is ${name}, age is ${age}` // '\n\tmy name is codeFun, age is 18\n'常用的字符串方法
//返回长度.length// 去除空白.trim() // 移除空白.trimLeft() // 移除左边的空白.trimRight()// 移除右边的空白// 字符切片.charAt(n)// 返回第n个字符.indexOf(substring, start)// 子序列位置.substring(from, to)// 根据索引获取子序列.slice(start, end)// 切片.split(delimiter, limit) // 分割// 转换大小写.toLowerCase()// 小写.toUpperCase() // 大写布尔值Boolean
truefalse // 空字符串、0、null、undefined、NaNnull 和 undefined
- null 是将赋值完的变量名给空值，undefined 是未赋值
数组
// 类似于 python 中的列表var l = [11,22,33,44,55]常用方法
.length // 获取长度.push(element) // 向最后追加增加元素.pop() // 弹出最后一个元素并返回.unshift(element) // 在 0 索引添加元素.shift() // 弹出 0 号索引的元素并返回.reverse() // 反转.join(连接符) // 使用连接符将列表连接起来并返回.concat(list_name) // 连接两个数组返回新的数组.sort() // 进行排序.splice(index,delete_num) // 从 index 的位置，删除 delete_num 个元素// 从 index 的位置，删除 delete_num 个元素,添加指定元素 element.splice(index,delete_num,element)遍历数组
l.forEach(function(value){console.log(value)}, l) // 遍历打印元素// 遍历打印元素 和 索引l.forEach(function(value, index){console.log(value,index)}, l) // 遍历打印元素 索引 元素的数据来源l.forEach(function(value,index,arr){console.log(value,index,arr)}, l)// map 和 foreach 的用法差不多var ll = [11,22,33,44,55,66]ll.map(function (value) { return value * 2},ll)// [22, 44, 66, 88, 110, 132]运算符
// 算术运算符// 加号在前先加后赋值 加号在后先赋值后加var x = 10;var res1 = x++; // res1 10var res2 = ++x; // res2 12// 比较运算符1 == '1' # 弱等于 内部自动转换成相同的数据类型比较了true 1 === '1' # 强等于 内部不做类型转换false流程控制
if 判断
if(条件){ 代码块;}else if(条件){ 代码块;}else{ 代码块;}Switch 判断
var num = 2;switch (num){ case 0: 代码块; break; case 2: 代码块; break; ... default: 代码块}for 循环
for(起始位;条件;循环一次后对于起始位的操作){ 代码块;}// 打印0~9for(var i = 0;i < 10;i ++){ console.log(i)}while 循环
while(条件){ 代码块;}函数
函数的定义和调用
// 定义function function_name([params]){ 代码块; [return return_value]}// 调用// 调用函数时，传入参数的多或少都不会报错！// 函数的返回值只能是一个，多个可以使用数组包括！[return_vaule =] function_name([params])限制调用函数的参数
function func2(a,b){ if(arguments.length<2){ console.log('传少了') }else if (arguments.length>2){ console.log('传多了') }else{ console.log('正常执行') }}匿名函数
function([params]){ 代码块;}箭头函数
var function_name = params => params;// 上面和下面的等价var function_name = function(params){ return params}对象
自定义对象
"""第一种创建自定义对象的方式"""var d = {'name':'jason','age':18}typeof d // "object"取值d['name'] // "jason"d.name // "jason""""第二种创建自定义对象的方式 需要使用关键字 new"""var d2 = new Object() # {}d2.name = 'jason' // {name: "jason"}d2['age'] = 18 // {name: "jason", age: 18}Date 日期对象
let date = new Date() // Thu Apr 20 2023 11:29:07 GMT+0800 (中国标准时间)d3.toLocaleString() // '2023/4/20 11:29:07'// 也支持自己手动输入时间let d4 = new Date('2200/11/11 11:11:11')d4.toLocaleString()let d5 = new Date(1111,11,11,11,11,11)d5.toLocaleString() # 月份从0开始0-11月"1111/12/11 上午11:11:11"# 时间对象具体方法let d6 = new Date();d6.getDate() 获取日d6.getDay()获取星期d6.getMonth()获取月份(0-11)d6.getFullYear()获取完整的年份d6.getHours()获取小时d6.getMinutes()获取分钟d6.getSeconds()获取秒d6.getMilliseconds() 获取毫秒d6.getTime()时间戳JSON 对象
JSON.stringify() // 序列化 类似于 python 中的 dumpsJSON.parse() // 反序列化 类似于 python 中的 loads// 实例：var dict = {'name': 'codeFun', age: 18};dict_json = JSON.stringify(dict) // '{"name":"codeFun","age":18}'JSON.parse(dict_json) // {name: 'codeFun', age: 18}RegExp 对象
// 创建对象var reg_obj01 = new RegExp('^[a-zA-Z]{1,5}$'); // 匹配 1-5 个由大小写字母组成的字串var reg_obj02 = /^[a-zA-Z]{1,5}$/; // 匹配 1-5 个由大小写字母组成的字串// 匹配内容reg_obj01.test(); // 什么不写，匹配 undefinedreg_objo1.test('codeFun'); // 返回 false// 字符串匹配var str01 = 'hello world';var result_list = str01.match(/o/);console.log(result_list) // ['o', index: 4, input: 'hello world', groups: undefined] 只能找到一个var result = str01.match(/o/g) // 全局查找，能够找到两个"""全局匹配有一个 lastIndex 属性，匹配一次后指针就到最后了，下一次再匹配就是 false"""BOM 和 DOM
- BOM（Browser Object Model）浏览器操作对象
- 使用 js 代码操作浏览器
- DOM（Document Object Model）文档对象模型
- 使用 js 代码操作标签
BOM 操作
window 对象
- window 对象指代的就是浏览器窗口
window.innerHeight // 浏览器窗口的高度 910window.innerWidth // 浏览器窗口的宽度 1589// 新建窗口打开页面，第二个参数空着，第三个参数是新建窗口的大小和位置window.open('https://www.baidu.com/','','height=500px,width=500px,top=400px,left=400px');window.close() // 关闭当前页面window 子对象 navigator
// 判断当前是否是浏览器 -- 爬虫和反爬能够用的上window.navigator.userAgent'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.48'// 获取操作系统window.navigator.platform // 'Win32'window 子对象 history
window.history.back() // 回退到上一页window.history.forward() // 前进到下一页window 子对象 location
window.location.href // 获取当前页面的 urlwindow.location.href = url // 跳转到指定页面widow.location.reload() // 刷新当前页各种框
// 警告框alert('hello world') // 没有返回值，有确认按钮 // 确认框confirm('你确定吗？') // 当点“确认”时，返回 true；反之点取消返回 false// 提示框prompt('提示标题','提示内容') // 当点击确认时，返回“提示内容”，点取消返回 null计时器
一次性计时器
let t = setTimeout(function_name,3000) // 3 秒之后自动执行 function_name 函数clearTimeout(t) // 取消定时任务循环计时器
t = setInterval(function_name,3000) // 每隔 3 秒执行一次clearInterval(t) // 清除定时器DOM 操作
- DOM 树
- 所有标签都可以称为节点
- JavaScript 可以通过 DOM 创建动态的 HTML：
- 能够改变页面中所有的 HTML 元素和属性
- 能够改变页面中所有的 css 样式
- 能够对页面中所有事件做出反应
查找标签
// 直接查找document.getElementById("d1") // 根据 id 查找标签，返回标签document.getElementsByClassName('c1') // 根据类名查找标签，返回列表document.getElementsByTagName('div') // 根据标签名查找标签，返回列表节点操作
// 创建标签let imgEle = document.createElement('img')// 给标签添加默认属性imgEle.src = '111.png'// 给标签添加自定义属性imgEle.setAttribute('username','codeFun')// 获取父标签元素let divEle = document.getElementById('d2')// 在父标签内添加 imgEledivEle.appendChild(imgEle)// 给 a 标签设置文本aEle.innerText = 'hello world'divEle.innerHTML = 'hello world' // 可以识别 html 语言// 额外补充.appendChild().removeChild().replaceChild().setAttribute() 设置属性.getAttribute() 获取属性.removeAttribute() 移除属性获取值操作
// 获取用户数据标签内部的数据let inputEle = document.getElementById('d1')inputEle.value // 获取用户上传的文件数据fileEle.files // 获取一个有关文件的列表fileEle.files[0] // 获取文件数据class css 操作
let divEle = document.getElementById('d1')divEle.classList // 获取标签所有的类属性divEle.classList.remove('bg_red') // 移除某个类属性divEle.classList.add('bg_red') // 添加类属性divEle.classList.contains('c1') // 验证是否包含某个类属性 truedivEle.classList.toggle('bg_red') // 有则删除无则添加// DOM操作操作标签样式 统一先用style起手let pEle = document.getElementsByTagName('p')[0]pEle.style.color = 'red'pEle.style.fontSize = '28px'pEle.style.backgroundColor = 'yellow'pEle.style.border = '3px solid red'事件
- 达到某个事先设定的条件，自动触发的动作
绑定事件的两种方式
<button onclick="func1()">点我button><button id="d1">点我button> <script> // 第一种绑定事件的方式 function func1() { alert(111) } // 第二种 let btnEle = document.getElementById('d1'); btnEle.onclick = function () { alert(222) }script>实时展示当前时间
<body><div> <input type="text" id="d1" style="display: block;height: 50px;width: 200px"> <button id="d2">开始button> <button id="d3">结束button>div><script> let t = null let inputEle = document.getElementById('d1') let startBtnEle = document.getElementById('d2') let endBtnEle = document.getElementById('d3') function getTime(){ let currentTime = new Date() inputEle.value = currentTime.toLocaleTimeString() } startBtnEle.onclick = function (){ if (!t){ t = setInterval(getTime,1000) } } endBtnEle.onclick = function (){ clearInterval(t) t = null }script>body>jQuery
- JQuery 内部封装了原生的 js 代码，还额外添加了很多功能
- 能够让我们通过书写更少的代码完成 js 操作
- JQuery 兼容多种浏览器，不需要考虑浏览器兼容问题（IE除外）
- 我们现在使用的是 3.x 版本，不兼容 IE
HTML 导入 jQuery
将 jQuery 文件直接导入即可<script src="jQuery-3.4.1.js">script>也可以使用 cdn 服务<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">script>jQuery 的基本语法
JQuery('选择器').操作()JQuery 还可以简写为 $即 JQuery('选择器').操作() === $('选择器').操作()// 例如将 div 标签中的颜色变红$('div').css('color','red')jQuery对象转换成标签对象
// jQuery对象如何变成标签对象$('#d1')[0]// 标签对象如何转jQuery对象document.getElementById('d1')$(document.getElementById('d1'))选择器和筛选器
基本选择器
// id选择器$('#d1')// class选择器$('.c1')// 标签选择器$('span')组合选择器
$('div.c1') // 查找 div 中 class = c1 的$('div#d1') // 查找 div 中 id = d1 的$('*') // 查找全部分组与嵌套
$('#d1,.c1,p') # 并列+混用 $('div span') // 后代$('div>span') // 儿子$('div+span') // 毗邻$('div~span') // 弟弟基本筛选器
$('ul li')$('ul li:first') // 大儿子 $('ul li:last') // 小儿子 $('ul li:eq(2)')// 放索引 $('ul li:even') // 偶数索引 0包含在内$('ul li:odd') // 奇数索引 $('ul li:gt(2)') // 大于索引 $('ul li:lt(2)') // 小于索引 $('ul li:not("#d1")') // 移除满足条件的标签$('div')$('div:has("p")') // 选取出包含一个或多个标签在内的标签属性选择器
$('[username]') // 选择有 username 的标签$('[username="jason"]') // 选择有 username = jason 的标签$('p[username="egon"]') // 选择有 username 的 p 标签表单筛选器
$('input[type="text"]')$('input[type="password"]')// 将上面的进行简写$(':text') // 等价于上面第一个$(':password') // 等价于上面第二个// 下面的都可以简写：:text:password:file:radio:checkbox:submit:reset:button表单对象属性:enabled:disabled:checked:selected// 特例$(':checked') // 它会将checked和selected都拿到$(':selected') // 它不会 只拿selected$('input:checked') // 添加一个限制条件筛选器方法
$('#d1').next() // 同级别下一个$('#d1').nextAll() // 同级别下面的所有$('#d1').nextUntil('.c1') // 直到 class = c1 为止，不包括 c1$('.c1').prev() // 同级别上一个$('.c1').prevAll()$('.c1').prevUntil('#d2')$('#d2').siblings() // 同级别上下所有 $('#d3').parent() // 第一级父标签$('#d3').parent().parent() // 父亲的父亲$('#d3').parents() // 找到祖宗 HTML$('#d3').parentsUntil('body') $('#d2').children() // 儿子 $('div p')// 上面等价于下面 $('div').find('p') // find从某个区域内筛选出想要的标签 // 下面的两两等价$('div span:first')$('div span').first() $('div span:last')$('div span').last() $('div span:not("#d3")')$('div span').not('#d3')操作标签
操作类
css 操作
// 将第一个 p 标签的颜色变成红色，将它的下一个变成绿色$('p').first().css('color','red').next().css('color','green')// jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签// jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法位置操作
.offset() // 相对于浏览器窗口.position() // 相对于父标签 .scrollTop() $(window).scrollTop() // // 目前浏览的长度 $(window).scrollTop(0) # 加了参数就是设置尺寸
$('p').height() // 文本的高度$('p').width() // 文本的宽度$('p').innerHeight() // 文本+padding$('p').innerWidth()$('p').outerHeight() // 文本+padding+border$('p').outerWidth()文本操作
$('div').text()$('div').html()获取值操作
$('#d1').val()$('#d1').val('520快乐') # 括号内不加参数就是获取加了就是设置// 获取文件$('#d2')[0].files[0] //记两个对象之间的转换属性操作
let $pEle = $('p')$pEle.attr('id')$pEle.attr('class','c1')$pEle.removeAttr('password') $('#d2').prop('checked')$('#d3').prop('checked',true)两个方法
each
// 打印出所有的索引$('div').each(function(index){console.log(index)})// 打印所有的索引和对象$('div').each(function(index,obj){console.log(index,obj)})// 第二种方式$.each([111,222,333],function(index,obj){console.log(index,obj)})data
- 能够让标签帮我们存储数据 并且用户肉眼看不见
// 添加 info = hello world 的键值对$('div').data('info','hello world') // 根据键获取信息$('div').data('info') // 根据键删除信息$('div').removeData('info')小案例
按钮克隆
<button id="d1">点击，复制我</button><script> $('#d1').on('click',function () { $(this).clone().insertAfter($('body')) })</script>自定义登录校验
<body><p> username：<input type="text" id="username"> <span style="color: red">span>p><p> password：<input type="text" id="password"> <span style="color: red">span>p><button id="d1">提交button><script> let $username = $('#username') let $password = $('#password') // 点击提交时会判断输入框内是否为空，如果为空则提示用户不能为空 $('#d1').on('click',function (){ let userName = $username.val() let passWord = $password.val() if (!userName){ $username.next().text('用户名不能为空') } if (!passWord){ $password.next().text('密码不能为空') } }) // 聚焦事件，将鼠标放到收入框内触发 $('input').focus(function () { // 将红色提示字清空 $(this).next().text('') })script>body>input 框实时监控
<body><input type="text"><script> $('input').on('input',function () { console.log($(this).val()) })script>body>hover 事件
<script> // $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开 // alert(123) // }) $('#d1').hover( function () { alert('我来了') // 悬浮 }, function () { alert('我溜了') // 移开 } ) script>阻止后续事件
点击它有默认事件：提交用户输入的内容和清空用户输入的内容- 通过
return false可以阻止默认事件的发生 return false还可以阻止事件冒泡- 事件冒泡：就是在父亲和儿子都有点击事件时，点击儿子也会触发父辈的点击事件
<body><form><span id="d1">span><input type="submit" id="d2">form><script> $('#d2').on('click',function () { $('#d1').text('hello world') return false })script>body>事件委托
<body><button>弹窗显示button><script> // $('button').click(function () { // alert(123) // }) // 上面的点击事件在动态的新建按钮时触发 // 在指定范围内 将事件委托给某个标签 无论标签是事先写好的还是后面动态创建的 $('body').on('click','button',function () { alert('hello world') })script>body>BootStrap
form 表单常用模版
<table class="table table-hover table-striped"><thead> <tr> <th>IDth> tr>thead><tbody> {% for book_obj in book_queryset %} <tr> <td>{{ book_obj.pk }}td> <td> <a href="" class="btn-xs btn btn-primary">编辑a> td> tr> {% endfor %}tbody>table>来源地址：https://blog.csdn.net/weixin_54898062/article/details/132557129
