前端界面中经常需要获取事件的源节点以便进行后续的操作。
由于在前端界面中经常处理的是click事件,本文均已click事件进行举例。
其他事件类似,使用对应的方法即可。
比较常见的事件有:
HTML部分
<a onclick="deleteNo(this)">DelBtn</a>
JS部分
function deleteNo(this)
{
//this便是该a标签节点
}
引入Jquery有两种常见的获取源节点的方式,两者有轻微差异,请阅代码
HTML部分
<button id="del_btn">DelBtn</button>
JS部分
//方式1直接绑定click事件
$("#del_btn").click(function(){
//$(this)便是触发的节点
var obj = $(this);
});
//方式2通过on进行事件绑定(推荐)
//方法2支持对动态生成的HTML元素节点进行绑定(关键)
//方法2支持对子级元素的绑定
$("#del_btn").on("click", function(){
//$(this)便是触发的节点
var obj = $(this);
});
需要考虑火狐兼容性,通过事件本身获取源节点
JS部分
var event = window.event || arguments.callee.caller.arguments[0];
//obj就是我们要获取的节点
var obj = event.srcElement || event.target;
//可以转成Jquery对象,方便各种使用
var useObj = $(obj);
当前还没有观点发布,欢迎您留下足迹!
在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案
使用背景色渐变可以使得页面质感得到大幅度提升,CSS样式中通过gradients属性指定两个或多个颜色之间平滑过渡,由于颜色的渐变是由浏览器生成,因此不会出现不同分辨率下失真的情况。
对于很多二栏布局的网站而言,正文部分过长时,侧边栏区域下拉过程中出现大片空白,因此我们可以实现当屏幕下滑达到指定元素位置(如即将越过)后对元素固顶来解决侧边栏区域的空旷感
严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()
Vue3 中所提供组合 API、ref、reactive、provide、inject几大特性,可以支持完成全局状态管理能力,Vuex 是为 Vue 单独提供的状态管理插件,相对比较笨重,如果项目简单可以尝试替代
绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果