7DOM 事件薄弱项1(()1属性名)click谐音读音克利克使用方法KaTeX parse error: Cant use function \( in math mode at position 1: \̲(̲(#id).click(f…(document).on(‘change’,‘#sel_status’,function(){})讲解属性作用表单值发生改变并且失焦离开元素才触发。input 输入框改完内容鼠标离开输入框才触发select 下拉框选择立刻触发。使用场景下拉选择框切换选项重新请求列表数据radio 单选、checkbox 复选框选中改变 关联input、blur使用图3(()1属性名)input谐音读音因普特使用方法KaTeX parse error: Cant use function \( in math mode at position 1: \̲(̲(document).on(…(document).on(‘submit’,‘#sel_status’,function(){})讲解属性作用form 表单点击提交按钮触发默认会刷新页面。 调用 event.preventDefault() 阻止浏览器默认提交行为。使用场景表单统一校验校验通过再发送 ajax 请求提交数据使用图很少使用5(()1属性名)keyup谐音读音ki 阿普使用方法KaTeX parse error: Cant use function \( in math mode at position 1: \̲(̲(document).on(…(‘#inp_no_num’).on(‘keydown’,function(e){}讲解属性作用键盘按键按下瞬间就触发比 keyup 更早。使用场景拦截非法字符输入禁止输入某些字符。页面快捷键Ctrls 保存等使用图7(()1属性名)mouseenter谐音读音冒斯 恩特使用方法KaTeX parse error: Cant use function \( in math mode at position 1: \̲(̲(#avatar).on(…(‘#avatar’).on(‘mouseleave’, function () { })讲解属性作用鼠标离开元素触发不冒泡。使用场景鼠标移走隐藏悬浮弹窗、下拉面板。使用图9(()1属性名)scroll谐音读音斯扣欧使用方法KaTeX parse error: Cant use function \( in math mode at position 1: \̲(̲(document).on(…(document).on(‘resize’,‘#sel_status’,function(){})讲解属性作用浏览器窗口大小发生变化就触发使用场景图表库图表重绘窗口变了图表重新渲染响应式布局窗口变化切换 PC / 移动端布局使用图11(()1属性名)focus谐音读音佛扣斯使用方法KaTeX parse error: Cant use function \( in math mode at position 1: \̲(̲(#inp_phone).…(‘#inp_phone’).on(‘blur’, function () {}讲解属性作用输入框光标移走失去焦点。使用场景用户输入完成离开输入框校验手机号、邮箱格式。使用图事件名 触发时机 典型业务场景click 鼠标点击 按钮、弹窗开关、删除确认change 值改变 失焦 下拉选择、单选复选input 每输入字符实时触发 实时搜索搭配防抖submit form 表单提交 表单校验阻止默认跳转keyup 按键松开 回车搜索、ESC 关闭弹窗keydown 按键按下瞬间 快捷键、拦截非法字符mouseenter 鼠标移入 悬浮弹窗显示mouseleave 鼠标移出 悬浮弹窗隐藏scroll 页面滚动 回到顶部、滚动加载搭配节流resize 窗口大小改变 图表重绘、响应式搭配节流focus 输入框获得光标 聚焦样式、清空提示文字blur 输入框失去光标 失焦校验表单8jQuery 核心方法获取元素KaTeX parse error: Cant use function \( in math mode at position 5: () 1\̲(̲() 1属性名\)()使用方法KaTeX parse error: Unexpected character: at position 81: …件、赋值、样式操作。 使用图̲ .on () 事件绑定 / …(‘.box’).on(‘click’,function(){})讲解属性作用普通绑定给已有元素绑定事件。事件代理给 AJAX 动态渲染出来的元素绑定事件父容器存在即可。使用场景AJAX 渲染表格表格行、编辑删除按钮是后面动态生成不能直接绑定 click用 on 事件代理。使用图.off () 移除事件3:属性名.off ()使用方法(′.box′).off(′click′)讲解属性作用移除元素绑定的事件使用场景取消事件监听防止重复触发弹窗销毁前解绑事件。遍历.each()4:属性名.each()使用方法(.box).off(click) 讲解属性作用移除元素绑定的事件 使用场景取消事件监听防止重复触发弹窗销毁前解绑事件。 遍历 .each () 4:属性名.each () 使用方法(′.box′).off(′click′)讲解属性作用移除元素绑定的事件使用场景取消事件监听防止重复触发弹窗销毁前解绑事件。遍历.each()4:属性名.each()使用方法(‘li’).each(function(index,dom){)讲解属性作用循环遍历 jQuery 对象集合。使用场景批量处理表格每一行、列表每一项批量赋值、批量修改样式使用图取值赋值组 val () /text () /html ()5:属性名val ()使用方法let name $(‘#name’).val().trim();讲解属性作用表单输入框取值、赋值使用场景编辑弹窗打开回填表单获取输入框用户输入。属性名.text()使用方法let t KaTeX parse error: Unexpected character: at position 73: …析。 使用场景只修改文字内容̲属性名 .html () …(‘.box’).html(‘红色文字’)讲解属性作用读写元素内部 HTML 片段会解析标签。使用场景渲染状态标签、动态拼接 html 片段渲染页面。属性操作组 attr /removeAttr/prop /data6:属性名.attr()谐音读音诶特使用方法let id KaTeX parse error: Unexpected character: at position 84: …取标签自定义属性设置标签属性̲属性名.removeAtt…(‘input’).removeAttr(‘disabled’)讲解属性作用删除标签上的属性使用场景移除元素的 disabled、readonly。属性名.prop ()谐音读音普若普使用方法KaTeX parse error: Unexpected character: at position 105: …全选复选框禁用启用输入框 ̲属性名.data () 使用…(‘tr’).data(‘row_id’,1002)读let rid KaTeX parse error: Unexpected character: at position 103: …id事件代理中拿业务 id。̲类名操作 addClass /…(‘.menu’).addClass(‘active’)讲解属性作用追加 class 类名原有类保留。使用场景菜单选中高亮增加 active 样式。属性名.removeClass()谐音读音瑞木乌 克拉斯使用方法KaTeX parse error: Unexpected character: at position 64: …s。 使用场景取消选中高亮。̲属性名 .toggleCl…(‘.drop’).toggleClass(‘open’)讲解属性作用有这个类就删掉没有就加上切换使用场景判断下拉框是否已经展开。属性名hasClass ()谐音读音哈兹 克拉斯使用方法if((′.box′).hasClass(′open′))讲解属性作用判断元素是否拥有某个class返回布尔。使用场景判断下拉框是否已经展开。样式控制.css()8:属性名.css()使用方法(.box).hasClass(open)){} 讲解属性作用判断元素是否拥有某个 class返回布尔。 使用场景判断下拉框是否已经展开。 样式控制 .css () 8:属性名.css() 使用方法(′.box′).hasClass(′open′))讲解属性作用判断元素是否拥有某个class返回布尔。使用场景判断下拉框是否已经展开。样式控制.css()8:属性名.css()使用方法(‘.box’).css({width:‘200px’,background:‘red’})讲解属性作用读写行内 css 样式。使用场景JS 动态修改元素宽高、颜色。show() / hide() / toggle()9:属性名show()使用方法$(‘.dialog’).show()讲解属性作用显示隐藏的元素:属性名hide()使用方法$(‘.dialog’).hide()讲解属性作用隐藏元素属性名toggle()使用方法KaTeX parse error: Unexpected character: at position 141: …使用场景提示消息淡入淡出。 ̲属性名slideDown (…(‘tbody’).find(‘.del’)讲解属性作用查找后代所有子子孙孙使用场景找行内按钮属性名.closest(‘选择器’)谐音读音克楼泽斯特使用方法let $tr $(this).closest(‘tr’)讲解属性作用向上查找祖先找最近匹配的父级包含自己使用场景点击按钮找当前 tr 行属性名.parent() 谐音读音佩润特讲解属性作用只找直接父元素只上一层使用场景获取直接父元素属性名.children()谐音读音秋准讲解属性作用只找直接子元素不找后代使用场景只找子元素属性名.siblings()谐音读音西布林兹讲解属性作用获取所有兄弟元素。菜单选中其他兄弟去掉 active。使用场景导航清除其他选中属性名.eq(index)谐音读音伊克讲解属性作用按下标取 jQuery 集合中的某一个元素。$(‘li’).eq(2)取第 3 个。使用场景取集合第 n 项属性名.index()谐音读音因戴克斯讲解属性作用获取当前元素在兄弟中的下标序号。使用场景获取排行序号帮我写一篇博客