摘要: DOM事件流与事件对象 1. DOM事件流 事件流描述的是从页面中接收事件的基础。事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即是DOM事件流。 举个例子,下面是给一个div注册了点击事件后,事件传播的过程。 DOM事件流分为三个阶段: 捕获阶段 当前目标阶段 冒泡阶段 事件捕获:由D 阅读全文
posted @ 2020-11-23 15:20 chiYiN-zZZ 阅读(219) 评论(0) 推荐(0) 编辑
摘要: DOM事件 1. 执行事件的步骤 获取事件源 注册事件(绑定事件) 添加事件处理程序(采取函数赋值形式) 2. 注册事件(绑定事件) 2.1 注册事件概述 注册事件是指给元素添加事件。注册事件有两种方式,分别为传统方式和方法监听注册方式。 2.2 传统注册方式 // 1. <button oncli 阅读全文
posted @ 2020-11-23 15:15 chiYiN-zZZ 阅读(191) 评论(0) 推荐(0) 编辑
摘要: DOM操作元素 js的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性 1. 改变元素内容 element.innerText 从起始位置到终止位置的内容,但它去除HTML标签,同时空格和换行也会去掉(非标准) element.inne 阅读全文
posted @ 2020-11-23 15:10 chiYiN-zZZ 阅读(190) 评论(0) 推荐(0) 编辑
摘要: DOM节点操作 1. 节点概述 节点的三个基本属性: 节点类型nodeType 节点名称nodeName 节点值nodeValue 元素节点 nodeType为1(实际开发中的主要操作) 属性节点 nodeType为2 文本节点 nodeType为3(文本节点包含文字、空格、换行等) 2. 节点层级 阅读全文
posted @ 2020-11-07 16:45 chiYiN-zZZ 阅读(215) 评论(0) 推荐(0) 编辑
摘要: DOM获取元素 1. 如何获取页面元素 DOM在实际开发中主要用来操作元素。获取页面中的元素可以使用以下几种方式: 根据ID获取 根据标签名获取 通过HTML5新增的方法获取(推荐) 特殊元素获取 2. 根据ID获取 使用getElementById()方法可以获取戴有ID的元素对象。(古老方法不太 阅读全文
posted @ 2020-10-30 19:17 chiYiN-zZZ 阅读(234) 评论(0) 推荐(1) 编辑
摘要: js的对象 1. new关键字 // 构造函数的语法格式 function 构造函数名() { // 构造函数名字首字母要大写(规范) this.属性 = 值; this.方法 = function() {} } new 构造函数名(); // 例子 function Star(uname, age 阅读全文
posted @ 2020-10-22 16:46 chiYiN-zZZ 阅读(221) 评论(0) 推荐(0) 编辑
摘要: js变量与简单数据类型 js有三种书写位置,分别为行内、内嵌和外部。实际开发中大多使用外部。 <script src="helloWorld.js"></script> 注: 使用外部js文件有利于HTML页面代码结构化,方便文件级别的复用 引用外部js文件的script标签中间不可以写代码 使用外 阅读全文
posted @ 2020-10-21 14:12 chiYiN-zZZ 阅读(222) 评论(0) 推荐(0) 编辑
摘要: js数据类型转换与字面量 1. 转换为字符串 方式 说明 例子 toString() 转成字符串 var num=1;alert(num.toString()) String()强制转换 转成字符串 var num=1;alert(String(num)) 加号拼接字符串 和字符串拼接的结果都是字符 阅读全文
posted @ 2020-10-18 15:19 chiYiN-zZZ 阅读(289) 评论(0) 推荐(0) 编辑
摘要: CSS精灵图与字体图标 1. 精灵图 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的 阅读全文
posted @ 2020-10-14 19:46 chiYiN-zZZ 阅读(274) 评论(0) 推荐(1) 编辑
摘要: CSS元素的显示与隐藏 我们访问某些网站的时候,经常可以看到一些广告弹出来,点击关闭就不见了,但是重新刷新页面后,广告又会重新弹出来。这就是元素的显示和隐藏的一个应用。 1. display属性 display属性用于设置一个元素应如何显示。 display: none; 隐藏对象 display: 阅读全文
posted @ 2020-08-19 13:20 chiYiN-zZZ 阅读(393) 评论(0) 推荐(0) 编辑