洛可可工作室第二次培训

好家伙,这波是工作室培训

 

 

1.javascript简介

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
如何在页面中使用JavaScript?
通过<script>标签来放入JavaScript
外部JS文件可以通过<link>标签引入,如果位于同一文件夹内,则可以使用<script>标签的src属性进行引入
在页面的body和head中写JS,有什么区别呢?
由于浏览器是按照从上到下的顺序执行代码的,因此当你要在head中写JS时,需要用window.onload进行承载,onload表示在页面加载完毕后,再执行onload所承载的JS代码
在body中,虽然不用写window.onload,但最好写在HTML代码的下面,也就是整个页面的最底部。

 

 

2.JavaScript 关键字

var
var关键字告诉浏览器创建一个新的变量
var x = 2;
除var以外,定义变量的关键字有let,定义常量的关键字有const,但此次培训我们就不讲这两个关键字,之后的深入学习就会学到

 

 

3.DOM操作

我们可以将整个网页视为一个文档,因此当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),简称DOM,

在加载过程中,浏览器会创建一个DOM树,JavaScript可以操作这个DOM树上的任何东西

(杨武的生动比喻:在树上摘我想要的苹果)
如何找到HTML元素?
上面也说过可以将网页视为文档,因此浏览器提供了一个document对象来进行操作

 

 

4.查找 HTML 元素

4.1.通过 id 找到 HTML 元素
-document.getElementById(‘id’);


4.2.通过标签名找到 HTML 元素
-document.getElementsByTagName(‘标签名’),
TagName返回的是一个类数组(集合),因此在使用某个标签时,需要在后面加上中括号[ ]


4.3.通过类名找到 HTML 元素
-document.getElementsByClassName("类名");
getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。

 

 

5.改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
-document.getElementById(id).innerHTML=(新的 HTML

 

 

6.DOM CSS

 

如何通过DOM修改CSS?
-document.getElementById(id).style.property=新样式
-document.getElementById('id1').style.color='red'

 

 

 

 

 

That's all

上一篇:流文件上传和下载


下一篇:【Vue】基础系列(六)列表渲染