2021-10-09

最新推荐文章于 2024-08-14 15:45:18 发布

weixin_48080076

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量44

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_48080076/article/details/120663488

版权

本文详细介绍了JavaScript的基础知识，包括与HTML结合的方式、变量定义、运算操作、数组、函数、自定义对象以及DOM操作。特别强调了事件处理，如onload、onclick等，并讲解了节点的常用属性和方法，如appendChild、innerHTML等。此外，还提供了实例代码展示如何动态注册事件和操作DOM元素。

摘要由CSDN通过智能技术生成

javascript笔记

1.js与html代码结合方式

（1）在head 标签中，或者在body 标签中，使用script 标签来书写JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
		alert("hello javaScript!");
	</script>
</head>
<body>
</body>
</html>

（2）使用script 标签引入单独的JavaScript 代码文件

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript" src="路径名"></script>
</head>
<body>
</body>
</html>

2.变量

（1）变量类型：数值类型（number），字符串类型（string），对象类型（object），布尔类型（boolean），函数类型（function）
定义变量：var 变量名；var 变量名 = 值；
（2）特殊值：underfined(js变量未定义、未赋初值时），null(空值），NAN(not a number)

3.运算

（1）关系运算特殊情况
等于：== 简单字面值比较
全等于：=== 字面值的比较+数据类型比较
（2）逻辑运算：与或非（&& 、|| 、！）
（3）布尔运算
所有的变量，都可以作为一个boolean类型的变量去使用，其中0，null，undefined，’’’’ 都认为是false。

4.数组

定义格式：

var 数组名= []; // 空数组
var 数组名= [1 , ’abc’ , true]; // 定义数组同时赋值元素

5.函数

（1）使用function 关键字

function 函数名(形参列表){
	函数体
}

（2）

var 函数名= function(形参列表) { 函数体}

注：在JS 中函数的重载会直接覆盖掉上一次的定义

6.自定义对象

(1)Object 形式的自定义对象
对象的定义：

var 变量名= new Object(); // 对象实例（空对象）
变量名.属性名= 值; // 定义一个属性
变量名.函数名= function(){} // 定义一个函数

(2){}花括号形式的自定义对象
对象的定义：

var 变量名= { // 空对象
	属性名：值, // 定义一个属性
	属性名：值, // 定义一个属性
	函数名：function(){} // 定义一个函数
};

对象的访问：

变量名.属性
函数名();

7.Document 对象中的方法介绍

document.getElementById(elementId)
通过标签的id 属性查找标签dom 对象，elementId 是标签的id 属性值
document.getElementsByName(elementName)
通过标签的name 属性查找标签dom 对象，elementName 标签的name 属性值
document.getElementsByTagName(tagname)
通过标签名查找标签dom 对象。tagname 是标签名
document.createElement(tagName)
方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名
以上三个查询方法，一定要在页面加载完成之后执行，才能查询到标签对象。

8.事件

8.1常用的事件

onload 加载完成事件：页面加载完成之后，常用于做页面js 代码初始化操作
onclick 单击事件：常用于按钮的点击响应操作。
onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

8.2事件的注册

（1）静态注册：通过html 标签的事件属性直接赋于事件响应后的代码
（2）动态注册事件：是指先通过js 代码得到标签的dom 对象，然后再通过dom 对象.事件名= function(){}。
动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名= fucntion(){}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
		function onclickFun() {
			alert("静态注册onclick 事件");
		}
		window.onload = function () {
			var btnObj = document.getElementById("btn01");
			btnObj.onclick = function () {
				alert("动态注册的onclick 事件");
			}
		}
	</script>
</head>
<body>
<button onclick="onclickFun();">按钮1</button>
<button id="btn01">按钮2</button>
</body>
</html>

9.节点的常用属性和方法

9.1方法

通过具体的元素节点调用getElementsByTagName()方法，获取当前节点的指定标签名孩子节点

appendChild(ChildNode )
方法，可以添加一个子节点，ChildNode 是要添加的孩子节点

9.2属性

childNodes
属性，获取当前节点的所有子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className
用于获取或设置标签的class 属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容
innerText
属性，表示获取/设置起始标签和结束标签中的文本
使用举例：

document.getElementById("phone").firstChild.innerHTML
document.getElementById("city").childNodes.length

weixin_48080076

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-10-09

javascript笔记1.js与html代码结合方式（1）在head 标签中，或者在body 标签中，使用script 标签来书写JavaScript 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> alert("hel
复制链接

扫一扫