门户网站建设招标,如何做好电商销售,王建设个人网站,做互联网网站需要什么资质吗前端JavaScript 前端JavaScript1.JavaScript1.1 代码位置1.2 注释1.3 变量1.4 字符串类型案例#xff1a;跑马灯 1.5 数组案例#xff1a;动态数据 1.6 对象#xff08;字典#xff09;案例#xff1a;动态表格 1.7 条件语句1.8 函数 2.DOM2.1 事件的绑定 3.知识点的回顾4… 前端JavaScript 前端JavaScript1.JavaScript1.1 代码位置1.2 注释1.3 变量1.4 字符串类型案例跑马灯 1.5 数组案例动态数据 1.6 对象字典案例动态表格 1.7 条件语句1.8 函数 2.DOM2.1 事件的绑定 3.知识点的回顾4.jQuery4.1 快速上手4.2 寻找标签直接寻找4.3 间接寻找案例菜单的切换 4.4 操作样式4.5 值的操作案例动态创建数据 4.6 事件案例表格操作 5.前端整合案例添加数据页面 总结 前端JavaScript
今日概要 JavaScript是一门编程语言。浏览器就是JavaScript语言的解释器。 DOM和BOM 相当于编程语言内置的模块。
例如python中的re、random、time、json模块等。jQuery 相当于是编程语言的第三方模块。
例如requests、openpyxl注意知识点回顾。
1.JavaScript
JavaScript是一门编程语言
JavaScript的意义是什么
让程序实现一些动态的效果。!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.menus {width: 200px;border: 1px solid red;}.menus .header {background-color: gold;padding: 20px 10px;}/style
/head
body
div classmenusdiv classheader onclickmyFunk()大标题/divdiv classitem内容/div
/divscript typetext/javascriptfunction myFunk() {// alert(你好呀)confirm(是否要继续)}
/script
/body
/html前端三大组件
HTML裸体。CSS好看的衣服。JavaScript动态。
1.1 代码位置 JS代码的存在形式 当前HTML中。 script typetext/javascript// 编写Javascript代码
/script在其他js文件中导入使用。
1.2 注释 HTML的注释 !-- 注释内容 --CSS的注释style代码块 /* 注释内容 */JavaScript的注释script代码块 // 注释内容/* 注释内容 */1.3 变量 python编程语言。 name 高倩
print(name)JavaScript编程语言。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
script typetext/javascriptvar name 高倩;console.log(name);
/script
/body
/html1.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 langen
headmeta charsetUTF-8titleTitle/title
/head
bodyspan idtxt欢迎中国联通领导高倩莅临指导/spanscript typetext/javascriptfunction show() {// 1.去HTML中找到某个标签并获取他的内容DOMvar 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
/html1.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) {// idx0/1/2/3 datav1[idx]
}var v1 [11, 22, 33, 44];
for (var i0; iv1.length; i) {// i0/1/2/3 datav1[i]
}注意break和continue
案例动态数据
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
ul idcity!-- li北京/li--
/ulscript typetext/javascript// 发送网络请求获取数据var cityList [北京, 上海, 深圳];for (var idx in cityList) {var text cityList[idx];// 创建li/livar tag document.createElement(li);// 在li标签中写入内容tag.innerText text;// 添加idcity那个标签的里面。DOMvar parentTag document.getElementById(city);parentTag.appendChild(tag);}/script/body
/html1.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) {// keyname/age datainfo[key]
}案例动态表格
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
table border1theadtrthID/thth姓名/thth年龄/th/tr/theadtbody idbody
!-- tr--
!-- td1/td--
!-- td郭智/td--
!-- td19/td--
!-- /tr--/tbody
/tablescript typetext/javascriptvar 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 langen
headmeta charsetUTF-8titleTitle/title
/head
body
table border1theadtrthID/thth姓名/thth年龄/th/tr/theadtbody idbody!-- tr--!-- td1/td--!-- td郭智/td--!-- td19/td--!-- /tr--/tbody
/tablescript typetext/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
/html1.7 条件语句
if (条件) {}else{}if (11) {}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 idcity!-- li北京/li--
/ulscript typetext/javascriptvar tag document.getElementById(city);// !-- li北京/li--var newTag document.createElement(li);newTag.innerText 北京;tag.appendChild(newTag);
/script2.1 事件的绑定
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
input typebutton value点击添加 onclickaddCityInfo()
ul idcity/ulscript typetext/javascriptfunction addCityInfo() {var newTag document.createElement(li)newTag.innerText 联通;var parenTag document.getElementById(city);parenTag.appendChild(newTag);}
/script
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
input typetext placeholder请输入内容 idtxtUser
input typebutton value点击添加 onclickaddCityInfo()
ul idcity/ulscript typetext/javascriptfunction addCityInfo() {// 1.先获取输入框中用户输入的数据var txtTag document.getElementById(txtUser);// 2.获取用户输入的内容var newString txtTag.value// 判断用户输入是否为空只有不为空才能继续。if (newString.length 0) {// 3.创建标签li/li中间的文本信息就是用户输入的内容var newTag document.createElement(li)newTag.innerText newString;// 4.标签添加到ul中var parenTag document.getElementById(city);parenTag.appendChild(newTag);// 5.将input框内容清空txtTag.value ;} else {alert(输入不能为空);}}
/script
/body
/html注意DOM中还有很多操作。
DOM可以实现很多功能但是比较繁琐。
页面上的效果jQuery来实现 / vue.js / react.js3.知识点的回顾 编码相关 文件存储时使用某种编码打开时就需要使用相同的编码否则就会乱码。
字符底层存储时本质上都是010101010101。
字符和二进制的对应关系编码- ascii编码256种对应关系。- gb2312gbk中文和亚洲的一些国家【中文是2个字节】- unicodeucs2/ucs4包括现在发明的所有文明。- utf-8编码在UTF-8编码中一般中文是用几个字节【中文是3个字节】
python默认解释器编码utf-8python.exe 代码文件如果你将代码文件保存成了gbk编码将python默认解释器编码修改成gbkdata 中
res data.encode(utf-8)
print(res) # b\xe4\xb8\xaddata 国
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循环/判断是否包含判断键效率很高运算符 基本运算符加减乘除、...一般12 and 310
特殊的逻辑运算(整体结果取决于谁)v1 99 and 88 # 88v2 [] or 10 # 10v3 联通 or [] # 联通推导式简化生成数据 data []
for i in rang(10):data.append(i)v1 [i for i in rang(10)]
v2 [i for i in rang(10) if i5] # [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/randon/os...- 第三方模块: requests、openpyxl、python-docx、flask、bs4查看当前目录下所有的文件os.listdir/ os.walk
关于时间模块时间戳 / datetime格式 / 字符串三种时间格式可以互相转化。
关于JSON模块- JSON本质是字符串有一些自己格式的要求例如无元组/无单引号。- json.dumps序列化时只能序列化python常用数据类型。关于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 langen
headmeta charsetUTF-8titleTitle/title
/head
bodyh1 idtxt中国联通/h1script srcstatic/jquery-3.7.1.min.js/script
script typetext/javascript// 利用jQuery中的功能实现某些效果// 找到idtxt的标签$(#txt).text(广西移动)/script/body
/html4.2 寻找标签直接寻找 ID选择器 h1 idtxt中国联通/h1
h1 中国联通/h1
h1 中国联通/h1$(#txt)样式选择器 h1 classc1中国联通1/h1
h1 classc1中国联通2/h1
h1 classc2中国联通3/h1$(.c1)标签选择器 h1 classc1中国联通1/h1
div classc1中国联通2/div
h1 classc2中国联通3/h1$(h1)层级选择器 h1 classc1中国联通1/h1
h1 classc1div classc1span/spana/a/div
/h1
h1 classc2中国联通3/h1$(.c1 .c2 a)多选择器 h1 classc1中国联通1/h1
h1 classc1div classc3span/spana/a/div
/h1
h1 classc2中国联通3/h1
ullixx/lilixx/li
/ul$(#c3,#c2,li)属性选择器 input typetext namen1 /
input typetext namen1 /
input typetext namen2 /$(input[namen1])4.3 间接寻找 找到上一个兄弟 divdiv北京/divdiv idc1上海/divdiv深圳/divdiv广州/div
/div$(#c1).prev() // 上一个
$(#c1)
$(#c1).next() // 下一个
$(#c1).next().next() // 下一个、下一个$(#c1).siblings() // 找到所有的兄弟找父子 divdivdiv北京/divdiv idc1div青浦区/divdiv classp10宝山区/divdiv浦东新区/div/divdiv深圳/divdiv广州/div/divdivdiv陕西/divdiv山西/divdiv河北/divdiv河南/div/div
/div$(#c1).parent() // 父亲
$(#c1).parent().parent() // 父亲、父亲$(#c1).children() // 所有的儿子
$(#c1).children(.p10) // 所有的儿子中寻找classp10$(#c1).find(.p10) // 去所有子孙中寻找classp10
$(#c1).find(div) // 去所有子孙中寻找classp10案例菜单的切换
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.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 classmenusdiv classitemdiv classheader onclickclickMe(this);上海/divdiv classcontent hidea宝山区/aa青浦区/aa浦东新区/aa普陀区/a/div/divdiv classitemdiv classheader onclickclickMe(this);北京/divdiv classcontent hidea海淀区/aa朝阳区/aa大兴区/aa昌平区/a/div/div
/divscript srcstatic/jquery-3.7.1.min.js/script
scriptfunction clickMe(self) {// $(self) - 表示当前点击的那个标签// $(self).next() 下一个标签// $(self).next().removeClass(hide); 删除样式$(self).next().removeClass(hide);}
/script
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.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 classmenusdiv classitemdiv classheader onclickclickMe(this);上海/divdiv classcontent hidea宝山区/aa青浦区/aa浦东新区/aa普陀区/a/div/divdiv classitemdiv classheader onclickclickMe(this);北京/divdiv classcontent hidea海淀区/aa朝阳区/aa大兴区/aa昌平区/a/div/div
/divscript srcstatic/jquery-3.7.1.min.js/script
scriptfunction 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 langen
headmeta charsetUTF-8titleTitle/titlestyle.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 classmenusdiv classitemdiv classheader onclickclickMe(this);上海/divdiv classcontent hidea宝山区/aa青浦区/aa浦东新区/aa普陀区/a/div/divdiv classitemdiv classheader onclickclickMe(this);北京/divdiv classcontent hidea海淀区/aa朝阳区/aa大兴区/aa昌平区/a/div/divdiv classitemdiv classheader onclickclickMe(this);上海2/divdiv classcontent hidea宝山区/aa青浦区/aa浦东新区/aa普陀区/a/div/divdiv classitemdiv classheader onclickclickMe(this);北京2/divdiv classcontent hidea海淀区/aa朝阳区/aa大兴区/aa昌平区/a/div/div/divscript srcstatic/jquery-3.7.1.min.js/script
scriptfunction clickMe(self) {// 让自己下面的功能展示出来$(self).next().removeClass(hide);// 找父亲父亲的所有兄弟再去每个兄弟的子孙中寻找 classcontent,添加hide样式$(self).parent().siblings().find(.content).addClass(hide);}
/script
/body
/html4.4 操作样式
addClassremoveClasshasClass
4.5 值的操作
div idc1内容/div$(#c1).text() // 获取文本内容
$(#c1).text(休息) // 设置文本内容input typetext idc2 /$(#c2).val() // 获取用户输入的值
$(#c2).val(哈哈哈哈) // 设置值案例动态创建数据
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
input typetext idtxtUser placeholder用户名
input typetext idtxtEmail placeholder邮箱
input typebutton value提交 onclickgetInfo()/ul idview
/ulscript srcstatic/jquery-3.7.1.min.js/script
scriptfunction 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
/html4.6 事件
input typebutton value提交 onclickgetInfo()/scriptfunction getInfo() {}
/scriptulli百度/lili谷歌/lili搜狗/li
/ulscript$(li).click(function(){// 点击li标签时自动执行这个函数// $(this) 当前你点击的是哪个标签});
/script!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
ulli百度/lili谷歌/lili搜狗/li
/ulscript srcstatic/jquery-3.7.1.min.js/script
script$(li).click(function () {var text $(this).text();console.log(text)})
/script
/body
/html在jQuery中可以删除某个标签。
div idc1内容/div$(#c1).remove();案例删除元素
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
ulli百度/lili谷歌/lili搜狗/li
/ulscript srcstatic/jquery-3.7.1.min.js/script
script$(li).click(function () {$(this).remove();})
/script
/body
/html当页面框架加载完成之后执行代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
ulli百度/lili谷歌/lili搜狗/li
/ulscript srcstatic/jquery-3.7.1.min.js/script
script$(function () {// 当页面的框架加载完成之后自动就执行。$(li).click(function () {$(this).remove();});})/script
/body
/html案例表格操作
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
table border1theadtrthID/thth姓名/thth操作/th/tr/theadtbodytrtd1/tdtd吴佩琦/tdtdinput typebutton value删除 classdelete/td/trtrtd1/tdtd吴佩琦/tdtdinput typebutton value删除 classdelete/td/trtrtd1/tdtd吴佩琦/tdtdinput typebutton value删除 classdelete/td/tr/tbody
/tablescript srcstatic/jquery-3.7.1.min.js/script
script$(function () {//找到所有classdelete的标签绑定事件$(.delete).click(function () {// 删除当前行的数据$(this).parent().parent().remove();});})/script/body
/html5.前端整合
HTMLCSSJavaScript、jQueryBootStrap动态效果依赖jQuery
案例添加数据页面 人员信息录入功能需要提供用户信息 用户名年龄、薪资、部门、入职时间* 对于时间的选择不能输入选择插件datetimepicker 下载应用插件 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.csslink relstylesheet hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.csslink relstylesheet hrefstatic/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css
/head
body
div classcontainerform classform-horizontal stylemargin-top: 20pxdiv classrow clearfixdiv classcol-sm-6div classform-grouplabel classcol-sm-2 control-label姓名/labeldiv classcol-sm-10input typeemail classform-control placeholder姓名/div/div/divdiv classcol-sm-6div classform-grouplabel classcol-sm-2 control-label年龄/labeldiv classcol-sm-10input typeemail classform-control placeholder年龄/div/div/div/divdiv classrow clearfixdiv classcol-sm-6div classform-grouplabel classcol-sm-2 control-label薪资/labeldiv classcol-sm-10input typeemail classform-control placeholder薪资/div/div/divdiv classcol-sm-6div classform-grouplabel classcol-sm-2 control-label部门/labeldiv classcol-sm-10select classform-controloptionIT部门/optionoption销售部门/optionoption运营部门/option/select/div/div/div/divdiv classrow clearfixdiv classcol-sm-6div classform-grouplabel classcol-sm-2 control-label入职日期/labeldiv classcol-sm-10input typetext iddt classform-control placeholder入职日期/div/div/div/divdiv classrow clearfixdiv classcol-sm-6div classform-groupdiv classcol-sm-offset-2 col-sm-10button typesubmit classbtn btn-primary提 交/button/div/div/div/div/form
/divscript srcstatic/js/jquery-3.7.1.min.js/script
script srcstatic/plugins/bootstrap-3.4.1/js/bootstrap.js/script
script srcstatic/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js/script
script srcstatic/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js/script
script$(function () {$(#dt).datetimepicker({format: yyyy-mm-dd,startDate: 0,language: zh-CN,autoclose: true})})
/script/body
/html源码见【gx_day13_demo】
总结
了解HTML标签、标签结构基于他可以实现简单的页面。CSS了解基本样式在别人模板的基础改就可以。JavaScript、jQuery了解基本使用 事件绑定/寻找标签/操作标签。导入现成插件。
后续开发过程中对于前端就是在BootStrap的基础整改。
