JavaScript 学习笔记（二）

绍小七

已于 2023-08-15 17:07:41 修改

阅读量56

点赞数

分类专栏： Java学习笔记文章标签： javascript 学习笔记

于 2023-08-14 15:27:33 首次发布

本文链接：https://blog.csdn.net/ShaoXiaoQi/article/details/132269456

版权

Java学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、BOM对象介绍

BOM对象：Browser Object Model 浏览器对象模型，JS把整个浏览器当做一个对象来进行处理。在整个浏览器对象中又包含N个小的组件对象，如：地址栏、页面窗口等组件对象。
在这里插入图片描述

在这里插入图片描述

重点学习：window、history、location 几个对象。

1.1 Window对象

在这里插入图片描述

常用方法

方法	描述
`setInterval()`	按照指定的周期（以毫秒计）来调用函数或计算表达式。重复执行。
`setTimeout()`	在指定的毫秒数后调用函数或计算表达式。执行一次
`clearInterval()`	取消由 `setInterval()` 设置的 timeout。
`clearTimeout()`	取消由 `setTimeout()` 方法设置的 timeout。

代码演示

<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
    <script type="text/javascript">
        // 加载完页面后显示时间
        window.onload = function () {
            // 调用方法设置时间
            window.setInterval("setTime()", 1000);
        }
        function setTime() {
            // 创建时间对象
            var date = new Date();
            // 获取需要显示时间的div标签对象，写出当前时间
            var div = document.getElementById("div1")；
            // 给div标签的文本部分重新赋值
            div.innerHTML = date.toLocaleTimeString();
        }
    </script>
</head>
<body>
    <!--用于显示时间的div标签-->
    <div id="div1">显示时间</div>
</body>

1.2 history对象

在这里插入图片描述

代码演示

准备一个用于html文件可以连接跳转到其他页面

<body>
    <a href="historyDemo.html">页面跳转</a>
</body>

准备一个被连接标签跳转的页面，通过按钮事件返回上一级页面

<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
    <script type="text/javascript">
        // 创建点击事件触发的方法
        function goBack() {
            // 返回上一级页面
            window.history.back();
        }
    </script>
</head>
<body>
    <!--声明按钮，点击返回上一页面-->
    <input type="button" value="返回" onclick="goBack()"/>
    <input type="button" value="返回" onclick="window.history.back();"/>
</body>

1.3 location对象

在这里插入图片描述

location表示当前浏览器的地址栏对象。地址栏中主要保存的是访问某个网站的URL地址。

URL地址：统一资源定位符。

http://www.baidu.com:80?username=zhangsan&age=23&addredd=beijing

当前浏览器访问某个网站时使用的协议HTTP协议。
www.baidu.com 是一个域名，背后对应的是一个 ip 地址，ip 地址对应的是网络中的某个设备。
80端口表示访问的是指定ip这台服务器上运行的某个软件程序。
?号后面：username=zhangsan&age=23&addredd=beijing 表示用户提交的信息。

代码演示

<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
    <script type="text/javascript">
        function _baidu() {
            window.location.href = "http://www.baidu.com";
        }
        // 获取当前页面的URL
        document.write(window.location.href);
    </script>
</head>
<body>
    <!--声明按钮，点击获取URL-->
    <input type="button" value="访问百度" onclick="_baidu();">
</body>

二、、DOM对象介绍

在这里插入图片描述

DOM对象：Document Object Model 文档对象模型，表示当前的HTML文档对象。

浏览器把一个html文件加载到内存中之后，这个html文件，就会被封装成一个Document对象。而当前html文件中的所有标签、标签中的属性以及标签中的文本也分别封装成了不同的对象。并且把标签中的文本数据，封装成当前标签的一个子标签。
　　当把一个html文件加载完成之后，就可以通过Document对象，得到当前html文件中的所有标签，属性，文本对象。
　　使用 js 技术结合Document对象，对html文件中的所有标签，属性和文本进行各种操作。如：添加、移除、改变或重排页面上的项目。
在这里插入图片描述

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）

nodeName 属性含有某个节点的名称：

元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

nodeValue：

对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。

三、DOM对象的方法

getElementById() 返回对拥有指定id的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合，通过name属性值获取标签对象。
getElementsByTagName() 返回带有指定标签名的对象集合。

3.1 getElementById()

getElementById()是通过标签的id属性获取对应的标签对象，在同一个html页面中id属性的值要求必须唯一。

<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
    <script>
        
        /*
           想要获取标签对象，必须要先将页面加载完成
           所以很多代码都必须写在html文档加载完成之后
        */
        window.onload = function () {
            //通过id获取input标签对象
            var input = document.getElementById("username");
            alert(input);
        };
        // 获取文本输入框中的value值
        function _demo() {
            //通过id获取input标签对象
            var input = document.getElementById("username");
            alert(input.value);
        }
    </script>
</head>
<body>
    <input type="text" id="username" value="请输入用户名" onclick="_demo();" />
</body>

3.2 DHTML文档的使用

当我们通过document对象获取到某一个html的标签对象后，就需要通过标签对象来操作对应的html标签。具体的操作方式可以查看DHTML帮助文件。

文档中包含了标签对象可以使用的：属性、事件、方法、样式等….

在这里插入图片描述

3.3 getElementsByName()

getElementsByName()方法是通过标签的name属性获取对应的标签对象，在同一个页面中，name属性的值是可以相同的，一般用于单选按钮、复选按钮的标签。

<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
    <script>
            window.onload = function () {
            // 通过name属性获取标签对象
            var sexs = document.getElementsByName("sex");
            //alert(sexs);
            //alert(sexs.length);
            var flag = false;
            for( var i = 0; i < sexs.length; i++ ) {
                // alert(sexs[i].value);
                if( sexs[i].checked) {
                    flag = true;
                }
            }
            if( !flag ) {
                alert("请选择性别！");
            }
        };
    </script>
</head>
<body>
    请选择性别:
    <input type="radio" name="sex" value="man"/>男
    <input type="radio" name="sex" value="women"/>女
</body>

3.4 getElementsByTagName()

根据html页面上的标签名称获取标签对象。而html页面上标签一般都会重复，因此获取的一定是标签对象数组。

<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
    <script>
            window.onload = function () {
            // 通过标签名获取标签对象
            var inputs = document.getElementsByTagName("input");
            alert(inputs.length);
        };
    </script>
</head>
<body>
    请选择爱好:
    <input type="checkbox" />足球
    <input type="checkbox" />台球
    <input type="checkbox" />篮球
    <input type="checkbox" />橄榄球
    <input type="checkbox" />羽毛球
    <input type="checkbox" />乒乓球
</body>

四、JS中的事件

在这里插入图片描述

在JS中每个标签都可以绑定事件，不同的标签绑定的事件也有所不同，当然标签之间也存在相同的事件，标签可以使用的具体事件可以查询DHTML文件了解。

4.1 JS中的常用事件

JS中的事件：

blur 失去焦点
focus 获得焦点

click 鼠标单击
dblclick 鼠标双击

keydown 键盘按下
keyup 键盘弹起

mousedown 鼠标按下
mouseover 鼠标经过
mousemove 鼠标移动
mouseout 鼠标离开
mouseup 鼠标弹起

reset 表单重置
submit 表单提交

change 下拉列表选中项改变，或文本框内容改变
select 文本被选定
load 页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）

4.2 注册事件的两种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的常用事件</title>
	</head>
	<body>
		<script type="text/javascript">
			/*

			*/
		   // 对于当前程序来说,sayHello函数被称为回调函数(callback函数)
		   // 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
		   function sayHello(){
			   alert("hello js!");
		   }
		</script>
		
		<!--注册事件的第一种方式，直接在标签中使用事件句柄-->
		<!--以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。-->
		<input type="button" value="hello" onclick="sayHello()"/>
		
		
		<input type="button" value="hello2" id="mybtn" />
		<input type="button" value="hello3" id="mybtn1" />
		<input type="button" value="hello4" id="mybtn2" />
		<script type="text/javascript">
			function doSome(){
				alert("do some!");
			}
			/*
				第二种注册事件的方式，是使用纯JS代码完成事件的注册。
			*/
		   // 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
		   var btnObj = document.getElementById("mybtn");
		   // 第二步:给按钮对象的onclick属性赋值
		   btnObj.onclick = doSome; // 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
									// 这行代码的含义是,将回调函数doSome注册到click事件上.
		   
		   var mybtn1 = document.getElementById("mybtn1");
		   mybtn1.onclick = function(){ // 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
			   alert("test.........."); // 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
		   }
		   
		   document.getElementById("mybtn2").onclick = function(){
			   alert("test22222222.........");
		   }
		</script>
		
	</body>
</html>

<!--
	java中也有回调函数机制：
		public class MyClass{
			
			public static void main(String[] args){
				// 主动调用run()方法，站在这个角度看run()方法叫做正向调用。
				run();
			}
			
			// 站在run方法的编写者角度来看这个方法，把run方法叫做回调函数。
			public static void run(){
				System.out.println("run...");
			}
		}
-->

4.3 第一种事件绑定方式

语法格式

<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
    <script>
        function eventFunction(){
            JS事件代码;
        }
    </script>
</head>
<body>
    <tagName eventName = "eventFunction()">文本内容</tagName>
</body>
代码演示
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
    <style>
        div {
            height: 300px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
    <script>
        // 鼠标按下事件
        function _down() {
            // 获取标签对象
            var div = document.getElementsByTagName("div")[0];
            // 修改背景色 object.style.backgroundColor [ = sColor ]
            div.style.backgroundColor = "red";
        }
        function _over() {
            // 获取标签对象
            var div = document.getElementsByTagName("div")[0];
            // 修改背景色 object.style.backgroundColor [ = sColor ]
            div.style.backgroundColor = "green";
        }
        function _out() {
            // 获取标签对象
            var div = document.getElementsByTagName("div")[0];
            // 修改背景色 object.style.backgroundColor [ = sColor ]
            div.style.backgroundColor = "blue";
        }
    </script>
</head>
<body>
    <div onmousedown="_down()" onmouseover="_over()" onmouseout="_out()">文本内容</div>
</body>

4.4 第二种事件绑定方式

语法格式

<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
    <script>
        // html页面加载完成后，才能获取标签对象
        window.onload = function {
            /*
                1.先获取标签对象
                2.给标签对象添加对应的事件
           */
            var tagObject = .....;
            tagObject.eventName = function() {
                JS事件;
            }
        }
    </script>
</head>
<body>
    <tagName id="" name="" class="">文本内容</tagName>
</body>

代码演示

<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
    <style>
        div {
            height: 300px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
    <script>
        window.onload = function () {
            // 获取标签对象
            var div = document.getElementsByClassName("div1")[0];
            // 给div绑定事件
            div.onmousedown = function () {
                window.open("https://baidu.com");
            }
        }
    </script>
</head>
<body>
    <div class="div1">文本内容</div>
</body>

五、JS中的正则表达式

详细参考：JavaScript正则表达式(完整版)

怎么创建正则表达式对象，怎么调用正则表达式对象的方法？

第一种创建方式：

var regExp = /正则表达式/flags;

第二种创建方式:使用内置支持类RegExp

var regExp = new RegExp("正则表达式","flags");

关于flags：
　　g：全局匹配
　　i：忽略大小写
　　m：多行搜索（ES规范制定之后才支持m。）当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才可以使用。
正则表达式对象的test()方法？
　　true / false = 正则表达式对象.test(用户填写的字符串);
　　true : 字符串格式匹配成功
　　false: 字符串格式匹配失败

绍小七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 学习笔记（二）

DOM对象：Document Object Model 文档对象模型，表示当前的HTML文档对象。浏览器把一个html文件加载到内存中之后，这个html文件，就会被封装成一个Document对象。而当前html文件中的所有标签、标签中的属性以及标签中的文本也分别封装成了不同的对象。并且把标签中的文本数据，封装成当前标签的一个子标签。当把一个html文件加载完成之后，就可以通过Document对象，得到当前html文件中的所有标签，属性，文本对象。
复制链接

扫一扫