13事件
事件类型 依赖于设备的输入事件：键盘事件和鼠标事件，这些事件都是直接和设备相关的。 独立于设备的输入事件：例如cick事件等，这些事件并没有直接与设备相关 用户界面的相关事件：用户界面事件属于较高级的事件，一般多用于表单中的组件。状 变化的相关事件：这些事件与用户行为无关，而是由网络或浏览器触发的。 特定API事件：这些事件多用于特定场景的实现，例如 HTML5中提供的拖放API中的事件等 与错误处理的相关事件 注册事件 注册事件指：就是将 Javascript函数与指定的事件相关联。 句柄：被绑定的函数成为该事件的句柄。 通过事件属性 123456<button id="btn1" onclick="fn()">按钮</button><script> function fn() { console.log('你终于点击了我') }</script> DOM中相关对象提供的事件属性 123456 ...
12样式操作
获取内联样式 1<p id="p1" style="color: red;">666</p> 内联样式即写在标签里的样式（返回文本类型） 12var pElement = document.getElementById('p1').getAttribute('style')console.log(pElement) 通过DOM对象获取。（返回对象） 12var pElement = document.getElementById('p1')console.log(pElement.style) 对象的方法如下： cssText 声明块的文本内容 length 属性数量 item() 属性名 getPropertyValue() 属性值 获取外联样式 12var stylesheetList = document.styleSheetsconsole.log(stylesheetList) 其中CSSRule对象包含一组css规则 ...
11Element对象
什么是Element对象 DOM的标准规范中提供了 Elementi对象，该对象提供了HTML页面中所有元素所具有的属性和方法。 DOM标准规范中提供了Node对象，主要是依靠DOM节点树结构访问和更新HTML页面的内容。 而DOM标准规范中提供了 Element对象，主要是依靠DOM元素树结构访问和更新HTML页面的内容。 定位元素 1234567<div class='container'> <div></div> <div></div> <div></div> <div></div> <div></div></div> getElementsByTagName 123var container = document.getElementsByClassName("container")[0]var elements = container.getElements ...
模仿一个在线表格
案例描述 展示地址：https://antmoe.gitee.io/project/2020/04/19/index.html 实现过程 首先实现出一个静态效果（无js交互），当然了 这些表格我们是需要用js动态生成的。那么我们先来用JavaScript生成出一个静态表格 css样式 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859* { box-sizing: border-box;}body { margin: 0;}.tools { width: 100%; height: 30px; background-color: #efefef; margin-bottom: 20px;}table { width: 2889px; table-layout: fixed; border-co ...
左右移动元素及省市联动案例
案例描述 两个案例，分为左右移动元素与省市联动。如图所示 左右移动元素 左右移动案例很简单，思路大致如下： 获取当前点击的元素 移动元素 单个 将一个元素标签移动到右边 全部 将全部元素移动到右侧 在线演示：https://antmoe.gitee.io/project/2020/04/18/index.html 我们的html结构如下： 123456789101112131415161718192021222324<div class="container"> <select id="first" size="5" multiple> <option>Argentina</option> <option>Brazil</option> <option>Canada</option> <option>Chile</opti ...
模仿京东购物车实现加减操作
案例描述 如图所示，通过点击加号或者减号按钮会自动计算小计的价格。逻辑非常简单。 在线展示：https://antmoe.gitee.io/project/2020/04/18/shop.html 实现过程 逻辑非常简单，获取值计算即可。 为两个按钮分别绑定事件 改变值 返回 代码实现 加号与减号逻辑几乎一样，以加号示例。 首先我们得HTML结构为 12345678910111213141516171819202122232425262728293031323334353637383940414243444546<table id="cart"> <tr> <th><input type="checkbox" name="" id="checkall"> 全选</th> <th>商品</th> <th>单价</th> <t ...
拖动图片改变位置
案例描述 点击图片可以复制图片 鼠标移动过程中，会有图片跟随 再次点击图片，图片固定位置。 在线展示：https://antmoe.gitee.io/project/2020/04/14/index.html 实现过程 通过过程我们可以分析出，需要三个事件进行绑定即 点击事件 点击后创建（复制）一个新的图片 鼠标跟随 图片跟随鼠标移动而移动 停止 即鼠标再次点击图片固定在当前位置。 代码实现 首先式 html 结构，这个非常简单，无非是一张图片在变动下位置即可。 1234567891011121314151617181920212223242526<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" / ...
10Node对象
判断节点类型 节点类型 nodeName nodeType nodeValue Document文档节点 #document 9 null Element元素节点 元素节点的元素名 1 null Attr属性节点 属性节点的属性名 2 属性节点的属性值 Text文本节点 #text 3 文本节点的内容 获取父节点 获取父节点包括两个分别为 获取父节点：parenNode 获取指定节点的父节点，其父节点不一定是元素节点。 获取父节点元素：parentElement 获取指定节点的父元素节点，其父节点必须是元素节点。 通常情况下parentNode ≈ parentElement，但是特殊情况是<html>元素的父节点是document对象 获取子节点 firstChild 获取指定节点的第一个子节点 lastChild 获取指定节点的最后一个子节点 childNodes 获取所有的子节点，返回一个NodeList集合，但此集合为动态集合 12345var childNodes = parentElement.chi ...
09Document对象
什么是Document对象 document对象在DOM中代表了HTML页面 document也是DOM解析HTML页面的入口。 定位页面元素 定位页面元素常用的方法： 方法名 参数传入 作用 返回类型 示例 getElementById() ID名 通过页面元素的id属性值定位元素 单个节点，既是Node也是Element类型 getElementById('p1') getElementsByName() name 通过页面元素的name属性值定位元素 NodeList getElementsByName("pElement") getElementsByClassName() class 通过页面元素的class属性定位元素 HTMLCollection getElementsByClassName("pElements") getElementsByTagName() 元素名 通过元素的元素名定位元素 HTMLCollection getElementsByTagName("p" ...
08DOM相关概念叙述
何处使用script标签 <head>标签里 需要注意的是：浏览器是自上到下解析的。因此，如果涉及到包含获取页面元素的内容, 导致失败。解决方案如下： 123456<script> // 表示HTML页面加载完毕后, 做什么 window.onload = function () { // 所有的javascript代码编写在这里 }</script> 写在<body>元素的最下方 1234<body> <!-- 将<script>元素放置在相关HTML元素的后面, 或者<body>元素内的最后 --> <script></script></body> 什么是DOM DOM是个缩写，全称是 Document Object Model，被译为文档对象模型。 D表示Document，就是DOM将HTML页面解析为一个文档。同时提供了document对象。 O表示Object，就是DOM将HTML页面 ...
