js基本操作
Posted @红茶不加糖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js基本操作相关的知识，希望对你有一定的参考价值。
JS-day01
1. 概述
JS的全称是javascript. JS的语法和Java非常类似.
写javascript的时候,就把他当作java来书写,不一样的地方改一改就行了.
JS是一种运行在浏览器的脚本语言。
2. 组成
JS = ECMAScript + BOM + DOM
ECMAScript: JS的基本语法.包含了(定义变量,定义方法,for循环,if判断).
BOM: 浏览器对象模型,是JS提前写好的类/对象,专门用来操作浏览器用的. 类似与java的中API.
DOM: 文档对象模型,是JS提前写好的类/对象,专门用来操作页面的.
3. 引入方式
方式1-行内引入
<标签 事件="javascript:js代码" />
方式2-内部引入
<script>
直接书写js语法即可
</script>
方式3-外部引入
<script src="外部js文件路径"></script>
4. JS基本语法(和Java不一样的)
4.1 定义变量
//java
数据类型 变量名 = 值;
//js
var 变量名 = 值; //ECMAScript5
let 变量名 = 值; //ECMAScript6
const 常量名 = 值; //ECMAScript6
4.2 定义方法
//java
public 返回值类型 方法名(数据类型 变量名){
方法体
return 值;
}
//js
function 方法名(变量名){
方法体
return 值;
}
let 方法名 = function (变量名){
方法体
return 值;
}
注意:
js中,方法名一样,则后定义的方法会覆盖前边定义的方法.
4.3 定义数组
//java
数据类型 数组名 = {元素, 元素....};
//js
let 数组名 = [元素, 元素....];
4.4 输出语句
//java
System.out.println(...);
//js
alert(...); //弹框
let result = confirm(...); //弹框-弹出"确认取消框",确认返回true,取消返回false
console.log(...); //输出到控制台
document.write(...); //输出到页面
5. DOM
5.1 获取标签(元素)
//根据id属性值获取元素对象
let 单个元素 = document.getElementById("id属性值");
//根据元素名称获取元素对象们，返回数组
let 元素数组 = document.getElementsByTagName("元素名称");
//根据class属性值获取元素对象们，返回数组
let 元素数组 = document.getElementsByClassName("class属性值");
//根据name属性值获取元素对象们，返回数组
let 元素数组 = document.getElementsByName("name属性值");
// 获取指定元素的父元素
let 元素 = 指定元素.parentElement;
5.2 增删改操作
// 创建新的元素
let 新元素 = document.createElement("元素标签名");
// 将新元素添加到父元素的内部
父元素.appendChild(新元素);
// 删除父元素中的指定子元素
父元素.removeChild(指定子元素);
// 把父元素中的指定旧子元素替换为新子元素
父元素.replaceChild(新子元素,旧子元素);
注：增删改操作需要获取其父标签才能操作
5.3 操作属性
// 添加属性
元素.setAttribute("属性名","属性值");
// 获取属性
let 属性值 = 元素.getAttribute("属性名");
// 删除属性
元素.removeAttribute("属性名");
// class属性的特有参数
元素.className = "class属性值";
5.4 操作样式
// 添加样式
元素.style.样式名 = "样式值";
// 获取样式
let 样式值 = 元素.style.样式名;
5.5 操作文本
// 添加文本内容，不解析标签
元素.innerText = "文本内容";
// 获取文本内容, 只获取文本不获取标签
let 文本 = 元素.innerText;
// 添加文本内容，解析标签. 比较常用
元素.innerhtml = "文本内容";
// 获取标签体的所有内容,包含标签
let 标签体 = 元素.innerHTML;
6. 事件
6.1 概述
所谓的事件指的就是"一件事".
在JS中, 事件一般代表, “某个标签发生某件事之后,执行执行的操作”, 这个逻辑称之为"事件监听机制".
6.2 语法
写法1
<!-- 当该标签上发生指定的"事件"之后, 会自动执行执行的方法-->
<标签 事件名称="函数名称()" />
写法1
<script>
//获取指定的元素
let 元素 = document.getElementById("元素id");
元素.事件名称 = function(){
//方法体2
}
</script>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件演示</title>
</head>
<body>
<!-- 当按钮1被"单击"时,执行aaa方法-->
<button onclick="aaa()">按钮1</button>
</body>
<script>
function aaa(){
alert("aaa方法执行了");
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件演示</title>
</head>
<body>
<button id="btn">按钮2</button>
</body>
<script>
//获取按钮2
let btn = document.getElementById("btn");
//给按钮2绑定事件,当按钮2被"单击"时,执行后面的匿名方法
btn.onclick = function(){
alert("匿名方法执行了");
}
</script>
</html>
6.3 页面加载事件
//当页面加载完毕后才执行该段代码
window.onload = function (){
//....
}
以上是关于js基本操作的主要内容，如果未能解决你的问题，请参考以下文章