dom编程
yihuoZhou
每天进步一点
展开
-
如何实现浏览器兼容版的element.children
element.children这个获取节点子节点的方法支持ie9及以上版本,为了能够兼容低版本的ie,可参考一下的代码实现兼容,具体的参考资料是MDN上的实现方法:// Overwrites native 'children' prototype.// Adds Document & DocumentFragment support for IE9 & Safari.// Returns ar原创 2017-05-23 22:15:15 · 1843 阅读 · 0 评论 -
利用iframe实现表单的无刷新提交
表单的无刷新提交,除了使用ajax实现,利用iframe也可实现表单的无刷新提交(其关键在于设置iframe的name与表单的target值相同)。 下面代码利用iframe实现表单的无刷新提交兼容到主流浏览器(IE6+,Firefox最新,Chrome最新)<!DOCTYPE html><html><head> <meta charset="utf-8"> <titl原创 2017-05-31 17:06:20 · 2191 阅读 · 0 评论 -
用来禁止指定的可验证元素的验证方法
1.input元素设置type为hidden、reset、button时将不做表单验证2.button元素设置type为reset、button时不会做表单验证3.input或textarea设置readonly属性时将不会做表单验证4.datalist的子孙元素的可验证元素将不会做表单验证5.设置了disabled的元素将不会做表单验证6.在标签中添加novalidate属性来禁止验证7.利用in原创 2017-05-31 15:20:13 · 464 阅读 · 0 评论 -
封装一个输入框通用的光标操作接口
封装一个输入框通用的光标操作接口,使得在传入输入框和光标的起始、结束位置后,可以将输入框中从起始位置到结束位置的内容选中(选中位置高亮),如function selection(input,start,end){ // input为输入框,如input、textarea // start为光标起始位置,如 0 // end为光标结束为止,如 10 // TODO}<原创 2017-05-31 14:43:24 · 529 阅读 · 0 评论 -
如何处理由于浏览器设置导致的autocomplete="off"失效的问题
1.因为谷歌只会自动填充第一个<input type="password">和它之前的<input>,所以可以添加以下代码:<input style="display:none"><input type="password" style="display:none">//添加在form元素的最上边,2.最好的解决是给autocomplete设置其他值(除on或off)<input type="tex原创 2017-05-31 09:58:39 · 5785 阅读 · 0 评论 -
解决JS双击事件dblclick触发时,同时会执行click事件中的语句
双击dblclick事件,同时会执行click事件中的语句,当需要为一个元素同时添加这两个事件时,显然这不是我们想要的结果,举个实例,在最近做的canvas开发中使用鼠标画区域,鼠标单击一下开始画,鼠标双击时结束,并保存当前所画的区域,这时候就碰到了这个问题。解决的方法,,可以参考下面的代码,用延时的方法实现。<!DOCTYPE html><html><head> <title></titl原创 2017-05-18 10:56:06 · 18801 阅读 · 0 评论 -
canvas基本操作画圆
用canvas画一个圆 在一个300*300的canvas(id为“myCanvas“)上,以坐标点(150, 150)为圆心,100为半径,画一个边框色为#4d4e53,填充色为#6a83ff的圆。<!DOCTYPE html><html><head> <title>canvas画圆</title> <meta charset="utf-8" description=原创 2017-05-27 13:55:20 · 3110 阅读 · 0 评论 -
实现浏览器兼容版的element.dataset
element.dataset获取自定义属性时(element.dataset.id),在一些低版本的IE浏览器下不兼容,兼容解决性代码。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>dataset</title> <style> li{cursor: default;line-heig原创 2017-05-25 18:27:29 · 2665 阅读 · 0 评论 -
实现浏览器兼容版的window.getComputedStyle
为实现浏览器兼容版的获取元素的实际样式,可以封装一个函数,下面是网易微专业上的一道练习题,后面是我写的代码封装函数。 getStyle函数用于获取元素的实际样式,语法如下: var cssPropertyValue = getStyle (element, cssPropertyName); 使用示例如下: getStyle(element, “color”)原创 2017-05-25 16:56:52 · 3883 阅读 · 0 评论 -
DOM实践学习笔记1--组件的实现流程
1.什么是组件? 经历前期的模块搭建,开发时期主要是对组件的开发,并将它们有机的组建到一起来完成业务需求。那么什么是组件呢?在用户界面开发领域,它是一种面对用户的、独立的可复用交互元素的封装。针对前端开发,它是html(结构)+js(逻辑)+css(样式);html用来控制组件的结构,js控制组件的逻辑,css控制组件的样式。常用的组件有Mask(遮罩组件),Datepicker(日期选择原创 2017-06-01 16:30:17 · 542 阅读 · 0 评论