webapi
zh__quan
这个作者很懒,什么都没留下…
展开
-
选择器和节点属性
目录选择器节点之间关系节点的属性节点操作自定义属性选择器document.getElementById("id属性的值"); 根据id属性的值获取元素,返回来的是一个元素对象document.getElementsByTagName("标签名字"); 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象document.getE...原创 2019-07-29 09:12:19 · 479 阅读 · 0 评论 -
target、this、currentTarget的区别
target、this、currentTarget的区别先诉重点理论:1. target:触发事件的某个具体对象,只会出现在事件流的目标阶段(谁触发谁命中,所以肯定是目标阶段)2. currentTarget:绑定事件的对象,恒等于this,可能出现在事件流的任意一个阶段中3. 通常情况下target和currentTarget是一致的,我们只要使用target即可,但有一种...转载 2019-08-01 07:33:32 · 279 阅读 · 0 评论 -
动态设置元素属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; paddin...原创 2019-08-01 07:28:46 · 1174 阅读 · 0 评论 -
瀑布流案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>瀑布流布局</title> <link rel="stylesheet" href="css/index.css"><style>*...原创 2019-07-30 19:20:17 · 298 阅读 · 0 评论 -
pageX\/pageY、screenX\/screenY、clientX\/clientY的区别
screenX\/screenY 是以屏幕为基准进行测量,即:当前元素距离电脑显示器屏幕的尺寸clientX 和 clientY 是以当前可视区域为基准,类似于固定定位。相对于bodypageX 和 pageY 是以当前文档(绝对定位)为基准,不适用于IE6-8; 相对于浏览器offsetX和offsetY 和pageX,pageY相同,只有IE事件有这2个属性,标准事件没有对...原创 2019-07-30 19:16:32 · 503 阅读 · 0 评论 -
进度条案例和水平滚动条(鼠标事件,event事件,offset)
目录进度条水平滚动条进度条<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { marg...原创 2019-07-30 19:16:47 · 404 阅读 · 0 评论 -
放大镜效果(节点操作,鼠标事件,event事件对象,offset)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padd...原创 2019-07-29 15:31:04 · 365 阅读 · 0 评论 -
offset, client, scroll
目录offsetscrollclientoffset<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> #box{ ...原创 2019-07-29 11:11:19 · 144 阅读 · 0 评论 -
事件对象
事件的三个阶段:第一个阶段: 捕获阶段第二个阶段: 执行当前点击的元素第三个阶段: 冒泡阶段事件委托: 原理事件冒泡var ul = document.getElementById('ul');ul.onclick = function (e) {//e 事件参数(事件对象): 当事件发生的时候,可以获取一些和事件相关的数据// 获取到当前点击的li// e.t...原创 2019-07-29 10:14:59 · 136 阅读 · 0 评论 -
注册事件
addEventListener 的第三个参数为false的时候 : 事件冒泡addEventListener 的第三个参数为true的时候 : 事件捕获// 注册事件的第一种方式// 无法给同一个对象的同一个事件注册多个事件处理函数btn.onclick = function () {}// 浏览器兼容性问题 IE9以后才支持btn.addEventListen...原创 2019-07-29 10:13:26 · 705 阅读 · 0 评论 -
模拟搜索框
<script> //获取文本框 //注册获取焦点的事件 my$("txt").onfocus = function () { //判断文本框的内容是不是默认的内容 if (this.value == "请输入搜索内容") { this.value = "";//清空文本框 this.style.color = "black"; ...原创 2019-07-29 10:11:46 · 133 阅读 · 0 评论 -
全选和反选
<script> var j_tb = document.getElementById('j_tb'); var inputs = j_tb.getElementsByTagName('input'); // 1 全选 // 1.1 获取父checkbox,注册点击事件 var j_cbAll = document.getElem...原创 2019-07-29 09:57:15 · 107 阅读 · 0 评论 -
阻止超链接的默认的跳转:return false
<script> //点击超链接弹出对话框 //阻止超链接的默认的跳转:return false</script><!--第一种写法:--><a href="http://www.baidu.com" onclick="alert('哎呀,我被点了'); return false">百度</a><br/>...原创 2019-07-29 09:55:35 · 637 阅读 · 0 评论 -
innerHTML和innerText(选择水果案例)
innerHTML 获取内容的时候,如果内容中有标签,会把标签页获取到innerText 获取内容的时候,如果内容中有标签,会把标签过滤掉 ,前后的换行和空白都会去掉想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTMLbox.innerHTML = '<b>我...原创 2019-07-29 09:16:50 · 352 阅读 · 0 评论 -
兼容性问题
目录注册事件的兼容性问题 addEventListener事件处理对象的兼容性处理移除事件的兼容性处理获取页面滚动距离的浏览器兼容性问题获取鼠标在页面的位置,处理浏览器兼容性注册事件的兼容性问题 addEventListener // 处理注册事件的兼容性问题 // eventName, 不带on, click mouseover mouseout...原创 2019-08-01 07:38:46 · 130 阅读 · 0 评论