JS到底是什么?
JS的组成
开始第一个JS脚本的编写
获取到标签元素并进行操作
document.getElementById('ID名') 返回这个id名的元素 (常用,id是整个界面唯一的)
document.getElementsByTagName('标签名') 返回所有这个标签名的元素的集合
document.getElementsByClassName('class名') 返回所有这个class的元素的集合
document.querySelector("css任意选择器") 返回第⼀个
document.querySelectorAll("css任意选择器") 返回符合的所有
document.documentElement 获取HTML元素
document.body 获取body元素
JS编写的合适位置
JS的输出
浏览器窗口输出
持续更新中......
JS到底是什么?
JavaScript⼀种直译式脚本语⾔,是⼀种动态类型、弱类型、基于原型的语⾔,内置⽀持类型Javascript是当今最流⾏的脚本语⾔,我们⽣活中看到的⽹⻚和基于html5的app⾥⾯的交互逻辑都是由javascript驱动的⼀句话概括就是javascript是⼀种运⾏在浏览器中的解释型的编程语⾔
JS的组成
ECMAScript : 解释器、翻译者 (描述了该语⾔的语法和基本对象) 它是javascript的标准,就是平时说的es5,es6
DOM : Document Object Model ⽂档对象模型 W3C是DOM的标准
BOM : Browser Object Model 浏览器对象模型 缺乏标准
开始第一个JS脚本的编写
实现效果,鼠标移入div背景颜色变成红色,移出变成白色
第⼀步:我们要知道⿏标移⼊事件和⿏标移出事件
⿏标移⼊事件 onmouseover
⿏标移出事件 onmouseout
第⼆步:我们要找到需要改变的div元素,我们通过id就可以找到我们要改变的div
实现效果:鼠标移入空白方块变红,移出红色变成白色。
获取到标签元素并进行操作
document.getElementById(‘ID名’) 返回这个id名的元素 (常用,id是整个界面唯一的)
document.getElementsByTagName(‘标签名’) 返回所有这个标签名的元素的集合
document.getElementsByClassName(‘class名’) 返回所有这个class的元素的集合
document.querySelector(“css任意选择器”) 返回第⼀个
document.querySelectorAll(“css任意选择器”) 返回符合的所有
document.documentElement 获取HTML元素
document.body 获取body元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取标签元素</title> <style type="text/css"> #tim{ width:200px; height:200px; border: 1px solid black; /* 下面这一行设置居中 */ margin: 0 auto; } </style> </head> <body> <div id="tim" class="xiaod"></div> <script type="text/javascript"> //document.getElemenById('tim').style.background='red' 这里背景变成红色 //document.getElementsByTagName('div')[0].style.background='black' 获取第一个div,背景变成黑色,因为返回的是一个集合,所以加上[0] //document.getElementsByClassName('xiaod')[0].style.background='yellow' 也是加上[0]背景变成黄色 //document.querySelector("#tim").style.background='black' css选择器,返回第一个,背景变成黑色#tim改成.xiaod也可以 //document.querySelector("div")这样也可以,是css的选择器就可以,因为是返回第一个,所以不需要[0] document.querySelectorAll("div")[0].style.background='yellow' </script> </body> </html>
JS编写的合适位置
⼀般情况下JS是写在⻚⾯的任何位置都可以的,需要script标签包着,但是别写在html标签外,
最常⻅的是写在head标签内部和body内部
写在head标签内需要写上window.onload包着,要不然会报错,因为执⾏js时⻚⾯标签还没加载
window.onload的作⽤是当⻚⾯加载完成后⾃动触发事件,⼀个⻚⾯应该只有⼀个window.onload事件,因为如果写多个的话会覆盖只执⾏最后⼀个。
JS的最佳编写位置为body结束标签之前。
JS可以写在单独的.js文件夹引入。引入方式为
效果: