-
python-web开发[13]之前端js
今日概要：- JavaScript，是一门编程语言。浏览器就是JavaScript语言的解释器。
- DOM和BOM
相当于编程语言内置的模块。 例如：Python中的re、random、time、json模块等。- 1
- 2
- jQuery
相当于是编程语言的第三方模块。 例如：requests、openpyxl、pandas- 1
- 2
注意：知识点回顾。
1. JavaScript
JavaScript是一门编程语言。
JavaScript的意义是什么？-- 让程序实现一些动态的效果。DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
前端三大组件：
- HTML，里层内容。
- CSS，好看的衣服。
- JavaScript，动态。
1.1 代码位置
JS代码的存在形式：- 当前HTML中。
- 1
- 2
- 3
- 在其他js文件中，导入使用。 (推荐位置2)
1.2 注释
- HTML的注释
- 1
- CSS的注释，
style代码块
/* 注释内容 */- 1
- JavaScript的注释，
script代码块
// 注释内容 /* 注释内容 */- 1
- 2
1.3 变量
- Python，编程语言。
name = "高倩" # 定义变量 print(name) # 输出变量- 1
- 2
- JavaScript，编程语言。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <script type="text/javascript"> var name = "高倩"; /* 定义变量 */ console.log(name); /* 输出变量，console通过浏览器的console实现*/ script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
1.4 字符串类型
// 声明一个字符串 var name = "高倩"; // 方法1 var name = String("高倩"); // 方法2- 1
- 2
- 3
// 字符串的常见功能 var name = "中国联通"; var v1 = name.length; // 求解字符串的长度 var v2 = name[0]; // 索引子元素，等价于 = name.charAt(3) var v3 = name.trim(); // 去除空白 var v4 = name.substring(0,2); // 截取子字符串：前取 后不取- 1
- 2
- 3
- 4
- 5
- 6
案例：跑马灯
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <span id="txt">欢迎中国联通领导高倩莅临指导span> <script type="text/javascript"> function show() { // 定义show函数 // 1.去HTML中 找到某个标签 并获取他的内容（DOM） var tag = document.getElementById("txt"); // 在html中找到相应的某个标签 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中的定时器setInterval函数，如：每1s(1000毫秒)执行一次show函数。 setInterval(show, 1000); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
1.5 数组类型
// 定义 var v1 = [11,22,33,44]; // 方法1 var v2 = Array([11,22,33,44]); // 方法2- 1
- 2
- 3
// 操作 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];- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
// 根据索引循环 var v1 = [11,22,33,44]; for(var idx in v1){ // idx=0/1/2/3 索引 数组循环的时候，是遍历相应的索引 data=v1[idx]; }- 1
- 2
- 3
- 4
- 5
- 6
var v1 = [11,22,33,44]; for(var i=0; i<v1.length; i++){ // i=0/1/2/3 data=v1[idx]; }- 1
- 2
- 3
- 4
- 5
注意：break和continue
案例：动态数据
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <ul id="city"> ul> <script type="text/javascript"> // 发送网络请求，获取数据 var cityList = ["北京","上海","深圳"]; for(var idx in cityList){ var text = cityList[idx]; // 创建 标签 DOM var tag = document.createElement("li"); // 在li标签中写入内容 tag.innerText = text; // 添加到id=city那个标签的里面。DOM - 先获取标签，然后往里写内容 var parentTag = document.getElementById("city"); parentTag.appendChild(tag); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
1.6 对象（python中字典）
// 定义方法1 info = { "name":"高倩", "age":18 } // 定义方法2 info = { name:"高倩", age:18 }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
info.age // 获取相应的元素 info.name = "郭智" // 更新相应key对应的value delete info.age // 删除 ？？ 是否OK info["age"] // 获取相应的元素 info["name"] = "郭智" // 更新相应key对应的value delete info["age"] // 删除- 1
- 2
- 3
- 4
- 5
- 6
- 7
info = { name:"高倩", age:18 } for(var key in info){ // key=name/age 对象循环的时候，是遍历相应的key元素 data=info[key]; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
案例：动态表格
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <table border="1"> <thead> <tr> <th>IDth> <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]; // 根据相应的键key获取相应的值value var td = document.createElement('td'); // 创建一个标签 td.innerText = text; tr.appendChild(td); } var bodyTag = document.getElementById("body"); // 将数据写入到id = 'body'的标签中：先获取标签，然后写入内容 bodyTag.appendChild(tr); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <table border="1"> <thead> <tr> <th>IDth> <th>姓名th> <th>年龄th> tr> thead> <tbody id="body"> tbody> table> <script type="text/javascript"> // 网络请求获取：正式而言，下面的变量dataList内容，应该写入从页面上获取。 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]; // 对象元素获取：根据相应的键key获取相应的值value var td = document.createElement('td'); // 创建一个里层内容标签 td.innerText = text; tr.appendChild(td); } var bodyTag = document.getElementById("body"); // 将数据写入到id = 'body'的标签中：先获取标签，然后写入内容 bodyTag.appendChild(tr); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
1.7 条件语句
if(条件){ // 内容 }else{ // 内容 } // 举例子 if (1==1){ }else{ }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
if(条件){ }else if(条件){ }else if(条件){ }else{ }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
1.8 函数
def func(): 函数的内容... func()- 1
- 2
- 3
- 4
function func(){ ... } func()- 1
- 2
- 3
- 4
- 5
2.DOM
DOM，就是一个模块，模块可以对HTML页面中的标签进行操作。
// 根据ID获取标签 var tag = document.getElementById("xx"); // 获取标签中的文本 tag.innerText // 修改标签中的文本 tag.innerText = "哈哈哈哈哈";- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
// 创建标签哈哈哈哈哈var tag = document.createElement("div"); // 标签写内容 tag.innerText = "哈哈哈哈哈";- 1
- 2
- 3
- 4
- 5
// 获取外部标签city, 然后创建li标签并通过定义li标签内容，往city标签中写入内容 <ul id="city"> <li>北京li> ul> <script type="text/javascript"> var tag = document.getElementById("city"); //- 北京
var newTag = document.createElement("li"); newTag.innerText = "北京"; tag.appendChild(newTag); script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
2.1 事件的绑定
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <input type="text" placeholder="请输入内容" id="txtUser"/> <input type="button" value="点击添加" ondblclick="addCityInfo()"> <ul id="city"> ul> <script type="text/javascript"> function addCityInfo() { // 1.找到输入标签 var txtTag = document.getElementById("txtUser"); // 2.获取input框中用户输入的内容 var newString = txtTag.value; // 获取用户的input输入内容用：value，获取div等其他标签中的内容用innerText // 判断用户输入是否为空，只有不为空才能继续。 if (newString.length > 0) { // 3.创建标签 中间的文本信息就是用户输入的内容 var newTag = document.createElement("li"); newTag.innerText = newString; // 4.标签添加到ul中 var parentTag = document.getElementById("city"); parentTag.appendChild(newTag); // 5.将input框内容清空 txtTag.value = ""; }else{ alert("输入不能为空"); //页面交互：提示内容 } } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
注意：DOM中还有很多操作。
DOM可以实现很多功能，但是比较繁琐。 页面上的效果：后续是通过jQuery来实现 / vue.js / react.js- 1
- 2
3.知识点的回顾
- 编码相关
文件存储时，使用某种编码，打开时就需要使用相同的编码，否则就会乱码。 字符底层存储时本质上都是0101010101010101。 字符和二进制的对应关系（编码）： - ASCII 编码，256中对应关系。 - GB2312，GBK，中文和亚洲的一些国家【GBK下，中文是2个字节】 - UNICODE: UCS2/UCS4，包括现在发现的所有文明。 - UTF-8 编码，【UTF-8下，中文是用3个字节】 Python默认解释器编码(utf-8) python.exe 代码文件 如果你将代码文件保存成了gbk编码，将Python模式解释器编码修改成gbk- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
data = '中' res = data.encode('utf-8') print(res) #b'\xe4\xb8\xad' data = '中' res = data.encode('gbk') print(res) #b'\xd6\xd0'- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 计算机中的单位
位/字节/KB/M/G/T... --1字节 = 8位； 办流量/硬盘/内存，通过换算可以知道有多少位- 1
- 2
- 字符串格式化（三种）
v1 = "我是{}，今年{}".format("武沛齐",77) # 方法1: 推荐 v2 = "我是%s，今年%d岁" %("武沛齐",77, ) # 方法2: name = "武沛齐" # 方法3: age = 19 v3 = f"我是{name}，今年{age}岁"- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 数据类型
常见数据类型：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
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 运算符
基本运算符：加减乘除、... 一般： 1>2 and 3<10 特殊的逻辑运算(整体结果取决于谁？) v1 = 99 and 88 # 88 （整体结果取决于后者，因为 and需要两者为真就为真，因此取决于后者） v2 = [] or 10 # 10 (整体结果取决于后者，因为 or前者是假) v3 = "联通" or [] # "联通" （整体结果取决于前者，因为 or前者已是真。）- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 推导式（简化生成数据）
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]- 1
- 2
- 3
- 4
- 5
- 6
- 函数编程
函数的基础知识 - 定义 - 参数，概念：位置传参/关键字传参/参数默认值/动态参数*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、判断是否存在，如果不存在则新建目录。- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 模块
模块的分类： - 自定义模块： - 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包- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 面向对象
目标：不是为了用面向对编程（推荐使用函数编程，面向对象要看的懂）。 面向对象三大特性：封装、继承、多态。- 1
- 2
- 前端开发
- 前端知识点分为三部分： - 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） - 高度和宽度 height width - 边距 - 内边距，padding - 外边距，margin - 字体大小/颜色 font-size - 边框 - 背景颜色 - hover，鼠标放上去就会触发的CSS样式。- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
4. jQuery
jQuery是一个JavaScript第三方模块（第三方类库）。
- 基于jQuery，自己开发一个功能。
- 现成的工具 依赖jQuery，例如：BootStrap动态效果。
4.1 快速上手
- 下载jQuery
https://jquery.com/- 1
- 应用jQuery
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <h1 id="txt">中国联通h1> <h1>中国联通h1> <h1>中国联通h1> <h1>中国联通h1> <h1>中国联通h1> <h1>中国联通h1> <script src="static/jquery-3.6.0.min.js">script> <script type="text/javascript"> // 利用jQuery中的功能实现某些效果 $("#txt").text("广西移动"); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
4.2 寻找标签（直接寻找）
- ID选择器
<h1 id="txt">中国联通h1> <h1>中国联通h1> <h1>中国联通h1> $("#txt")- 1
- 2
- 3
- 4
- 5
- 6
- 样式选择器
<h1 class="c1">中国联通1h1> <h1 class="c1">中国联通2h1> <h1 class="c2">中国联通3h1> $(".c1")- 1
- 2
- 3
- 4
- 5
- 6
- 标签选择器
<h1 class="c1">中国联通1h1> <div class="c1">中国联通2h1> <h1 class="c2">中国联通3h1> $("h1")- 1
- 2
- 3
- 4
- 5
- 6
- 层级选择器
<h1 class="c1">中国联通1h1> <h1 class="c1"> <div class="c2"> <span>span> <a>a> div> h1> <h1 class="c2">中国联通3h1> $(".c1 .c2 a")- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 多选择器
<h1 class="c1">中国联通1h1> <h1 class="c1"> <div class="c3"> <span>span> <a>a> div> h1> <h1 class="c2">中国联通3h1> <ul> <li>xxli> <li>xxli> ul> $("#c3,#c2,li")- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 属性选择器
<input type='text' name="n1" /> <input type='text' name="n1" /> <input type='text' name="n2" /> $("input[name='n1']")- 1
- 2
- 3
- 4
- 5
- 6
4.3 间接寻找
- 找到兄弟
<div> <div>北京div> <div id='c1'>上海div> <div>深圳div> <div>广州div> <div>成都div> div> $("#c1") // 找到上海 $("#c1").prev() // 找到上海的前一个兄弟： 北京 $("#c1").prev().prev() // 找到上海的前前一个兄弟： xx $("#c1").next() // 找到上海的下一个兄弟： 深圳 $("#c1").next().next() // 找到上海的下下一个兄弟： 广州 $("#c1").siblings() // 找到上海的所有兄弟- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 找父子
<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") // 找到id $("#c1").parent() // 找到id的父亲 $("#c1").parent().parent() // 找到id的父亲的父亲 $("#c1").children() // 所有的儿子 $("#c1").children(”.p10“) // 所有的儿子中class=p10的标签 $("#c1").find() // 所有的子孙 $("#c1").find(”div“) // 所有子孙中div的标签- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
案例：菜单的切换
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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 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"); // 有相应的hide样式就去除，后者就增加hide样式 }else{ $(self).next().addClass("hide"); } } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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);">浙江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).next().removeClass("hide"); // 找父亲，父亲的所有兄弟，再去每个兄弟的子孙中寻找 class=content，添加hide样式 $(self).parent().siblings().find(".content").addClass("hide"); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
4.4 操作样式
- addClass
- removeClass
- hasClass
4.5 值的操作
<div id='c1'>内容div>- 1
$("#c1").text() // 获取文本内容 $("#c1").text("休息") // 设置文本内容- 1
- 2
<input type='text' id='c2' />- 1
$("#c2").val() // 获取用户输入的值 $("#c2").val("哈哈哈") // 设置值- 1
- 2
案例：动态创建数据
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> 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的内部写入内容。 $("- ")
var newLi = $("- "
).text(dataString); // 3.把新创建的li标签添加到ul里面。 $("#view").append(newLi); } script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
4.6 事件
<input type="button" value="提交" onclick="getInfo()"/> <script> function getInfo() { } script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
<ul> <li>百度li> <li>谷歌li> <li>搜狗li> ul> <script> $("li").click(function(){ // 点击li标签时，自动执行这个函数； // $(this) 当前你点击的是那个标签。 }); script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
在jQuery中可以删除某个标签。
<div id='c1'>内容div> $("#c1").remove();- 1
- 2
- 3
案例：删除元素
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
当页面框架加载完成之后执行代码：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
案例：表格操作
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <table border="1"> <thead> <tr> <th>IDth> <th>姓名th> <th>操作th> tr> thead> <tbody> <tr> <td>1td> <td>武沛齐td> <td> <input type="button" value="删除" class="delete"/> td> tr> <tr> <td>1td> <td>武沛齐td> <td> <input type="button" value="删除" class="delete"/> td> tr> <tr> <td>1td> <td>武沛齐td> <td> <input type="button" value="删除" class="delete"/> td> tr> <tr> <td>1td> <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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
5. 前端整合
- HTML
- CSS
- JavaScript、jQuery
- BootStrap（动态效果依赖jQuery）。
案例：添加数据页面
人员信息录入功能，需要提供用户信息：
用户名、年龄、薪资、部门、入职时间（*）
对于时间的选择：不能输入；选择；（插件） datetimepicker- 下载插件
- 应用插件
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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 () { // 实现：基于bootstrap.js中的datepicker实现日期的选择，而非用户填写 $('#dt').datepicker({ format: 'yyyy-mm-dd', startDate: '0', language: "zh-CN", autoclose: true }); }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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"> <style> .navbar { border-radius: 0; } style> head> <body> <div class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false"> <span class="sr-only">Toggle navigationspan> <span class="icon-bar">span> <span class="icon-bar">span> <span class="icon-bar">span> button> <a class="navbar-brand" href="#">广西联通薪资系统a> div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Homea>li> <li><a href="#">Forwarda>li> <li><a href="#">Linka>li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a> <ul class="dropdown-menu"> <li><a href="#">Actiona>li> <li><a href="#">Another actiona>li> <li><a href="#">Something else herea>li> <li role="separator" class="divider">li> <li><a href="#">Separated linka>li> <li role="separator" class="divider">li> <li><a href="#">One more separated linka>li> ul> li> ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登录a>li> <li><a href="#">注册a>li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 武沛齐 <span class="caret">span>a> <ul class="dropdown-menu"> <li><a href="#">个人资料a>li> <li><a href="#">我的账户a>li> <li><a href="#">修改密码a>li> <li role="separator" class="divider">li> <li><a href="#">注销a>li> ul> li> ul> div> div> div> <div> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×span>button> <h4 class="modal-title" id="myModalLabel">Modal titleh4> div> <div class="modal-body"> ... div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Closebutton> <button type="button" class="btn btn-primary">Save changesbutton> div> div> div> div> div> <div class="bs-example-tooltips"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right button> div> <div> <button id="element" type="button" class="btn btn-lg btn-danger" title="我是一个标题" data-content="我是内容....">点我弹出/隐藏弹出框 button> div> <div style="width: 700px"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li> <li data-target="#carousel-example-generic" data-slide-to="1" class="">li> <li data-target="#carousel-example-generic" data-slide-to="2" class="">li> ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide [900x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNzc3OiM1NTUvdGV4dDpGaXJzdCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3ZDQ2ZTIwZGY2IHRleHQgeyBmaWxsOiM1NTU7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTdkNDZlMjBkZjYiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMzA4LjI4OTA2MjUiIHk9IjI3MC4xIj5GaXJzdCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true"> div> <div class="item"> <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide [900x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNjY2OiM0NDQvdGV4dDpTZWNvbmQgc2xpZGUKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xN2Q0NmUyNjg4MCB0ZXh0IHsgZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjQ1cHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3ZDQ2ZTI2ODgwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjxnPjx0ZXh0IHg9IjI2NC45NDUzMTI1IiB5PSIyNzAuMSI+U2Vjb25kIHNsaWRlPC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true"> div> <div class="item"> <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide [900x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3ZDQ2ZTIzNTllIHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTdkNDZlMjM1OWUiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNTU1Ii8+PGc+PHRleHQgeD0iMjk4LjMxMjUiIHk9IjI3MC4xIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true"> div> div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span> <span class="sr-only">Previousspan> a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span> <span class="sr-only">Nextspan> a> div> 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> $(function () { $('[data-toggle="tooltip"]').tooltip(); $('#element').popover({trigger: "click", placement: "bottom"}); $('.carousel').carousel({ interval: 2000 }) }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
总结
- 了解HTML标签、标签结构，基于他可以实现简单的页面。
- CSS，了解基本样式； 在别人模板的基础改就可以【引入相应的css样式和js插件】。
- JavaScript、jQuery，了解基本使用
- 事件绑定/寻找标签/操作标签。
- 导入现成插件。
后续开发过程中，对于前端就是在BootStrap的基础整改。
-
相关阅读:
SLF4J: Class path contains multiple SLF4J bindings.
景联文科技牵头制定的《信息技术 可扩展的生物特征识别数据交换格式 第4部分：指纹图像数据》国家标准启动会暨研讨会在杭州顺利召开
Win Go开发包安装配置、GoLand配置
DNS设置(linux)
荣誉榜再度添彩！热烈祝贺旭帆科技荣获安徽省大数据企业！
3.6 空值的处理
动态SQL(if、where、trim、choose when otherwise、foreach、sql标签等)
Swoole Compiler 加密PHP源代码（简版）
系统分析师，通过后的分享
React脚手架配置axios代理 （1.配置在package.json， 2.配置在setupProxy.js）
- 原文地址：https://blog.csdn.net/Jasminexjf/article/details/127458684
