1.第一次实训还是有一点点小激动滴~
2.老师上课前发了两个软件包,chrome和sublime text3,因为之前有接触过前端,所以电脑里面已经安装好了这两个软件了。
3.老师讲课速度很快,因为老师打算今天上午讲完html,css和js,因为自己有一些基础所以还算能跟得上,然后一直跟着老师敲代码,记笔记。
接下来进入正题
1.html
上课记的笔记
html是超文本标记,所以很多是标签的用法要去记,这一块要找一些文档看看。
2.css
笔记:
3.javascript
因为到后面时间不太够,所以老师讲的比较快,但是Js应该算是今天的难点和重点,所以加上一些老师PPT里的内容。
1)js基础语法
语句
变量(变量提升)
常量
数据类型
运算符
注释
2)DOM基础
1、DOM定义
DOM是JavaScript操作 页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将 页转为一个JavaScript对象,从而可以用脚本进行各种操作(比如增删内容)。
2、节点
DOM的最小组成单位叫做节点(node)。
HTML 文档中的所有内容都是节点。
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
3、节点树
将 HTML 文档视作树结构。这种结构被称为节点树
获取节点方法
1)getElementById() 返回带有指定 ID 的元素。
2)getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
3)getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
4)getElementsByName() 返回包含指定name的属性值的元素列表
5)querySelector(“#id”) “.p” 、”h1,h2” 方法返回匹配指定 CSS 选择器元素的第一个子元素
6)querySelectorAll() 返回所有匹配元素
4、操作节点
1)createElement() 创建元素节点。
2)appendChild() 把新的子节点添加到指定节点。
3)insertBefore() 在指定的子节点前面插入新的子节点。 element.insertBefore(newNode,oldNode);
4)removeChild() 删除子节点。
5)replaceChild() 替换子节点。
element.replaceChild(newNode,oldNode);
6)createTextNode() 创建文本节点。
5、设置获取节点属性
1)getAttribute() 返回指定的属性值。
2)setAttribute() 把指定属性设置或修改为指定的值。
3)attributes 返回包含当前元素所有属性节点对象
4)attributes[i / “class”] 返回一个属性节点
5)attributes[i / “class”].value 返回一个属性节点值
6)removeAttribute() 移除指定属性节点
7)hasAttribute() 判断是否含有指定的属性
8)dataset.i
文章知识点与官方知识档案匹配,可进一步学习相关知识小程序技能树首页概览3694 人正在系统学习中
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!