【javascript系列】史上最全javascript系列教程(一)

简介: 【javascript系列】史上最全javascript系列教程(一)

image.png

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


image.png实现效果:鼠标移入空白方块变红,移出红色变成白色。


获取到标签元素并进行操作

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文件夹引入。引入方式为


image.png


image.png

image.png效果:

image.pngimage.png

相关文章
|
4月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
154 19
|
7月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5819 24
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
1037 4
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
447 0
|
11月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
315 2
2024年5月node.js安装(winmac系统)保姆级教程
|
12月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
250 4
|
12月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
145 0
|
JavaScript NoSQL 前端开发
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
1155 3
|
JavaScript
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
486 0