本文共 2089 字，大约阅读时间需要 6 分钟。

JS-day01

1. 概述

JS的全称是JavaScript.  JS的语法和Java非常类似.写javascript的时候,就把他当作java来书写,不一样的地方改一改就行了.JS是一种运行在浏览器的脚本语言。

2. 组成

JS = ECMAScript + BOM + DOMECMAScript: JS的基本语法.包含了(定义变量,定义方法,for循环,if判断).BOM: 浏览器对象模型,是JS提前写好的类/对象,专门用来操作浏览器用的. 类似与java的中API. DOM: 文档对象模型,是JS提前写好的类/对象,专门用来操作页面的.

3. 引入方式

方式1-行内引入

   <标签 事件="javascript:js代码" />

方式2-内部引入

方式3-外部引入

4. JS基本语法(和Java不一样的)

4.1 定义变量

//java数据类型 变量名 = 值;//jsvar 变量名 = 值;	//ECMAScript5let 变量名 = 值;	//ECMAScript6const 常量名 = 值;	//ECMAScript6

4.2 定义方法

//javapublic 返回值类型 方法名(数据类型 变量名){
       方法体    return 值;}//jsfunction 方法名(变量名){
       方法体    return 值;}let 方法名 = function (变量名){
       方法体    return 值;}注意:	js中,方法名一样,则后定义的方法会覆盖前边定义的方法.

4.3 定义数组

//java数据类型 数组名 = {
   元素, 元素....};//jslet 数组名 = [元素, 元素....];

4.4 输出语句

//javaSystem.out.println(...);//jsalert(...);   					//弹框let result = confirm(...);		//弹框-弹出"确认取消框",确认返回true,取消返回falseconsole.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

案例

    
           
       按钮1    
           按钮2

6.3 页面加载事件

//当页面加载完毕后才执行该段代码window.onload = function (){
       //....}

转载地址：http://nucrj.baihongyu.com/