一. HTML
form表单功能: 在该form标签内部书写的获取用户的数据都会被form标签提交到后端.
属性: action 控制数据提交到后端的路径(给哪个服务短提交数据)
1. 什么都不写. 默认就是朝当前页面所在的ur1提交数据
2. 写全路径: https//:www.baidu.com 朝百度服务端提交
3. 只写路径后缀action='/index/'. 自动识别出当前服务端的ip和port拼接到前面. host:port/index/(暂时不考虑)
属性: method 通过method指定提交请求的方式
1. get: form表单默认提交数据的方式 是get请求 数据是直接放在url后面的. 以?分割URL和传输数据，参数之间以&相连，如EditPosts.aspx?name=test1&id=123456.
2. post: 把提交的数据放在HTTP包的请求体中(注意: 这里指定post, flask服务器才可以通过request.files,request.form获取文件,表单数据)
提示: GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码.
属性: enctype="multipart/form-data" 指定数据提交的编码格式
1. 默认是urlencoded 只能够提交普通的文本数据, 不能发送文件.
2. form-data 就可以支持提交文件数据
2. 列举你所知道的HTML标签(待定)
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
title
style
style[rel=stylesheet][href]
script
script[src]
</head>
<body>
<!--body内常用标签-->
h1~h6
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<p>段落标签</p>
<hr> 水平尺
<br> 换行
<!--特殊符号-->
空格
& &
< <
> >
¥ ¥
© ©
® ®
</body>
<!--img标签: 圆形头像-->
img[src][alt][title][height][width]
<!--a标签-->
a[href][target=_self|_blank]
a[href=#锚点]
<!--列表标签-->
ul>li
ol>li
dl>dt+dd
<!--表格标签-->
table[border]>(thead>th)+(tbody>td[colspan][rowspan])
<!--表单标签-->
form[action=3种][method=get|post][enctype=urlencoded|multipart/form-data]
disabled readonly
<!--input-->
input[type=text][name][value][placeholder][maxlength]
input[type=password][name][value][placeholder][maxlength]
input[type=date][name][value]
input[type=radio][name][value][checked]
input[type=checkbox][name][value][checked]
input[type=hidden][name][value]
input[type=submit][value]
input[type=button][value]
input[type=reset][value]
<!--select-->
select[name][multiple]>option[value][selected]
select[name][multiple]>optgroup[label]>option[value][selected]
textarea[maxlength][placeholder]
button{按钮}
</html>
二. CSS
1. 列举你所知道的css选择器(待定)
基本选择器:
id选择器 #d1
类选择器 .c1
元素(标签)选择器 div
通配符选择器 *
组合选择器:
后代选择器 div span
子代选择器 div>span
毗邻选择器 div+span
弟弟选择器 div~span
属性选择器:
[属性名]
[属性名=属性值]
input[属性名=属性值]
分组与嵌套:
分组 div,span
嵌套 div,.item
伪类选择器:
:link :visited :hover :action
伪元素选择器:
:first-letter :after :before
2. 简述盒子模型(待定)
margin: 外边距. 标签与标签之间的距离. 类比: 快递盒与快递盒之间的距离
border: 边框. 类比: 盒子的厚度
padding: 内填充. 内容到边框的距离. 类比: 盒子内壁到物体之间的距离.
content: 内容. 类比: 物体的大小.
3. 什么是浮动，浮动的作用(待定)
使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来.
浮动的作用: 浮动的目的：为了达到自己的布局目的，让指定元素定位在指定位置，并且可以设置浮动后的行级元素的宽高，我们就需要用到浮动
4. 你所知道的定位有哪些，每个定位各有什么特点，列举哪些是不脱离文档流的哪些是脱离文档流的(待定)
① static 默认 静态 正常文档流
② relative 相对 不脱离文档流 只改变自身位置
③ absolute 绝对 相对于最近仅为的父元素 脱离文档流
④ fixed 固定 相对于浏览器窗口 脱离文档流
三. JavaScript
1. 什么是Js，Js的数据类型有哪些,Js序列化反序列化用的是什么方法? (待定)
数值number, 字符string, 布尔boolean, 对象object, 函数function, 空null, 未定义undefined
JSON.stringify dumps
JSON.parse loads
2. 现有三个普通函数a,b,c都需要用户登陆之后才能访问。现需要你写一个装饰器校验用户是否登陆，并且用户只要登陆一次其他函数在调用时也无需再校验(提示:全局标志位)? (待定)
let loginStat = false;
function login() {
let input = prompt('请输入用户名!');
if (input === 'jason') {
loginStat = true;
alert('欢迎登录!');
}
}
function index() {
alert('正在执行任务....');
}
function auth(wrapped) {
return function () {
if (loginStat) {
return wrapped.apply(this, arguments);
} else {
alert('对不起, 请先登录!');
login();
}
};
}
index = auth(index);
index();
四. BOM
五. DOM
1. js代码书写位置有几种，什么是事件，js如何绑定事件(待定)
# js代码书写位置有几种: 2种
第一种方式实现: body底部
第二种方式实现: head中使用window.onload预加载. 预加载无法执行以下的绑定事件的第一种方式. 且不能多次声明, 多次绑定window.onload事件, 下面会覆盖上面.
# 事件: 到达某一条件自动触发执行的功能
# 绑定事件: 2种
第一种: 在标签内指定属性. 例如: onclick="func()"
第二种: 通过获取DOM操作获取标签对象, 对标签对象绑定事件. 例如:
let divEle = document.getElementById('d1');
divEle.onclick = function () {};
2. js常见的事件有哪些(待定)
onclick 鼠标单击事件.
实例1: 开关灯. 主要利用nodeEle.classList.toggle实现
实例2: 展示当前时间. 主要利用创建时间对象new Date() + 循环定时器实现
onfocus 获得焦点时触发事件 + onblur 失去焦点时触发事件.
实例: input框的焦点获取与失去. 主要利用inputEle.value实现
onchange 文本域变化事件
实例: 省市联动. 主要利用节点操(创建标签, 为标签添加属性, 为标签添加文本内容, 找到需要添加的位置添加)
onclick 鼠标单击
ondblclick 双击后激活事件
onfocus 获得焦点时触发
onblur 失去焦点时触发 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 载入网页时
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
六. jQuery
1. 什么是jQuery，它的基本语法是什么，jQuery导入方式有哪些分别有什么区别?(待定)
# 什么是jQuery
jQuery内部封装了原生jS, jQuery类似于python里面的模块, 在前端jQuery是一个提供了额外功能的框架又或者说类库.
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
# 基本语法:
jQuery(selector).action()
简写: $(selector).action()
# jQuery导入方式有哪些分别有什么区别
1. 将文件下载到本地直接导入(压缩、未压缩)
好处: 没有网也可以正常使用
坏处: 需要重复书写，文件路径还要固定
pycharm模块功能 自动添加固定的代码: settings->editor->file and code template
2. CDN服务
CDN的概念:内容分发网络
参考网站:bootcdn. 前端相关的应用程序都有免费的cdn服务
好处: 无需下载对应的文件，直接走网络请求使用
坏处: 必须要有网络
2. 列举你所知道的jQuery选择器(针对表单筛选器是否有注意事项)(待定)
# 基本选择器:
id选择器: $('#d1')
类选择器: $('.c1')
元素/标签选择器: $('div')
通配符选择器: $('*')
# 组合选择器, 分组与嵌套:
组合选择器:
后代选择器: $('div span')
子代选择器: $('div>span')
毗邻选择器: $('div+span')
弟弟选择器: $('div~span')
分组与嵌套:
分组: $('div,span')
嵌套: $('#d1,span')
# 基本筛选器:
第一个: $('ul li:first')
最后一个: $('ul li:last')
索引为偶数: $('ul li:even')
索引为奇数: $('ul li:odd')
等于索引值: $('ul li:eq(0)')
大于索引值: $('ul li:gt(2)')
小于索引值: $('ul li:lt(2)')
排除满足条件, 要剩下所有: $('ul li:not("#d1")')
选取包含一个或多个在内的: $('div:has("p")')
# 属性选择器:
$('[username]')
$('[username="egon"]')
$('input[username="egon"]')
# 表单选择器:
表单属性:
$('[type=text]')
替代: $(':text')
:text :password
:date
:file
:hidden
:radio :checkbox
:button :submit :reset
表单对象属性:
:enabled
:disabled
:checked 特殊对待: input:checked
:selected
# 筛选器方法:
同级别上一个: .prev()
同级别上所有: .prevAll()
同级别上所有直到什么停止(不包含指定的): .prevUntil(停止条件)
同级别下一个: .next()
同级别下所有: .nextAll()
同级别下所有直到什么停止(不包含指定的): .nextUntil(停止条件)
父标签: .parent() 最高可以获取抽象层docuemnt
父标签所有: .parents() 获取的所有父标签中最高只能获取到html
父标签所有直到什么停止(不包含指定的): .parentsUntil(停止条件)
儿子们: .children()
同级别上下所有: .siblings()
等价方法:
$('div span') <==> $('div').find('span')
$('ul li:first') <==> $('ul li').find()
$('ul li:last') <==> $('ul li').last()
$('ul li:not("#d1")') <==> $('ul li').not('#d1')
3. jQuery的链式操作有什么特点，如何做到？(待定)
"""
jQuery之所以可以链式操作是因为, jQuery对象在调用jQuery方法之后返回的还是当前对象本身. 下面用python代码举例:
"""
class MyClass(object):
def func1(self):
print('func1')
return self
def func2(self):
print('func2')
return self
obj = MyClass()
obj.func1().func2()
4. jQuery绑定事件的方式有哪些，列举出你所知道的事件(待定)
# 2种绑定方式:
第一种: $('#d1').click(function () {子代码块})
第二种: $('#d1').on('click', function () {子代码块}) 功能更加强大 还支持事件委托
# 事件:
click事件: 鼠标点击事件
clone事件: 克隆事件
默认情况下只克隆标签和文本不克隆事件
如果想在克隆标签和文本的基础之上再可溶事件需指定clone(true)
focus事件: 获取焦点事件
scroll事件: 文本框中的起始滚动行事件
$(window).scroll(function(){}) // 返回顶部
hover事件: 悬停事件
$('#d1').hover(function(){}) // 悬浮+离开
$('#d1').hover(function(){},function(){}) // 第一个表示悬浮 第二个表示离开
input事件: 实时监控输入内容事件
$('#d1').on('input',function(event){event.keyCode})
keydown事件和keyup事件: 键盘按键事件
$(window).keydown(function(event){
event.keyCode // event.keyCode可以获取键盘输入的ASCII字符对应得10进制
})
$(window).keyup(function(){})
