JavaScript DOM编程

最新推荐文章于 2024-06-13 16:27:58 发布

charon2002

最新推荐文章于 2024-06-13 16:27:58 发布

阅读量87

点赞数 1

分类专栏： Web前端文章标签： javascript html html5

本文链接：https://blog.csdn.net/winner_20020626/article/details/120629727

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM编程

JS中的事件

焦点事件
blur	失去焦点
focus	获得焦点

鼠标事件
click	鼠标单击
dblclick	鼠标双击
mousedown	鼠标按下
mouseup	鼠标弹起
mouseover	鼠标经过
mousemove	鼠标移动
mouseout	鼠标离开

键盘事件
keydown	键盘按下
keyup	键盘弹起

表单事件
reset	表单重置
submit	表单提交

change 下拉列表选中项改变，或文本框内容改变

select 文本被选中

load 页面加载完毕

事件句柄

事件句柄是在事件前面加on,事件句柄在HTML标签中以属性的形式存在。

事件注册

事件注册只是把一段代码注册到某个标签节点的某个事件句柄上，页面打开时并不会执行这段代码，当该事件发生时才会去执行这段代码。

第一种方式：

在标签中使用事件句柄这个属性，在句柄后面添加要注册的代码或回调函数。

回调函数的特点是自己把这个函数写出来，但不是由自己来调用这个函数，而是由别的程序员或者别的程序去调用这个函数。

<input type="button" onclick="sayHello()"/>

第二种方式：

用纯JS代码完成事件的注册。

<body>
    <input type="button" id="btn1"/>
    <script type="text/javascript">
    	//1.获取节点对象，document是JS的一个内置对象，隶属于window对象，docement代表整个HTML页面
        var btnElem = document.getElementById("btn1");
        //2.给节点对象绑定事件，本例中给onclick属性赋值，后跟函数名或定义一个新匿名函数。
        btnElem.onclick = function(){
            alert("Hello World!");
        } 
    </script>
</body>

缺点：

因为js代码是按顺序逐行被解释器解释执行的，所以要求给节点对象绑定事件的代码必须在节点对象定义的后面，这很不灵活

第三种方式：

load事件在页面全部元素加载完毕后发生，所以可以在load事件发生后开始执行给节点对象的绑定操作。

<body onload="ready()">
    <script type="text/javascript">
    	function ready(){
            //1.根据id获取节点对象
            var btn2Elem = document.getElementById("btn2");
            //2.给节点对象绑定事件
            btn2.onclick = sayHello;	//注意是函数名
        }
    </script>
    <input type="button" id="btn2"/>
</body>

第四种方式：

<body>
    <script type="text/javascript">
    	window.onload = function{
            //1.根据id获取节点对象
            var btn2Elem = document.getElementById("btn2");
            //2.给节点对象绑定事件
            btn2.onclick = sayHello;	//注意是函数名
        }
    </script>
    <input type="button" id="btn2"/>
</body>

在第三种和第四种方式中，先完成页面加载完成事件的注册，并不会立刻执行这里面的代码，即给节点对象绑定事件，直到页面加载完毕才执行里面的代码，给节点对象绑定事件。

示例——捕获回车键

回车键的键值是 13

ESC键的键值是 27

<body>
    <script type="text/javascript">
    	window.onload = function(){
            //1.根据id获取节点对象
            var btn3Elem = document.getElementById("btn3");
            //2.给节点对象绑定事件
            btn2Elem.onkeydown = function(event){
                alert(event);	//[Object keyboardEvent]
                if(event.keyCode == 13){
                    alert("enter键被按下");
                }
            }
        }
    </script>
    <input type="button" id="btn3"/>
</body>
<!--
	说明：
	function(event)是我们编写的函数，由浏览器进行调用，被称为回调函数，当期望的事件发生后，浏览器会执行这个回调函数，并且也可	以根据需要给该函数传值，是否接收则看程序员编写的回调函数中形参的个数。在本例中，键盘按下事件发生，任意键都可以，浏览器会调用绑	   定的回调函数，并传一个Event对象，我们可以根据这个对象进行一些操作比如判断按下的是哪个键。

void运算符

要求：既保留超链接的样式，又在用户点击超链接的时候执行一段代码，页面还不能跳转。

<a href="" onclick="alert('你好！')">点我</a> 
<!-- 当href接的是空串时，会刷新当前页面，相当于还是会跳转，后面接一个正确的地址更不用多说 -->

<!--
	使用void运算符
	语法格式：
	javascript:void(表达式)，javascript是必须的，告诉浏览器后面的是一段javascript代码。表达式也是必须的，一般填0。
	作用：执行表达式，但不返回任何结果。
	由于href后面什么都没有，空串也不是，是一个“虚无"，所以不会跳转。
-->
<a href="javascript:void(0)" onclick="alert('你好')"/>

获得文本框的value

<body>
    <script type="text/javascript">
    	window.onload = function(){
            var txtElem = document.getElementById("txt01");
            var btnElem = docement.getElementById("btn01");
            btnElem.onclick = function(){
                alert(txtElem.value); //获取文本框的value属性
            }
        }
    </script>
    <input type="text" id="txt01"/>
    <input type="button" id="btn01"/>
</body>

innerHTML和innerText

innerHTML和innerText的异同：

innerHTML和innerText都是设置元素内部的内容，不过innerHTML会把这段内容当做js代码来执行，而innerText只会把这段内容当做普通的字符串来看待

<body>
    <script>
    	onload = function(){
            //获取节点对象
            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");
            var div = document.getElementById("mydiv");
            //给节点对象绑定事件
            btn1.onclick = function(){
                div.innerHTML = "<font color='red'>innerHTML</font>"
            }
            btn2.onclick = function(){
                div.innerHTML = "innerText"
            }
        }
    </script>
    
    <input type="button" value="innerHTML" id="btn1"/>
    <input type="button" value="innerText" id="btn2"/>
    <div id="mydiv"></div>
</body>

正则表达式

什么是正则表达式？有什么用？

正则表达式：Regular Expression

正则表达式主要用在字符串格式匹配上面
怎么创建正则表达式对象？

第一种方式：var regExp = /正则表达式/flags;

第二种方式：var regExp = new RegExp(“正则表达式”,“flags”);

flags:

g：全局匹配

i：忽略大小写

m：多行搜索（当前面的参数是正则表达式的时候不能用，只有当前面是普通字符串的时候，才能使用）
正则表达式对象的test()函数

var result = 正则表达式对象.test(要测试的字符串)

若result为true，则字符串格式匹配成功

若result为false，则字符串格式匹配失败

常见的正则表达式符号和正则表达式

正则表达式符号

<!--
^ 	表示匹配字符串的开始位置  (用在中括号[ ] 时,可以理解为取反,表示不匹配括号中字符串)
$ 	表示匹配字符串的结束位置



.  表示匹配除换行符以外的任意单个字符 
|  表示为或者,两项中取一项
() 小括号表示匹配括号中全部字符
[] 中括号表示匹配括号中一个字符 范围描述 如[0-9 a-z A-Z]



\w 	表示匹配 英文字母和数字

\W	表示匹配 非英文字母和数字
\d 	表示匹配 数字

\D	表示匹配 非数字

\s	表示匹配 任意的空白字符

\S	表示匹配 任意的非空白字符

\b	表示匹配是单词开头或结尾的位置

\B	表示匹配不是单词开头或结尾的位置



\*	表示匹配 零次到多次

\+	表示匹配 一次到多次 (至少有一次)
?	表示匹配 零次或一次

{} 大括号用于限定匹配次数 ，如 {n}表示匹配n个字符  {n,}表示至少匹配n个字符  {n,m}表示至少n,最多m



\  转义字符 如上基本符号匹配都需要转义字符   如 \\*  表示匹配*号
-->

常见的正则表达式（转）

匹配中文字符的正则表达式： [\u4e00-\u9fa5]

匹配双字节字符(包括汉字在内)：[^\x00-\xff]

匹配空行的正则表达式：\n[\s| ]*\r

匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/ 

匹配首尾空格的正则表达式：(^\s*)|(\s*$)

匹配IP地址的正则表达式：/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //

匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

匹配网址URL的正则表达式：http://(/[\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

sql语句：^(select|drop|delete|create|update|insert).*$

1、非负整数：^\d+$ 

2、正整数：^[0-9]*[1-9][0-9]*$ 

3、非正整数：^((-\d+)|(0+))$ 

4、负整数：^-[0-9]*[1-9][0-9]*$ 

5、整数：^-?\d+$ 

6、非负浮点数：^\d+(\.\d+)?$ 

7、正浮点数：^((0-9)+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$ 

8、非正浮点数：^((-\d+\.\d+)?)|(0+(\.0+)?))$ 

9、负浮点数：^(-((正浮点数正则式)))$ 

10、英文字符串：^[A-Za-z]+$ 

11、英文大写串：^[A-Z]+$ 

12、英文小写串：^[a-z]+$ 

13、英文字符数字串：^[A-Za-z0-9]+$ 

14、英数字加下划线串：^\w+$ 

15、E-mail地址：^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$ 

16、URL：^[a-zA-Z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\s*)?$ 
或：^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$

17、邮政编码：^[1-9]\d{5}$

18、中文：^[\u0391-\uFFE5]+$

19、电话号码：^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$

20、手机号码：^((\d2,3)|(\d{3}\-))?13\d{9}$

21、双字节字符(包括汉字在内)：^\x00-\xff

22、匹配首尾空格：(^\s*)|(\s*$)（像vbscript那样的trim函数）

23、匹配HTML标记：<(.*)>.*<\/\1>|<(.*) \/> 

24、匹配空行：\n[\s| ]*\r

25、提取信息中的网络链接：(h|H)(r|R)(e|E)(f|F) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)?

26、提取信息中的邮件地址：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

27、提取信息中的图片链接：(s|S)(r|R)(c|C) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)?

28、提取信息中的IP地址：(\d+)\.(\d+)\.(\d+)\.(\d+)

29、提取信息中的中国手机号码：(86)*0*13\d{9}

30、提取信息中的中国固定电话号码：(\d3,4|\d{3,4}-|\s)?\d{8}

31、提取信息中的中国电话号码（包括移动和固定电话）：(\d3,4|\d{3,4}-|\s)?\d{7,14}

32、提取信息中的中国邮政编码：[1-9]{1}(\d+){5}

33、提取信息中的浮点数（即小数）：(-?\d*)\.?\d+

34、提取信息中的任何数字 ：(-?\d*)(\.\d+)? 

35、IP：(\d+)\.(\d+)\.(\d+)\.(\d+)

36、电话区号：/^0\d{2,3}$/

37、腾讯QQ号：^[1-9]*[1-9][0-9]*$

38、帐号(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

39、中文、英文、数字及下划线：^[\u4e00-\u9fa5_a-zA-Z0-9]+$

示例2——表单验证

JS表单验证

示例3——复选框的全选和取消全选

JS复选框的全选和取消全选

示例4——获取下拉列表的value

<select name="province" onchange="alert(this.value)">
			<option value="hunan">湖南</option>
			<option value="hainan">海南</option>
			<option value="shandong">山东</option>
			<option value="jiangxi">江西</option>
</select>

示例5——显示网页时钟

JS显示网页时钟

拓展：

//js内置支持类Data：用来获取系统时间/日期
var currentTime = new Date();

//输出当前时间
document.write(currentTime);	//Fri Oct 08 2021 16:57:06 GMT+0800 (中国标准时间)

document.write("<br/>")		//js代码换行

//转换为具有本地语言环境的日期格式
currentTime = currentTime.toLocaleString();
document.write(currentTime);	//2021/10/8 下午4:57:06

document.write("<br/>")		//js代码换行

//自定义日期格式
// var year = currentTime.getYear()
var year = currentTime.getFullYear();	//返回全格式的年信息
var month = d.getMonth();	//返回月份[0-11]
//var day = d.getDay	返回的是一周的第几天
var day = d.getDate()	//返回日信息
document.write(year + "年" + (month +1 )+ "月" + day +"日");	//2021年10月8日