jq的DOM操作与事件操作02的有感记录
16lz
2021-04-15
看小猪老师写的行云流水甚是羡慕
但是咱得老老实实弄清楚到底是咋回事
- this关键字指代当前的标签input
- 其次我打印了$(this).next()[0]的信息,发现 这个tagName 是标签的大写
- 最后注意的点就是 insertAfter 是兄弟元素的新增,而append是追加子元素
const user = $("input[name='username']");
user.blur = function(){
// console.log("sss");
let tip = "";
//用户列表
const users = ["admin", "peter", "zhu"];
// console.log($(this).val().length);
if ($(this).val().length === 0) {
tip = "用户名不能为空";
$(this).focus();
}
console.log($(this).next());
//显示提示信息到页面中
if ($(this).next()[0].tagName !== "SPAN") {
$("<span></span>").html(tip).css({
color: "red",
fontSize: "14px",
}).insertAfter($(this));
}
}
//on('事件类型',回调函数)
//事件监听 addEventListener()
//input 检测用户的输入内容
//当时输入后的blur会产生span标签,这里搞一个判断
user.on("input", function () {
if ($(this).next()[0].tagName === "SPAN") {
$(this).next().remove();
}
});
更多相关文章
- js基础知识:JS对DOM元素的基本操作,遍历、增删改查。
- 【jQuery基础入门】顶级对象$()和jQuery中常用的getter、setter
- 技术问答-20 ArrayList和LinkedList
- css实现垂直居中的方式
- 一个可能让你的页面渲染速度提升数倍的CSS属性
- 一些鲜为人知的的CSS3属性
- css 中的 content-visitly 提升渲染性能
- 前端170面试题+答案学习整理
- DAY03-实例演示选择器优先级、前端组件样式模块化实现、伪类选择