![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript之webAPI
陀陀吖
有朋自远方来,不亦乐乎。
展开
-
1-01DOM概念基础
一、js三部分js分为三部分:ECMAScript: js基本的语法DOM: Document Object Model 文档对象模型,操作界面的元素BOM: Browser Object Model 浏览器对象模型,操作的是浏览器二、js基本概念DOM:文档对象模型文档(documnet):把一个html文件看出一个文档,由于万物皆对象,所以把这个文档看成是一个...原创 2019-05-27 22:35:30 · 104 阅读 · 0 评论 -
13动态创建列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } ul { ...原创 2019-06-06 19:08:32 · 141 阅读 · 0 评论 -
14-js 为元素绑定多个事件兼容处理
为元素绑定事件(DOM):一种,但是不兼容,有两种1 、对象.addEventListener(“事件类型”,事件处理函数,false);–谷歌和火狐支持,IE8不支持为按钮绑定点击事件:参数1:事件的类型—事件的名字,没有on参数2:事件处理函数—函数(命名函数,匿名函数)参数3:布尔类型,目前就写falsemy$("btn").addEventListener("c...原创 2019-06-06 19:56:29 · 191 阅读 · 0 评论 -
15事件冒泡,事件委托,事件捕获·
事件委托:就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件,大大的减少与dom的交互次数,提高性能事件冒泡:就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div事件捕获:从父级...转载 2019-06-06 21:15:47 · 187 阅读 · 0 评论 -
16-js百度搜索框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; ...原创 2019-06-06 21:25:50 · 324 阅读 · 0 评论 -
17-js轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; ...原创 2019-06-06 21:32:23 · 772 阅读 · 0 评论 -
18-js-关于userAgent、history、location
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--=============================================BOM============...原创 2019-06-06 21:34:42 · 352 阅读 · 0 评论 -
19-js-关于定时器setInterval、
一、第一种定时器 setInterval(函数,事件)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定时器</title> <script> //BOM中有两个定时器---计时器 //定时...原创 2019-06-06 21:39:37 · 1255 阅读 · 0 评论 -
20-js-动画函数的封装
一、匀速动画函数的封装 //设置任意的一个元素,移动到指定的目标位置 function animate(element, target) { clearInterval(element.timeId); //先清理定时器,这样无论怎么点击按钮都不会变快 //定时器的id值存储到对象的一个属性中 element.timeId = setInte...原创 2019-06-06 21:45:24 · 444 阅读 · 1 评论 -
22-纯js-图片跟着鼠标飞的效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> *{ margin: 0; padding: 0; } body{ ...原创 2019-06-08 23:35:13 · 188 阅读 · 0 评论 -
12点击按钮创建一个列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 300px; height: 400px; ba...原创 2019-06-06 19:04:32 · 398 阅读 · 0 评论 -
12-元素创建
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> /* * * 元素创建-----为了提高用户的体验 ...原创 2019-06-06 10:57:57 · 231 阅读 · 0 评论 -
1-02体验DOM的小案例
一、排他功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>按钮排他功能</title></head><body> <input type="button" value="没怀...原创 2019-06-05 18:25:01 · 236 阅读 · 0 评论 -
03-获取元素的方法
根据id属性的值获取元素,返回来的是一个元素对象document.getElementById(“id属性的值”);根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象document.getElementsByTagName(“标签名字”);!!!下面的几个,有的浏览器不支持:根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对...原创 2019-06-05 18:31:34 · 272 阅读 · 0 评论 -
04-案例模拟搜索框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> input { color: gray; } </style></head&g...原创 2019-06-05 18:33:18 · 165 阅读 · 0 评论 -
05-案例验证文本框密码长度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><input type="text" value="" id="txt"/><scri...原创 2019-06-05 18:34:18 · 490 阅读 · 0 评论 -
06-innerText和innerHTML的区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> div{ width: 300px; height: 200px; border: 2...原创 2019-06-05 18:37:27 · 126 阅读 · 0 评论 -
07-自定义属性
一、自定义属性的映入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> ul{ list-style-type: none; cursor: poi...原创 2019-06-05 18:43:25 · 86 阅读 · 0 评论 -
08-tab切换案例实现
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { ...原创 2019-06-05 18:46:10 · 257 阅读 · 0 评论 -
09-关于节点
一、节点基础内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>节点知识</title></head><body> <div id="dv"> <s...原创 2019-06-05 18:50:02 · 234 阅读 · 0 评论 -
10-隔行变色(节点)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="button" value="变色" id="btn"&g...原创 2019-06-05 18:53:23 · 196 阅读 · 0 评论 -
11-全选和全不选
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { ...原创 2019-06-05 19:01:45 · 123 阅读 · 0 评论 -
23-纯js实现拖拽的对话框
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center;...原创 2019-06-08 23:38:04 · 313 阅读 · 0 评论