JavaScript高级—知识笔记

最新推荐文章于 2022-09-16 23:31:01 发布

繁星StarLight

最新推荐文章于 2022-09-16 23:31:01 发布

阅读量228

点赞数 1

文章标签： java javascript js 正则表达式 window

本文链接：https://blog.csdn.net/qq_30068165/article/details/115593527

版权

一、事件

1、事件的概述

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：

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

2、事件的注册

什么是事件的注册？其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
事件的注册又分为静态注册和动态注册两种：

静态注册事件： 通过html标签的事件属性直接赋于事件响应后的代码，这种方式叫做静态注册事件。
动态注册事件： 指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}这种方式赋于事件响应后的代码，这种方式叫做动态注册事件。

动态注册的基本步骤：①获取标签对象；②标签对象.事件名= function(){}

3、定义事件的方法

3.1 onload加载事件

//onload事件静态注册的方法
<script>
function onloadFun(){
	alert('静态注册onload事件.....');
}
</script>
//onload事件是浏览器解析完页面之后就会自动触发的事件
<body oncload="onloadFun();">
</body>

//onload事件动态注册的方法
<script>
window.onload = function(){
	alert("onload事件的动态注册方法");
}
</script>

3.2 onclick单击事件

<script>
//onclick事件的静态注册方法
function onclickFun(){
	alert("onclick事件的静态注册方法");
}
//onclick事件的静态注册方法
window.onload = function(){
	//获取标签对象
	document.getElementById("");
	//标签对象.事件名= function(){}
	 btn01.onclick = function(){
	 	alert("动态注册的onclick事件");
	 }
}
</script>
<body>
	<botton onclick="onclickFun();">按钮1</button>
	<botton id="btn01">按钮2</button>
</body>

3.3 onblur失去焦点事件

<script>
        //静态注册失去焦点事件
        function onblurFun() {
            //console是控制台对象，是JS提供的专门用来向浏览器的控制台打印输出，用于测试
            //log()是打印方法
            console.log("静态注册失去焦点事件");
        }
        //动态注册onblur事件
        window.onblur = function (){
            //1.获取标签对象
            var passwordObj =  document.getElementById("password");
            // alert(passwordObj);
            //2.通过标签对象.事件名 = function(){}
            passwordObj.onblur = function () {
                console.log("动态注册事件");
            }
        }
    </script>
<body>
    用户名：<input type="text" onblur="onblurFun();"></br>//静态
    密码：<input id="password" type="text"></br>//动态
</body>

3.4 onchange内容发生改变事件

<script>
        //静态注册
        function onchangeFun() {
            alert("女神已经改变了！");
        }
        //动态注册
        window.onload = function () {
            var setObj = document.getElementById("sel01");
            setObj.onchange = function () {
                alert("男神已经改变！");
            }
        }
    </script>
<body>
    请选择你心中的女神
    <!--静态注册onchange事件-->
    <select onchange="onchangeFun();">
        <option>--女神--</option>
        <option>-芳芳-</option>
        <option>-佳佳-</option>
        <option>-娘娘-</option>
    </select>
    请选择你心中的男神
    <!--动态注册onchange事件-->
    <select id="sel01">
        <option>--男神--</option>
        <option>-华仔-</option>
        <option>-康师傅-</option>
        <option>-富哥-</option>
    </select>
</body>

3.5 onsubmit表单提交事件

<script type="text/javascript">
        //静态注册submit提交事件
        function onsubmitFun() {
            alert("静态注册表单提交事件————表单不合法！");

            return false;
        }
        //动态注册
        window.onload = function () {
            var subObj = document.getElementById("submit1");
            subObj.onsubmit = function () {
                alert("动注册表单提交事件————表单不合法！");
                return false;
            }
        }
    </script>
    <body>
<!--return false可以阻止表单的提交-->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
        <input type="submit" value="静态注册">
    </form>
    </br>
    <form action="http://localhost:8080" id="submit1">
        <input type="submit" value="动态注册">
    </form>
</body>

二、DOM模型

DOM（Document Object Model）是文档对象模型。作用是把文档中的标签、属性、文本转换为对象来管理使用。
document是树形层级结构，具有辈分关系。

Document对象中的常用方法

document.getElementById(elementId)：
通过标签的id属性查找标签dom对象，elementId是标签的id属性值。
document.getElementsByName(elementName)：
通过标签的name属性查找标签dom对象，elementName标签的name属性值。
document.getElementsByTageName(tagname)：
通过标签名属性查找标签dom对象，tagname是标签名。
document.createElement(tagName)：
方法，通过给定的标签名，创建一个标签对象，tagName是要创建的标签名。

注意事项：

查询的范围是从小到大的，优先级是从高到低。
查询的代码必须放在方法内或window.onload函数内，否则页面未加载完毕，查询结果为null

document对象的补充：
使用JS代码创建HTML标签，并显示在页面上。我们使用：
var 对象名 = document.creatElement(“标签名”);
添加文本节点对象：
var 对象名 = document.createTextNode(“内容”);
将内容添加到标签内：
标签对象名.appendChild(内容对象名);
添加子元素：
document.标签名.appendChild(标签对象名);

三、BOM模型

BOM（Browser Object Model 浏览器对象模型），它提供了很多对象,用于访问浏览器的功能。（这些功能与任何网页内容无关）作用是将浏览器的各个组成部分封装成对象。

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

1、window对象

与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
触发机制：

如果用户点击确定按钮，则方法返回true
如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
返回值：获取用户输入的值

与打开关闭有关的方法：
close() 关闭浏览器窗口。
open() 打开一个新的浏览器窗口（返回新的Window对象）。

与定时器有关的方法：
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
常用方法：
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。

四、正则表达式

1、RegExp对象概述及语法

正则表达式是描述字符模式的对象。用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
语法：
var patt = new RegExp(patten,modifiers);
或更简单的方式：
var patt = /patten/modifiers;

2、正则表达式修饰符

修饰符可用于大小写不敏感的更全局的搜素：

i：执行对大小写不敏感的匹配。
g：执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m：执行多行匹配。

3、正则表达式模式

3.1 括号

括号用于查找一定范围的字符串：

[abc]： 查找方括号之间的任何字符。
[0-9]： 查找任何从 0 至 9 的数字。
(x|y)： 查找由 | 分隔的任何选项。
[a-z]： 查找任何从小写 a 至小写 z 的字符。
[A-Z]： 查找任何从大写 A 到大写 Z 的字符。
[adgk]： 查找给定集合内的任何字符。
[^adgk]： 查找给定集合外的任何字符。
(red|blue|green)： 查找任何指定的选项。

3.2 元字符

元字符（Metacharacter）是拥有特殊含义的字符：

\d： 查找数字。
\D： 查找非数字字符。
\w： 查找单词字符。
\W： 查找非单词字符。
\s： 查找空白字符。
\S： 查找非空白字符。
\b： 匹配单词边界。
\B： 匹配非单词边界。
\0： 查找NUL字符。
\n： 查找换行符。
\f： 查找换页符。
\r： 查找回车符。
\t： 查找制表符。
\v： 查找垂直制表符。
\xxx： 查找以八进制数 xxx 规定的字符。
\xdd： 查找以十六进制数 dd 规定的字符。
\uxxxx： 查找以十六进制数xxxx规定的Unicode字符。

3.3 量词（Quantifiers）

n+： 匹配任何包含至少一个n的字符串。
n：* 匹配任何包含零个或多个n的字符串。
n？： 匹配任何包含零个或一个n的字符串。
n{X}： 匹配包含 X 个 n 的序列的字符串。
n{X,Y}： 匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}： 匹配包含至少 X 个 n 的序列的字符串。
n$： 匹配任何结尾为 n 的字符串。
^n： 匹配任何开头为 n 的字符串。
?=n： 匹配任何其后紧接指定字符串 n 的字符串。
?!n： 匹配任何其后没有紧接指定字符串 n 的字符串。