发表于： 2018-06-21 20:47:03
1 633
昨日完成：
理解了师兄写的轮播图博客，完成了轮播图制作。
学习《Head First JavaScript》
学习及练习W3C相关demo
明日计划：
学习获取不同随机数的方法
出现的问题：
1.在学习操作dom时，出现了问题。问题如下：
（1）如需向 HTML 元素分配 事件，可以使用事件属性。
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">点击这里</button>
在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。
（2）使用 HTML DOM 来分配事件
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
向 button 元素分配 onclick 事件：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。
当按钮被点击时，会执行该函数。
上面两种方式可以操作dom，但是在我写入自己的js文件时，第一种方法是Ok的，第二种方法无论我把它写入js文件还是使用内联js，都失效。。。。。。（担心自己写错未发现）--当我把w3c的关于dom的代码复制过去时，第二种方法仍然失效。出来直接向元素分配onclick事件，不能给它分配事件。
当日收获：
1.dom基本概念
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。
2.节点概念
DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
1.Document：整个文档树的顶层节点
2.DocumentType：doctype标签（比如<!DOCTYPE html>）
3.Element：网页的各种HTML标签（比如<body>、<a>等）
4.Attribute：网页元素的属性（比如class="right"）
5.Text：标签之间或标签包含的文本
6.Comment：注释
7.DocumentFragment：文档的片段
浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。
3.节点树
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。
浏览器原生提供document节点，代表整个文档。
document// 整个文档树
文档的第一层只有一个节点，就是 HTML 网页的第一个标签<html>，它构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。
除了根节点，其他节点都有三种层级关系。
父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点
DOM 提供操作接口，用来获取这三种关系的节点。比如，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。
任务十一总结：
使用less或sass重新写任务4登录页，任务十一主要是初步了解css编译语言。
Less和sass如何使用：
sass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。
Less与Sass处理机制不一样
前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点
关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
选用sass理由
1.Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation。
2.Sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护。
3.同时还有Scss对sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
4.bootstrap（Web框架）最新推出的版本4，使用的就是Sass。
任务十二总结：
任务十二要求使用sass或者less重写任务五六护工页。
Sass的写法规则总结，实用易懂。--参考资料来自阮一峰博客
- 变量
$blue:#fff;
Div{
Color:$blue;
}
变量嵌在字符串中，必须写在#{}中
$side:left;
.rounded{
Border-#{$side}-radius:5px;
}
2.计算
Body{
Margin:(14px/2);
Right:$var * 10%;
}
3,嵌套
选择器嵌套
Div{
H1{
Color:$blue;
}
}
属性嵌套 属性后带冒号
P{
Border:{
Color:$red;
}
}
嵌套的代码块内，可以使用&引用父元素，比如a:hover伪类，可以写成
A{
&:hover{
Color:$blue;
}
}
- 继承
.class1{
Border:1px solid #fff;
}
Class2要继承class1，就要使用@extend命令
.class2{
@extend .class1;
Font-size:120%;
}
- 混合宏 可以重用的代码块
使用@mixin 定义一个代码块
@mixin left{
Float:left;
Margin-left:10px;
}
使用@include命令可以调用@miixn
Div{
@include left;
}
任务十三总结：
任务十三使用less或者Sass重构任务七移动端页面，需要提取出来公共样式。
任务七的公共样式不多，而且颜色非常杂乱，不利于写成代码块复用。在重构任务七过程中，在原本的布局基础上，添加了侧边栏。侧边栏的制作主要是利用input的CheckBox结合checked时侧边栏的显隐来做。
任务七重点，不使用bootstrap后，很多居中效果都用flex布局来做，对flex布局更加了解。
任务十三开始，学习默认样式重置。默认样式重置分为全部重置和部分重置，一般按需求来进行选择。
每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。由于不同浏览器甚至同一浏览器不同版本的默认样式是不同的，所以，为了解决出现的兼容问题，我们需要重置浏览器默认样式。
重置方法
a、最简单的办法：（不推荐使用）*{margin: 0;padding: 0;}。
b、使用CSSReset可以将所有浏览器默认样式设置成一样。
c、normalize：也许有些cssreset过于简单粗暴，有点伤及无辜，normalize是另一个选择。
返回列表
评论