随笔分类 - Web API [DOM]
摘要：##节点操作——创建和添加节点（document.createElement('tagName')、node.appendChild(child)、node.insertBefore(child,指定元素)） document.createElement('tagName')方法创建由 tagNam
阅读全文
摘要：案例：简易版发布留言 案例分析： 1.核心思路；点击按钮之后，就动态创建一个 li ，添加到 ul 里面 2.创建 li 的同时，把文本域里面的值通过 li.innerHTML 赋值给 li 3.如果想要新的留言后面显示就用 appendChild ，如果想要前面显示就用 insertBefore
阅读全文
摘要：案例——新浪下拉菜单 *案例分析： 1.导航栏里面的 li 都要有鼠标经过效果，所有需要循环注册鼠标事件 2.核心原理：当鼠标经过 li 里面的第二个孩子（ul）显示，当鼠标离开，则 ul 隐藏 ==style：== /* 需要将a链接使用鼠标hover事件，如果直接对li，那么li里面的整个ul都
阅读全文
摘要：tab栏切换制作 ==案例分析== 1.Tab栏切换有2个大的模块 2.上的模块选项卡,点击某一个, 当前这一个底色会是红色 ,其余不变(排他思想)修改类名的方式 3.下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。 4.规律:下面的模块显示内容和上面的选项卡一 对应,相匹
阅读全文
摘要：案列：表单全选和取消全选 style： body： script： 结果：勾选表头行的全选按钮时，下列所有选择框都被勾选，取消全选按钮时，下列所有选择框都取消勾选，当表格中的所有勾选框都被勾选时，表头中的全选框被选中，反之，则不被选中
阅读全文
摘要：表格隔行变色效果 style： body： script： 结果：当鼠标经过到第二行时，改行颜色变为粉色，鼠标离开恢复透明色（标题不变色，固定背景颜色为天蓝色）
阅读全文
摘要：案例：百度换肤 点击背景图，页面背景切换成改背景图 style： body： script： 结果：点击四张图中的某张图，页面背景颜色切换成改背景图，默认背景图为第一张
阅读全文
摘要：案例：排他思想 首先排除他人，然后才设置自己的样式，这种排除他人的思想称为排他思想 ==结果：==随机点击某个按钮，按钮背景颜色改变，其他按钮不变，又点击另一个按钮之后，该按钮背景颜色变粉色，之前的变色按钮颜色为空
阅读全文
摘要：自定义属性[获取(getAttribute)、设置(setAttribute)、移除(removeAttribute)] 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据中。 ==注意：==有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性，H5给我
阅读全文
摘要：案例：显示隐藏密码[onclick] 案例分析: 核心思路:点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码,一个按钮两个状态,依次，切换为文本框,继续点击-次切换为密码框 算法:利用一个flag变量,来判断flag的值,如果是1就切换为文本框, flag设置为0 ,如果是0就切换为密码框,
阅读全文
摘要：案例：循环精灵图 [backgroundPosition] 背景图的精灵图样式如下： 每个背景图之间的距离使用标尺测量大约是44，所以在下列代码中才会有（i*44） ==注意== 上述代码中： lis[i].style.backgroundPosition = '0 -' + index + 'px
阅读全文
摘要：案例：二维码显示隐藏[display.block \ display.none] *核心部分都在代码图片上有注释
阅读全文
摘要：密码验证框信息 *注：以下主要是简单的实现密码输入的提示功能
阅读全文
摘要：表单里面的获取焦点[onfocus]和失去焦点 [onblur]——案例：显示隐藏文本框内容 案例分析： 首先表单需要2个新事件，获取焦点onfocus、失去焦点onblur 如果获取焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容 如果失去焦点，判断表单内容是否为空，如果为空，
阅读全文
摘要：[DOM] 操作元素:改变元素内容(element.innerText、element.innerHTML )、样式属性操作(element.style、element.className) 1.改变元素内容 element.innerText从起始位置到终止位置的内容，但它去除html标签，同时空
阅读全文
摘要：[DOM]事件基础：事件三要素、事件执行、常见的鼠标事件 JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的 简单理解：触发——响应机制 页面中的每个元素都可以产生某些可以触发JavaScript的时间，例如，我们可以在用户点击按钮时产生一个时间，然后去执行某些
阅读全文
摘要：[DOM]获取元素：根据ID、标签名、HTML5新增的方法、特殊元素获取 1.根据 ID 获取[.getElementById( )] 注意： 原理上script是要写在标签下面，但是有方法可以解决，将script提到上方 参数 id是大小写敏感的字符串，所以需要加引号，如('time') 返回的是
阅读全文
摘要：DOM DOM树 文档: -个页面就是一一个文档, DOM中使用document表示 元素 :页面中的所有标签都是元素 ,DOM 中使用element表示 节点:网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node表示 DOM把以上内容看做是对象
阅读全文
摘要：Web API Web APIs和JS基础关联性 1.JS基础阶段 我们学习的是ECMAScript标准规定的基本语法 要求同学们掌握JS基础语法 只学习基本语法,做不了常用的网页交互效果 目的是为了JS后面的课程打基础、做铺垫 2.Web APIs阶段 Web APIs是w3C组织的标准 Web
阅读全文
浙公网安备 33010602011771号