日考题目:
1.现有三个普通函数a,b,c都需要用户登陆之后才能访问。现需要你写一个装饰器校验用户是否登陆,并且用户只要登陆一次其他函数在调用时也无需再校验
def login_auth(func):
def wrapper(*args,**kwargs):
if user_info.get('user'):
res=func(*args,**kwargs)
return res
else:
print('请先登录')
login()
return wrapper
@login_auth
def a():
pass
@login_auth
def b():
pass
@login_auth
def c():
pass
2.python垃圾回收机制
- 引用计数
- 就是有多少引用指向了该对象。
- 引用计数加1的情况:对象被创建、被引用、被作为参数、作为一个元素存在容器中。
- 引用计数减1的情况:对象别名显示被消毁、别名被赋予新的对象、对象离开作用域,也就是函数执行完毕时,局部变量的引用计数减1,全局不变。对象元素从容器中被消毁或者容器被销毁时。
- 优点:高效、实时(分摊到平时清理,而不是等回收)、有确定的生命周期,易实现。
- 标记清除
- 解决循环引用问题,达到垃圾回收的阈值会触发。
- Python的引用计数算法并不能处理互相指向自己的对象。
- 引入GC算法,先标记活动对象,然后回收位标记的非活动对象。
- 它是辅助垃圾回收,主要处理一些容器对象。
- 分代回收
- 以空间换时间,将内存根据对象存活时间划分,分成年轻代、中年代、老年代,垃圾收集频率随对象的存活时间的增大而减小。存活时间通常由经过几次垃圾回收来度量。
3.什么是进程,线程,协程,程序中如何依次创建/实现它们
- 进程:是具有一定独立功能的程序关于某个数据集合上的一次运行活动,是系统进行资源分配和调度的一个独立单位。每个进程都有自己独立的空间,进程是线程的容器,程序是指令、数据及其组织形式的描述,进程是程序的实体。
- 线程:是进程的一个实体,是CPU调度和分派的基本单位,是比进程更小的能独立运行的单位。线程可与同属一个进程的其他线程共享进程所拥有的全部资源。线程间通信主要通过共享内存,上下文切换,资源开销少,但没有进程稳定容易丢失数据。
- 协程:是一种用户态的轻量级线程,协程的调度完全由用户控制。在单线程下实现并发。通过手动模拟操作系统“多道技术”,实现切换+保存状态。实现协程:切换+保存状态。
昨日回顾:
1.BOM
window.open(url,'','width=100px,height=200px,')
location.href
location.reload
2.DOM:
查找标签:document.getElementById() 通过id得到标签本身
document.getElementsClassName() 类名获取数组套标签
document.getElementsTagName() 标签名获取数组套标签
属性操作,文本操作,节点操作,获取值操作(获取用户输入 选择 上传 的文本值/文本对象)样式操作 属性操作(classList)
CDN内容分发网络
3.js事件:
绑定事件的两种方式:
1.标签内部直接写函数名加括号
2.先利用js查找标签 然后动态绑定
window.onload=function(){
//js代码
}
标签对象.onclick=function(){
//事件触发之后的操作代码
}
4.如何用js代码创建标签
如果变量名指定的是一个标签对象:xxxEle
var pEle=document.createElement('p')
如果变量名指代的是一个jQuery对象:$xxxEle
$pEle=$('p')
5.原生的js对象(标签对象)与jQuery对象的相互转换
一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$:
$() 查找的都是一个数组的形式(内部才是一个个原生js对象),通过索引取值的方式,能拿到原生的js对象
var $variable = jQuery对象
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象
原生的js对象如何转换成jQuery对象:
$(原生的js对象) #str([1,2,3,4])
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法
jQuery(类库):
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。
$("#i1").html()
的意思是:获取id值为 i1
的元素的html代码。其中 html()
是jQuery里的方法。
相当于: document.getElementById("i1").innerHTML;
虽然 jQuery对象
是包装 DOM对象
后产生的,但是 jQuery对象
无法使用 DOM对象
的任何方法,同理 DOM对象
也没不能使用 jQuery
里的方法。
1.基本选择器:
基本选择器语法:$(选择器).action(操作)
id选择器:$('#id')
标签选择器:$('tagName')
class选择器:$('.className')
配合使用:$('div.c1') //class里有c1类的div标签
所有元素选择器:$('*')
组合选择器:$('#id,.className,tagName')
2.层级选择器
x和y可以为任意选择器:
$('x y'); x的所有后代y
$('x>y'); x的所有儿子y
$('x+y'); 所有紧挨在x后面的y
$('x~y'); x后面的兄弟y
3.基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从'后代'元素找)
<head>
<meta charset="UTF-8">
<title>基本筛选器</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div>div
<span class="c1">span</span>
<span>span</span>
<span>span</span>
</div>
<div>
<p id="d1">p</p>
<p>p</p>
<p>p</p>
</div>
</body>
$('ul')
k.fn.init [ul, prevObject: k.fn.init(1)]
$('ul li')
k.fn.init(10) [li, li, li, li, li, li, li, li, li, li, prevObject: k.fn.init(1)]
$('ul li:first')
k.fn.init [li, prevObject: k.fn.init(1)]
$('ul li:last')
k.fn.init [li, prevObject: k.fn.init(1)]
$('ul li:eq(1)')
k.fn.init [li, prevObject: k.fn.init(1)]
$('ul li:even')
k.fn.init(5) [li, li, li, li, li, prevObject: k.fn.init(1)]
$('ul li:odd')
k.fn.init(5) [li, li, li, li, li, prevObject: k.fn.init(1)]
$('ul li:gt(3)')
k.fn.init(6) [li, li, li, li, li, li, prevObject: k.fn.init(1)]
$('ul li:lt(3)')
k.fn.init(3) [li, li, li, prevObject: k.fn.init(1)]
$('div')
k.fn.init(2) [div, div, prevObject: k.fn.init(1)]
$('div span')
k.fn.init(3) [span.c1, span, span, prevObject: k.fn.init(1)]
$('div span:not(.c1)')
k.fn.init(2) [span, span, prevObject: k.fn.init(1)]
$('div span:has(.c1)')
k.fn.init [prevObject: k.fn.init(1)]
$('div:has(.c1)') #筛选后代元素是否有该属性
k.fn.init [div, prevObject: k.fn.init(1)]
$('div:has(#d1)')
k.fn.init [div, prevObject: k.fn.init(1)]
4.属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p username="jason"></p>
<span username="echo"></span>
<input type="text" username="oscar">
</body>
$('[username]')
k.fn.init(3) [p, span, input, prevObject: k.fn.init(1)]
$('[username="jason"]')
k.fn.init [p, prevObject: k.fn.init(1)]
$('p[username="jason"]') #精确度越来越高
k.fn.init [p, prevObject: k.fn.init(1)]
5.表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
#表单对象属性
:enabled
:disabled
:checked
:selected
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<!--novalidate取消前端给你做的校验功能:详见 django forms组件-->
<form action="">
username<input type="text">
password<input type="password">
file<input type="file">
<input type="button" value="按钮">
<input type="radio">篮球
<input type="radio">足球
<input type="radio" checked>肉球
<select name="" id="">
<option value="">111</option>
<option value="" selected>222</option>
<option value="">333</option>
</select>
</form>
</body>
$('input')
k.fn.init(7) [input, input, input, input, input, input, input, prevObject: k.fn.init(1)]
$('[type="text"]')
k.fn.init [input, prevObject: k.fn.init(1)]
$('[type="password"]')
k.fn.init [input, prevObject: k.fn.init(1)]
$(':text')
k.fn.init [input, prevObject: k.fn.init(1)]
$(':password')
k.fn.init [input, prevObject: k.fn.init(1)]
$(':file')
k.fn.init [input, prevObject: k.fn.init(1)]
$(':button')
k.fn.init [input, prevObject: k.fn.init(1)]
$(':checked')
k.fn.init(2) [input, option, prevObject: k.fn.init(1)]
$('input:checked')
k.fn.init [input, prevObject: k.fn.init(1)]
$(':selected')
k.fn.init [option, prevObject: k.fn.init(1)]
6.筛选器方法:
下一个元素:
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素:
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素:
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
儿子和兄弟元素:
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
#找出正在处理的元素的后代元素
$("div").find("p") 等价于$("div p")
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<span>最上面的span</span>
<span>div上面的span</span>
<div id="d1">div
<span>div>span</span>
<p id="d2">div>p
<span>div>p>span</span>
</p>
<span>div>span</span>
</div>
<span>div+span</span>
<span>div~span</span>
</body>
$('span')
k.fn.init(7) [span, span, span, span, span, span, span, prevObject: k.fn.init(1)]
$('div span:first')
k.fn.init [span, prevObject: k.fn.init(1)]
var $spanEle=$('span')[2]
undefined
$spanEle
<span>div>span</span>
$($spanEle)
k.fn.init [span]
$($spanEle).next()
k.fn.init [p#d2, prevObject: k.fn.init(1)]
$($spanEle).nextAll()
k.fn.init(2) [p#d2, span, prevObject: k.fn.init(1)]
$($spanEle).nextUntil('#d2') #不包含
k.fn.init [prevObject: k.fn.init(1)]
var $spanEle=$('span:last')
undefined
$spanEle
k.fn.init [span, prevObject: k.fn.init(1)]
$spanEle.prev()
k.fn.init [span, prevObject: k.fn.init(1)]
$spanEle.prevAll() #同级别的
k.fn.init(4) [span, div#d1, span, span, prevObject: k.fn.init(1)]
$spanEle.prevUntil('#d1')
k.fn.init [span, prevObject: k.fn.init(1)]
$('#d2').parent()
k.fn.init [div#d1, prevObject: k.fn.init(1)]
$('#d2').parents()
k.fn.init(3) [div#d1, body, html, prevObject: k.fn.init(1)]
$('#d2').parents().parent()
k.fn.init(3) [document, html, body, prevObject: k.fn.init(3)]
$('#d2').parentsUntil('html')
k.fn.init(2) [div#d1, body, prevObject: k.fn.init(1)]
$('#d1').children() #儿子们
k.fn.init(3) [span, p#d2, span, prevObject: k.fn.init(1)]
$('#d1').siblings() #兄弟们
k.fn.init(4) [span, span, span, span, prevObject: k.fn.init(1)]
$('div').find('input') #找后代
k.fn.init [prevObject: k.fn.init(1)]
$('div').find('span')
k.fn.init(3) [span, span, span, prevObject: k.fn.init(1)]
$('div span')
k.fn.init(3) [span, span, span, prevObject: k.fn.init(1)]
$('div span').first() #两种方法等价
k.fn.init [span, prevObject: k.fn.init(3)]
$('div span:first')
k.fn.init [span, prevObject: k.fn.init(1)]
7.标签样式操作
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.c1 {
width: 400px;
height: 400px;
border-radius: 50%;
}
.bg_green {
background-color: green;
}
.bg_red {
background-color: red;
}
</style>
</head>
<body>
<div class="c1 bg_red bg_green"></div>
</body>
$('div')
k.fn.init [div.c1.bg_red.bg_green, prevObject: k.fn.init(1)]
$('div').removeClass('bg_red')
k.fn.init [div.c1.bg_green, prevObject: k.fn.init(1)]
$('div').addClass('bg_red')
k.fn.init [div.c1.bg_green.bg_red, prevObject: k.fn.init(1)]
$('div').hasClass('bg_red')
true
$('div').hasClass('ddd')
false
$('div').toggleClass('bg_red')
k.fn.init [div.c1.bg_green, prevObject: k.fn.init(1)]
$('div').toggleClass('bg_red')
k.fn.init [div.c1.bg_green.bg_red, prevObject: k.fn.init(1)]
#菜单栏
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.c1 {
position: fixed;
top: 0;
left: 0;
bottom: 0;
float: left;
width: 20%;
height: 100%;
background-color: violet;
}
.title {
font-size: 48px;
color: white;
text-align: center;
}
.item {
border: 1px solid black;
text-align: center;
color: red;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="c1">
<div class="item">
<div class="title">菜单一</div>
<div class="items">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="items hidden">
<div class="item">444</div>
<div class="item">555</div>
<div class="item">666</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="items hidden">
<div class="item">777</div>
<div class="item">888</div>
<div class="item">999</div>
</div>
</div>
</div>
<script>
var $titleEle = $('.title');
for (let i=0;i<$titleEle.length;i++){
let titleEle = $titleEle[i];
titleEle.onclick = function () {
// 先将所有的标签隐藏 this指代的是当前被点击对象 标签对象
// console.log($(this).parent().siblings().children());
// 然后在将被点击的那个标签打开
$(this).next().removeClass('hidden').parent().siblings().find('.items').addClass('hidden')
};
}
</script>
</body>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
<p>111</p>
<p>222</p>
</div>
</body>
$("p").css("color", "red")
k.fn.init(2) [p, p, prevObject: k.fn.init(1)]
$("div p:first").css("color", "red")
k.fn.init [p, prevObject: k.fn.init(1)]
$("div p:last").css("color", "green")
k.fn.init [p, prevObject: k.fn.init(1)]
8.Python中链式操作
class MyClass(object):
def a(self):
print('from a ')
return self
def b(self):
print('from b')
return self
def c(self):
print('from c')
return self
obj = MyClass()
obj.a().b().c()
"""
链式操作
就是对象调用了方法之后 再将对象返回即可实现
"""
9.尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
p {
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;
border: 3px solid red;
}
</style>
</head>
<body>
<p>
111
</p>
</body>
$('p').height()
21
$('p').width()
244
$('p').innerHeight()
61
$('p').innerWidth()
304
$('p').outerHeight()
67
$('p').outerWidth()
310
10.文本操作
HTML代码:
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本值:
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
值:
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>div
<p>div>p
<span>div>p>span</span>
<a href="">div>p>a</a>
</p>
</div>
<input type="text">
</body>
$('div').text()
"div
div>p
div>p>span
div>p>a
"
$('div').html()
"div
<p>div>p
<span>div>p>span</span>
<a href="">div>p>a</a>
</p>
"
$('div').text('垃圾')
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').html('我已经创建')
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').text('<h1>垃圾</h1>')
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').html('<h1>垃圾</h1>') #可以改成标题形式
k.fn.init [div, prevObject: k.fn.init(1)]
$('input').val()
""
$('input').val() #不加参数就是获取
"hhdddfj"
$('input').val('呐喊声设备的') #加了就是赋值
k.fn.init [input, prevObject: k.fn.init(1)]
11.属性操作
用于ID等或自定义属性:
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">我是一只小小鸟</p>
<input type="checkbox">唱
<input type="checkbox">跳
<input type="checkbox" checked>rap
</body>
$('p').attr('id')
"d1"
$('p').attr('username','jason')
k.fn.init [p#d1, prevObject: k.fn.init(1)]
$('p').attr({'password':'123','hobby':'study'})
k.fn.init [p#d1, prevObject: k.fn.init(1)]0: p#d1length: 1prevObject: k.fn.init [document]__proto__: Object(0)
$('p').removeAttr('hobby')
k.fn.init [p#d1, prevObject: k.fn.init(1)]
$('input').last().attr('checked')
"checked"
$('input').first().attr('checked')
undefined
$('input').first().prop('checked')
false
$('input').first().prop('checked',false)
k.fn.init [input, prevObject: k.fn.init(3)]
$('input').first().prop('checked','checked')
k.fn.init [input, prevObject: k.fn.init(3)]
$('input').first().attr('checked','checked')
k.fn.init [input, prevObject: k.fn.init(3)]
- prop和attr的区别:
虽然都是属性,但他们所指的属性并不相同,attribute所指的属性是HTML标签属性,而prop所指的是DOM对象属性。
举个例子:
<input type="checkbox" id="i1" value="1">
针对上面的代码,
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
可以看到attr获取一个标签内没有的东西会得到undefined,而prop获取的是这个DOM对象的属性,因此checked为false。 prop不支持获取标签的自定义属性。
总结一下:
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
12.文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
例子:
点击按钮在表格添加一行数据。
点击每一行的删除按钮删除当前行数据。
替换
replaceWith()
replaceAll()
克隆
clone()// 参数
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
button {
height: 50px;
width: 100px;
background-color: red;
border: 3px solid darkgray;
color: white;
}
</style>
</head>
<body>
<button>屠龙宝刀,点击就送</button>
<script>
// var btnEle = $('button')[0];
// btnEle.onclick = function () {
// // $(this).clone().insertAfter(this)
// // clone()默认是不克隆事件
// $(this).clone(true).insertAfter(this)
// }
$("button").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
</body>
var pEle=document.createElement('p')
undefined
$(pEle).text('时间简史')
k.fn.init [p]
$('body').append(pEle)
k.fn.init [body, prevObject: k.fn.init(1)]
$(pEle).append('body')
k.fn.init [p]
13.事件绑定
- 常用事件:
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
- js绑定事件的语法:
var xxxEle=document.getElementBy...
xxxEle.on+事件名=function(){
//事件代码
}
- jQuery绑定事件的语法:
#第一种:
$(选择器).事件名(function(){
//事件代码
})
#第二种
$(选择器).on('事件名',function(){
//事件代码
})
#实时监测input内部输入变化
$('input').on('input',function(){
//获取用户输入的内容
console.log($(this).val())
})
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<span>贪玩蓝月~是兄弟就来砍我</span>
<script>
$('span').hover(
function () { // 鼠标悬浮上去的时候触发 如果 只写了一个函数 那么悬浮和移开 只写同一个
alert('欢迎来到蓝月圣地')
},
function () { // 鼠标移开的时候触发
alert('下次再来么么哒')
}
)
</script>
</body>
如何阻止标签后续的事件
方式1
return false
方式2
e.preventDefault()
事件绑定
.on( events [, selector ],function(){})
- events: 事件
- selector: 选择器(可选的)
- function: 事件处理函数
移除事件
.off( events [, selector ][,function(){}])
off()
方法移除用 .on()
绑定的事件处理程序。
- events: 事件
- selector: 选择器(可选的)
- function: 事件处理函数
阻止后续事件执行
return false; // 常见阻止表单提交等
- e.preventDefault();
像click、keydown等DOM中定义的事件,我们都可以使用.on()
方法来绑定事件,但是hover
这种jQuery中定义的事件就不能用.on()
方法来绑定了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>注册页面</h1>
<form action="">
<p>
username:<input type="text" id="d1">
<span style="color: red" class="errors"></span>
</p>
<p>
password:<input type="password" id="d2">
<span style="color: red" class="errors"></span>
</p>
<input type="button" id="submit">
</form>
<script>
var btnEle = $('#submit')[0];
btnEle.onclick = function () {
// 获取用户输入的用户名 和密码
var userNameVal = $('#d1').val();
var passWordVal = $('#d2').val();
// 校验用户名和密码是否有值
if (userNameVal.length == 0){
// 去对应的提示框中 展示错误信息
$('.errors').first().text('用户名不能为空 你个大傻逼')
}
if(passWordVal.length == 0){
// 去对应的提示框中 展示错误信息
$('.errors').last().text('密码不能为空 你个小傻逼')
}
};
var inputEleList = $('input');
for(let i=0;i < inputEleList.length;i++){
inputEleList[i].onfocus = function () {
$(this).next().text('')
}
}
</script>
</body>
</html>