02.JavaScript

最新推荐文章于 2024-07-28 20:27:10 发布

阿支<－biubiu－⊂(`ω´∩)

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量53

点赞数

分类专栏： Java Web 文章标签： javascript

原文链接：https://blog.csdn.net/m0_56644341/article/details/116943828

版权

Java Web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

02.JavaScript

一、简介

JavaScript是一门若类型的运行在浏览器端的脚本语言
JavaScript主要用来实现页面中的动态效果

二、基本语法

1.变量

在JavaScript中，使用var关键字声明一个变量，在使用变量的过程中可以给它赋任意值

var a;	a=123;	a="hello";	a='world';	a=对象;

2.函数

在JavaScript中，使用function关键字声明一个函数，在声明函数时不需要指定参数的类型和返回值的类型

//方式一：
function fun(a,b){
	return a + b;
}
//方式二：
var fun2 = function(a,b,c){
	return a + b + c;
}

调用函数：函数名/函数的引用+(参数列表)

//调用通过方式一创建的函数
var result = fun(1,2);
alert(result);
//调用通过方式二创建的函数
var result2 = fun2(1,2,3);
alert(result2);

在JavaScript中，一切皆对象

三、事件

常用的事件
- 单击事件：onclick
- 获取焦点的事件：onfocus
- 失去焦点的事件：onblur
- 内容改变的事件：onchange

函数执行的时机

手动调用函数
将函数绑定到某个事件上，触发事件自动执行函数

//声明一个函数：函数不会自动执行
function fun(){
    //函数体
}
//将函数绑定到按钮的单击事件上：函数也不会执行
btnEle.onclick = fun;//赋给单击事件属性的是函数整体，并不是函数的执行结果
//只有当我们单击按钮的时候才会执行函数体中的内容

四、嵌入方式

1）写在标签的事件属性中：结构与行为相耦合，不建议使用

<button id="btnId" onclick="alert('Hello JS')">SayHello</button>

2）写在script标签中，script标签放在head标签中

需要使用window.οnlοad=function(){}，否则无法获取元素对象

<head>
<meta charset="UTF-8">
<title>load04</title>
<!--4.使用window.onload完美解决问题-->
<script type="text/javascript">
	window.onload = function () {
		//获取按钮对象
		var btnEle = document.getElementById("btnId");
		alert(btnEle);
		//给按钮对象绑定单击事件
		btnEle.onclick = function () {
			//弹出提示框
			alert("Hello JS");
		};
	};
</script>
</head>

3）写在script标签中，script标签放在body标签后面

<body>
	<button id="btnId">SayHello</button>
</body>
<!--3.将JS代码写在script标签中，script标签放在body标签后面：不符合我们的习惯-->
<script type="text/javascript">
	//获取按钮对象
	var btnEle = document.getElementById("btnId");
	alert(btnEle);
	//给按钮对象绑定单击事件
	btnEle.onclick = function () {
		//弹出提示框
		alert("Hello JS");
	};
</script>

4）引入外部的js文件

<script src="script.js"></script>

五、DOM

DOM全称：Document Object Model，文档对象模型。是W3C发布的一个标准，用来对HTML页面中的内容进行增删改查的操作
DOM中的核心方法：
- document.getElementById(“id属性值”)
  - 根据id属性值获取唯一一个元素节点对象
- document.getElementsByTagName(“标签名”)
  - 根据标签名获取一个元素节点数组
- document.getElementsByName(“name属性值”)
  - 根据name属性值获取一个元素节点数组
DOM中的核心属性
- innerText
  - 获取或设置成对出现的标签中的文本内容
    - 获取
      - DOM对象.innerText
    - 设置
      - DOM对象.innerText = “新值”
- innerHTML
  - 该属性与innerText的唯一区别就是该属性可以解析HTML标签
获取或设置DOM对象的属性值
- 获取
  - DOM对象.属性名
- 设置
  - DOM对象.属性名 = “新值”

阿支<－biubiu－⊂(`ω´∩)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02.JavaScript

02.JavaScript一、简介JavaScript是一门若类型的运行在浏览器端的脚本语言JavaScript主要用来实现页面中的动态效果二、基本语法1.变量在JavaScript中，使用var关键字声明一个变量，在使用变量的过程中可以给它赋任意值var a; a=123; a="hello"; a='world'; a=对象;2.函数在JavaScript中，使用function关键字声明一个函数，在声明函数时不需要指定参数的类型和返回值的类型//方式一：functi
复制链接

扫一扫

专栏目录