发表于： 2018-07-27 18:20:27

15 538

今日完成内容

完成task14-15

1.轮播图

轮播图尝试使用了纯CSS方法，使用了animation，可以做到图片或者内容连续往返运动，但是距离bs4的轮播图差距很大，没有左右按钮的，这个问题在学习JS之后一定回来完成

2.footer

footer 分为两部分一部分是链接，另外一部分是copyright，比较简单

3.card

将home页上的学员卡片和广告卡片都做成了card组件，模仿的是BS4的card

4.breadcrumb面包屑

也是模拟bs4的内容，此任务也发现原来的面包屑原来做的有问题，是当前页面可点击，首页不可点击这个问题已经改正

5.职位部分

职位部分做个个组件分为了nav，title，和body三部分，其中body的部分也使用了自己做的card组件组合而成

6.推荐页面

推荐页面主要是aside_nav应该是可以点击不同的链接右边content会显示不同的内容这个问题研究了发现还是需要JS解决，学习JS以后回来完成他

7全部LESS重新编写

这个部分其实理解有些问题，既然上个任务已经将CSS结构化了做了页面自己的样式库，那么less文件里的变量化的css取值是不是还有用，还是将CSS样式库也做成LESS

今日学习内容，因为服务器连接不上所有对这几天JS的学习内容做了总结

JS基础

statement之间“;”间隔，养成良好习惯

"//" 注释提高代码可读性

var variable = data 变量严格var声明

data类型,字符串，数值，布尔值，转义字符

数组variable = Array（data,data）或 variable = [data,data,...]

对象variable = Object(propertyName:value,propertyName:value) 或 variable = {propertyName:value,propertyName:value}

操作符 +,-,*,/,++,+=,%

JS语法

条件语句

if (condition){statement;} else if (condition) {statement} else{statement}

条件condition：比较：>,<,>=,<=,!==,===,逻辑操作符：&&与,||或

循环语句

while循环:initial condition;while(condition){statement; increment}

do while循环: initial condition;do {statement increment} while(condition)

for循环 for (initial condition; test condition; increment/alter condition

函数

function nameName(parameter){condition}

全局变量：函数外定义变量，局部变量，函数内定义变量

对象

对象Object，对象的属性：object.property 对象的方法object.method()

var 实例 = new 对象

DOM

D：document，从网页文件转化而来的文档对象

O：object，对象

M：Model,HTML树状模型

节点node，DOM中HTML树状模型的节点

元素节点：element node，HTML中的标签元素
文本节点：text node，HTML元素的文本内容
属性节点：attribute node，HTML元素的属性与属性值

元素的属性和内容是元素节点的子节点；元素的文本节点是该元素的第一个子节点

CSS：HTML元素的的层叠样式表，树状结构继承特性

标识元素属性

Class，类标识符，标识某一类多个元素
ID，独立标识符，标识某一个特定元素

获取元素

DOM方法

Tagname: document.getElementsByTagName("tagname")得到一个数组包含对象即使只有一个对象，也会返回数组
class: document.getElementsByClass("class")；得到一个数组包含对象即使只有一个对象，也会返回数组
ID: document.getElementById("Id")；得到一个对象

元素节点的属性和方法

elementObject.getAttribute("attributeName") elementObject.setAttribute("attributeName",value) elementObject.childNodes：获取当前节点的所有子节点，返回数组 elementObject.firstChild/lastChild:获取当前节点的第一个或最后一个节点 elementObject.nodeType:获取当前节点的类型元素节点1属性节点2文本节点3 elementObject.nodeValue：获取当前节点的内容