js基本操作

Posted 2023-02-16 @红茶不加糖

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基本操作的主要内容，如果未能解决你的问题，请参考以下文章