java web 03 JavaScript基础

最新推荐文章于 2022-10-09 16:26:58 发布

黄二马

最新推荐文章于 2022-10-09 16:26:58 发布

阅读量1.2k

点赞数 1

分类专栏： java web 文章标签： javascript html js

本文链接：https://blog.csdn.net/xiaoliang98/article/details/109565597

版权

java web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

03 JavaScript基础

添加函数，增加动态效果。

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为

个人理解：JavaScript就是可以写类似java代码在里面，可以创作一些方法。类似内容的输出，与其页面跳转。和进行一些运算。建议写在</body>外，因为可以避免加载问题。

直接在HTML页面中使用<script></script>标签引入，可以写在head中，也可以写在body末尾，可以实现

 <body>
        js的引入方式实验
		<button id="button">实验</button>
        <script>
            button.οnclick=function()
			{
				alert("引入方法一：直接嵌入script标签");
			}
        </script>
 </body>

在html中使用script的src属性引入外部js文件，可实现。

<!doctype html>
<html lang="en">
 <head>
  <title>js引入方式实验</title>
 </head>
 <body>
        js的引入方式实验
		<button id="button">实验</button>
        <script src="index1.js">   
        </script>
 </body>
</html>

index1.js源代码如下：

button.οnclick=function()
{
	alert("JS引入方式2：外部文件导入");
}

事件定义，直接在组件后面的事件中写javascript:js代码，可实现

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>js引入方式实验</title>
 </head>
 <body>
        js的引入方式实验
		<button id="button" οnclick="javascript:alert('js引入的方式3：事件定义')">实验</button>
 </body>
</html>

4).在一个js文件中调用另外一个js 文件，可实现。但不能直接在第一个js文件中写<script src=xx.js></script>,这样写会导致引入js文件失败

<body>
        js的引入方式实验
		<button id="button">实验</button>
		<script src="index1-1.js">
		</script>
 </body>

index1-1.js源代码

document.write("<script src='index1.js'></script>");

index1.js源代码

button.οnclick=function()
{
	alert("JS引入方式2：外部文件导入");
}

JavaScript自定义方法函数属性类对象

方法函数的定义

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

函数体

}

Object形式的自定义对象

对象的定义：

var 变量名 = new Object(); // 对象实例（空对象）

变量名.属性名 = 值; // 定义一个属性

变量名.函数名 = function(){} // 定义一个函数

对象的访问：

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

对象的定义：

var 变量名 = { // 空对象

属性名：值, // 定义一个属性

属性名：值, // 定义一个属性

函数名：function(){} // 定义一个函数

};

对象的访问：

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

属性

弱属性 var 属性名=属性值（可以是值属性：字符串字符数字{整数浮点数 } 引用类型：方法数组对象）

var 后面跟上的属性有提升的效果。前面也能调用。

JS事件，Bom对象，Dom对象

在这里插入图片描述

事件

事件：对某一现象进行描述，抽象出其标志。从而识别被监听。从而可以做出回应。

事件中的几个名词

事件源: 谁触发的事件

事件名: 触发了什么事件

事件监听: 谁管这个事情，谁监视？

事件处理:发⽣了怎么办

例如：

闯红灯 事件源:⻋ ; 事件名: 闯红灯; 监听：摄像头、交警 ; 处理:扣分罚款

单击按钮 事件源:按钮; 事件名: 单击; 监听:窗⼝ ; 处理:执⾏函数

事件类型：鼠标事件，键盘事件，HTML事件

onload：当⻚⾯或图像加载完后⽴即触发

onblur：元素失去焦点元素，那么这个click事件会按照如下顺序传播：

onfocus：元素获得焦点

onclick：⿏标点击某个对象

onchange：⽤户改变域的内容

onmouseover：⿏标移动到某个元素上

onmouseout：⿏标从某个元素上离开

onkeyup：某个键盘的键被松开

onkeydown：某个键盘的键被按下

事件顺序：事件捕获与事件冒泡

捕获：由大到小。

冒泡：由小到大。

在这里插入图片描述

BOM对象（浏览器）

系统对话框：

浏览器通过（实际是window对象的⽅法）alert()、confirm()、prompt()⽅法可以调⽤系统对话框向⽤户显示消息。

打开关闭窗口： window.open() window.close()

时间函数：

setTimeOut（）实现：setTimeout(“hello()”, 3000); 倒计时提醒

setInteval()

history对象

location对象

DOM对象文档对象模型

可以实现页面标签的增删改查。节点树形结构。

在这里插入图片描述

查找

方法	描述
getElementById()	根据id获取dom对象，如果id重复，那么以第⼀个为准
getElementsByTagName()	根据标签名获取dom对象数组
getElementsByClassName()	根据样式名获取dom对象数组
getElementsByName()	根据name属性值获取dom对象数组，常⽤于多选获取值

创建与插入结点

创建：

方法	描述
createElement()	创建⼀个新的节点，需要传⼊节点的标签名称，返回创建的元素对象
createTextNode()	创建⼀个⽂本节点，可以传⼊⽂本内容
innerHTML	也能达到创建节点的效果，直接添加到指定位置了

插入:

方法	描述
write()	将任意的字符串插⼊到⽂档中
appendChild()	向元素中添加新的⼦节点，作为最后⼀个⼦节点创建⼀个⽂本节点，可以传⼊⽂本内容
insertBefore()	向指定的已有的节点之前插⼊新的节点newItem：要插⼊的节点exsitingItem：参考节点需要参考⽗节点也能达到创建节点的效果，直接添加到指定位置了

删除结点

方法\|属性	描述
removeChild()	从元素中移除⼦节点

间接查找

在这里插入图片描述

等等…建议直接学jQuery 学习里面的js代码。

黄二马

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
java web 03 JavaScript基础

03 JavaScript基础添加函数，增加动态效果。HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 网页的行为个人理解：JavaScript就是可以写类似java代码在里面，可以创作一些方法。类似内容的输出，与其页面跳转。和进行一些运算。直接在HTML页面中使用<script></script>标签引入，可以写在head中，也可以写在body末尾，可以实现 <body> js的引入方式实验 <b
复制链接

扫一扫