
js2
我的奋斗ing
找不到对象的程序猿
展开
-
js DOM的概念及子节点类型
DOM:Document Object Model 文档对象模型文档:html页面文档对象:页面中元素文档对象模型:定义为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树,同时定义了很多方法来操作这棵树中的每一个元素(节点)元素.childNodes:只读 属性 子节点列表集合只包含一级子节点,不包含后辈孙级以下节点DOM节点的类型有很多种 12种...原创 2019-01-04 23:02:52 · 496 阅读 · 0 评论 -
js 事件绑定
给一个对象绑定一个事件处理函数的第一种形式obj.onclick = fn;<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <script type原创 2019-01-06 20:40:28 · 332 阅读 · 0 评论 -
js 事件捕获
<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style> div{padding: 40px;}原创 2019-01-06 21:11:58 · 6903 阅读 · 2 评论 -
js 事件的取消
ie:obj.detachEvent(事件名称,事件函数);标准:obj.removeEventListener(事件名称,事件函数,是否捕获);<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></titl..原创 2019-01-06 23:21:19 · 3385 阅读 · 0 评论 -
js 键盘事件
onkeydown:当键盘按键按下的时候触发onkeyup:当键盘按键抬起的时候触发event.keyCode:数字类型 键盘按键的值 键值ctrlKey,shiftKey,altKey 布尔值当一个事件发生的时候,如果ctrl || shift || alt 是按下的状态,返回true,否则返回false当鼠标按住ctrl键并点击页面,返回true,若只点击页面,则返回f...原创 2019-01-07 11:55:58 · 5656 阅读 · 0 评论 -
js 事件默认行为
事件默认行为:当一个事件发生的时候浏览器自己会默认做的事怎么阻止?当前这个行为是什么事件触发的,然后在这个事件处理函数中使用return false;oncontextmenu:右键菜单事件,当右键菜单(环境菜单)显示出来的时候触发--------------------右键菜单事件----------------------------------------------...原创 2019-01-07 14:02:27 · 440 阅读 · 0 评论 -
js 拖拽的原理
onmousedown:选择元素onmousemove:移动元素onmouseup:释放元素注意这里有问题:当我把鼠标拖快一点,就会出现脱离oDiv的效果,从而红方块停下来。注意这里的问题:当有东西挡住我拖拽的方块,我把鼠标松开,却失败了。解决办法:把onmouseup换成整个文档document ...原创 2019-01-07 15:34:05 · 416 阅读 · 0 评论 -
js 拖拽的问题以及解决
1、拖拽的时候,如果有文字被选中,会产生问题 原因:当鼠标按下的时候,如果页面中有文字被选中,那么会触发浏览器默认拖拽文字的效果解决办法:要阻止默认事件,首先你要知道这个默认事件是什么触发的。解决:标准:阻止默认行为 非标准ie:2-7...原创 2019-01-07 18:24:11 · 1199 阅读 · 0 评论 -
js 拖拽检测
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#div1 {widt原创 2019-02-08 16:27:27 · 640 阅读 · 0 评论 -
js 拖拽改变层大小
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#div1 {widt原创 2019-02-08 16:46:21 · 207 阅读 · 0 评论 -
js 滚动条的模拟和拓展运用
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#div1 {widt原创 2019-02-22 16:32:10 · 164 阅读 · 0 评论 -
js 鼠标滚轮
&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;&lt;title&gt;无原创 2019-02-22 16:46:45 · 1162 阅读 · 0 评论 -
js 事件流,事件冒泡机制
事件冒泡:当一个元素接收到事件的时候,会把他接收到的所有传播给他的父级,一直到顶层window,<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <sty原创 2019-01-06 19:31:07 · 1126 阅读 · 1 评论 -
js event-事件对象和clientX,clientY
event:事件对象,当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供我们在需要的时候调用。飞机-黑匣子。事件对象必须在一个事件调用的函数里面使用才有内容事件函数:事件调用的函数,一个函数是不是事件函数,不在定义的决定,而是取决于这个调用的时候兼容:ie/chrome:event是一个内置全局对象标准下(火狐...原创 2019-01-06 17:41:03 · 1246 阅读 · 0 评论 -
js 子节点和兄弟节点操作
元素.firstChild:只读 属性 第一个子节点 标准下:firstChild会包含文本类型的节点 非标准下:只包含元素节点元素.firstElementChild:只读 属性 标准下获取第一个元素类型的子节点方法一:<!DOCTYPE html><html> <head> ...原创 2019-01-05 09:51:00 · 1654 阅读 · 0 评论 -
js -parentNode、offsetParent父节点
<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <script> window.onload = function(原创 2019-01-05 11:03:13 · 525 阅读 · 0 评论 -
js 元素的各种位置尺寸宽高
元素.offsetLeft[Top]:只读 属性 当前元素到定位父级的距离(偏移值)到当前元素的offsetParent的距离如果没有定位父级 offsetParent -> body offsetLeft -> html如果有定位父级 ie7:如果自己没有定位,那么offsetLeft[Top]是到body的距离 如果自...原创 2019-01-05 15:31:05 · 436 阅读 · 0 评论 -
js-封装绝对位置函数getPos()
<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style> div{padding:40px 50px;}原创 2019-01-05 19:36:18 · 1014 阅读 · 0 评论 -
js-addClass,removeClass
addClass<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style> </style>原创 2019-01-05 22:27:20 · 2382 阅读 · 0 评论 -
js 表格操作
<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <script> /*tHead:表个头原创 2019-01-05 23:45:17 · 1376 阅读 · 0 评论 -
js 表单操作
表单通常通过name获取元素<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <script> window.onl原创 2019-01-06 11:15:59 · 173 阅读 · 0 评论 -
js 表单事件
onsubmit:事件 当提交表单的时候触发submit()方法 提交表单<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <script&g原创 2019-01-06 11:41:46 · 1066 阅读 · 0 评论 -
js- BOM
BOM:Browser Object Model 浏览器对象模型open(页面的地址url,打开的方式)方法 打开一个新的窗口(页面) 如果url为空,则默认打开一个空白页面 如果打开方式为空,默认为新窗口方式打开返回值:返回新打开的窗口的window对象<!DOCTYPE html><html> <head> ...原创 2019-01-06 13:04:52 · 91 阅读 · 0 评论 -
js 文档宽高及窗口事件
可视区的尺寸document.documentElement.clientWidthdocument.documentElement.clientHeight滚动距离document.documentElement.scrollTop / scrollLeft谷歌兼容性处理 document.body.scrollTop<!DOCTYPE html><h...原创 2019-01-06 15:37:34 · 1006 阅读 · 0 评论 -
js 焦点事件
焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入。我们可以通过一些方式给元素设置焦点1 点击2 tab3 js不是所有元素都能够接收焦点,能够相应用户操作的元素才有焦点onfocus:当元素获取到焦点的时候触发onblur:当元素失去焦点的时候触发<!DOCTYPE html><html> &...原创 2019-01-06 16:23:50 · 15434 阅读 · 0 评论 -
js cookie
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>var oDate原创 2019-02-22 19:55:45 · 141 阅读 · 0 评论