JS-DOM BOM学习笔记
关注
分享
扫一扫
文章平均质量分 79
钧桐
怕什么真理无穷?进一寸有进一寸的欢喜！
展开
-
[JS-DOM BOM学习笔记]JS-DOM BOM学习导读(都是细节，我已收藏！)
JS-DOM BOM学习导读算是慢悠悠地过了一遍DOM BOM吧，只能算了解，还挺有意思的，之后在学习项目的时候，自己动动手应该就可以更加深入的理解和使用了吧！下面是写的博客汇总，算是一个目录吧！可以用来自己复习，也推荐给大家，条理清晰！[JS-DOM BOM学习笔记]Web APIs那些儿事儿[JS-DOM BOM学习笔记]DOM那些儿事儿[JS-DOM BOM学习笔记]DOM那些儿事儿2[JS-DOM BOM学习笔记]DOM那些儿事儿3[JS-DOM BOM学习笔记]DOM重点核心(123原创 2021-06-25 17:08:56 · 208 阅读 · 1 评论 -
[JS-DOM BOM学习笔记]本地存储导读
本地存储导读写在前面本地存储window.sessionStoragewindow.localStorage案例：记住用户名写在前面能够写出sessionStorage数据的存储以及获取能够写出localStorage数据的存储以及获取能够说出它们两者的区别本地存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复炸，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。本地存储特性1.数据存储在用户浏览器中2.设置，读取方便，甚至页原创 2021-06-22 10:52:07 · 119 阅读 · 0 评论 -
[JS-DOM BOM学习笔记]移动端网页特效导读
移动端网页特效导读触屏事件触屏事件概述触摸事件对象(TouchEvent)移动端拖动元素移动端常见特效移动端轮播图返回顶部click延时解决方案移动端常用开发插件什么是插件插件的使用移动端常用开发框架导读能够写出移动端触屏事件能够写出常见得移动端特效能够使用移动端开发插件开发移动端特效能够使用移动端开发框架开发移动端特效触屏事件触屏事件概述移动端浏览器兼容性好，我们补需要考虑以前JS得兼容性问题，可以放心得使用原生JS书写效果，但是移动端也有自己独特得地方，比如触屏事件touch(也称触原创 2021-06-21 16:51:37 · 184 阅读 · 0 评论 -
[JS-DOM BOM学习笔记]带有动画的返回顶部
案例：返回顶部案例分析滚动窗口至文档中的特定位置window.scroll(x,y)案例分析这次是接上篇文章的！元素offset，client，scroll系列与动画函数封装1.带有动画的返回顶部2.此时可以继续使用我们封装的动画函数3.只需要把所有的left相关的值 改为 跟页面垂直滚动距离相关就可以了4.页面滚动了多少，可以通过window.pageYOffset得到5.最后是页面滚动，使用window.scroll(x,y)<!DOCTYPE html><原创 2021-06-11 16:04:59 · 131 阅读 · 1 评论 -
[JS-DOM BOM学习笔记]网页轮播图(已完结)
网页轮播图功能需求：案例分析轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求：1.鼠标经过轮播图模块。左右按钮显示，离开隐藏左右按钮。2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。3.图片播放的同时，下面小圆圈模块跟随一起变化。4.点击小圆圈，可以播放相应图片。5.鼠标不经过轮播图，轮播图也会自动播放图片。6.鼠标经过，轮播图模块，自动播放停止。案例分析1.因为js较多，我们单独新建js文件夹，再新建js文件，引入页面中2.此时需要添加load事件3.原创 2021-06-10 11:03:20 · 345 阅读 · 2 评论 -
[JS-DOM BOM学习笔记]元素offset，client，scroll系列与动画函数封装
PC端网页特效目标元素偏移量offset系列offset与style区别案例：获取鼠标在盒子内的坐标案例：模态框拖拽案例：仿京东放大镜效果页面元素可视区client系列匀速滚动scroll系列动画函数封装常见网页特效案例目标能够说出常见offset系列属性的作用能够说出常见client系列属性的作用能够说出常见scroll系列属性的作用能够封装简单动画函数能够写出网页轮播图案例元素偏移量offset系列offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的原创 2021-06-09 10:14:59 · 224 阅读 · 0 评论 -
[JS-DOM BOM学习笔记]BOM那些儿事儿2
BOM那些儿事儿JS执行队列JS是单线程同步和异步同步异步JS执行机制loacation对象URL五秒钟之后跳转页面案例location对象的方法navigator对象history对象JS执行队列JS是单线程JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致—JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。单原创 2021-06-01 10:13:02 · 179 阅读 · 1 评论 -
[JS-DOM BOM学习笔记]BOM那些儿事儿
BOM那些事儿学习要求BOM概述什么是BOM？BOM的构成window对象的常见事件窗口加载事件`window.onload``window.DOMContentLoaded`调整窗口大小事件定时器JS执行机制location对象navigator对象history对象学习要求能够说出什么是BOM能够知道浏览器的顶级对象window能够写出页面加载事件以及注意事项能够写出梁总定时器函数并说出区别能够说出JS执行机制能够使用location对象完成页面之间的跳转能够知晓navigator对象原创 2021-05-31 20:05:07 · 158 阅读 · 0 评论 -
[JS-DOM BOM学习笔记]DOM事件高级导读
DOM事件高级导读目标汇总注册事件(绑定事件)传统注册方式方法监听注册方式addEventListener事件监听方式`evenTarget.addEvenListener(type，listener，useCapture)`样例代码删除事件(解绑事件)传统注册方式`eventTarget.οnclick=null；`方法监听注册方式`eventTarget.removeEventListener(type，listener，useCapture)；`样例代码DOM事件流捕获阶段样例代码事件对象阻止事件冒泡原创 2021-05-27 20:15:05 · 277 阅读 · 0 评论 -
[JS-DOM BOM学习笔记]DOM重点核心(123总结)
DOM重点核心简单回顾前面的知识元素操作创建增删改查属性操作事件操作简单回顾前面的知识文档对象模型(DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式1.对于JavaScript，为了能够使JavaScript操作HTML，JavaScript救有了一桃自己的dom编程接口2.对于HTML，dom使得html形成一颗dom树，包含文档，元素，节点3.我们获取过来的DOM元素是一原创 2021-05-27 09:04:34 · 149 阅读 · 0 评论 -
[JS-DOM BOM学习笔记]DOM那些儿事儿3
[JS-DOM BOM学习笔记]DOM那些儿事儿节点操作创建节点添加节点1.`node.appendChild(child)`2.`node.insertBefore(child,指定元素)`创建节点添加节点代码案例删除节点复制节点(克隆节点)三种动态创建元素区别节点操作创建节点document.createElement('tagName')方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。添加节点1.node.a原创 2021-05-18 17:11:39 · 117 阅读 · 0 评论 -
[JS-DOM BOM学习笔记]DOM那些儿事儿2
DOM那些儿事儿操作元素H5自定义属性1.设置H5自定义属性2.获取H5自定义属性节点操作为什么学节点操作1.利用DOM提供的方法获取元素2.利用节点层级关系获取元素节点概述节点层级父级节点子节点1.parentNode.childNodes2.parentNode.children兄弟节点这次接着1的故事学习操作元素H5自定义属性自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute(‘属性’)获取。但是有些自定义属性很原创 2021-05-14 10:26:56 · 167 阅读 · 0 评论 -
[JS-DOM BOM学习笔记]DOM那些儿事儿
DOM那些儿事儿DOM简介DOM树获取元素根据ID获取根据标签名获取H5新增获取元素方式获取特殊元素(body，html)事件基础常见的鼠标事件操作元素改变元素内容innerText和innerHTML的区别常用元素的属性操作表单元素的属性操作样式属性操作使用className修改样式属性案例仿京东显示隐藏密码明文案例仿淘宝关闭二维码案例循环精灵图显示隐藏文本框内容密码框验证信息DOM简介文档对象模型，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的D原创 2021-04-23 18:56:42 · 381 阅读 · 0 评论 -
[JS-DOM BOM学习笔记]Web APIs那些儿事儿
Web APIs那些儿事儿Web APIs和JS基础关联性JS的组成API和Web API什么是API？Web APIWeb APIs和JS基础关联性JS的组成JavaScript语法DOM页面文档对象模型BOM浏览器对象模型Web APIs阶段，我们主要学习页面交互功能API和Web API什么是API？API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。、简单理解：API是给程序员提供的一种工原创 2021-04-23 15:15:15 · 168 阅读 · 0 评论