IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> innerHTML、事件、正则学习总结 -> 正文阅读

[JavaScript知识库]innerHTML、事件、正则学习总结

innerHTML作用与用法

innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容;
如:<div id="aa">这是内容</div>

我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容;
也可以对某对象插入内容,如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’;
这样就能向id为abc的对象插入内容。
实例:
1.获取段落p的 innerHTML(html内容)
?

 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <script type="text/javascript">
            function getInnerHTML(){
                alert(document.getElementById("test").innerHTML);
            }
        </script>
    </head>
    <body>
        <p id="test"><font color="#000"> www.kxacm.top</font></p>
        <input type="button" onclick="getInnerHTML()" value="点击" />
    </body>
 </html>

2.设置段落p的 innerHTML(html内容)

<html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
            <script type="text/javascript">
            function setInnerHTML(){
                document.getElementById("test").innerHTML = "<strong>设置标签的html内容</strong>";
            }
            </script>
            </head>
        <body>
            <p id="test"><font color="#000"> www.kxacm.top</font></p>
            <input type="button" onclick="setInnerHTML()" value="点击" />
        </body>
  </html>

js事件

2.常用的事件

1)、单双击事件
?? ?单击:onclick ? ??? ??? ?当鼠标单击的时候会触发
?? ?双击:ondblclick?? ??? ?当鼠标双击的时候会被触发

范例:按钮元素添加单双击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS事件</title>
<script type="text/javascript">
	function change(){
		alert("xss");
	}
</script>
	</head>
	<body>
<input type="button" name="" id="" value="单击事件" onclick="change();" />
<input type="button" name="" id="" value="双击事件" ondblclick="change();" />
	</body>
</html>

2)、鼠标事件
? ? onmouseover ? ? ? ? ? ?当鼠标悬停在某个HTML元素上的时候触发
? ? onmousemove ? ? ? ? ? ?当鼠标在某个HTML元素上移动的时候触发
? ? onmouseout ? ? ? ? ? ?当鼠标在某个HTML元素上移出的时候触发

范例:设置鼠标悬停事件
?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS事件</title>
<script type="text/javascript">
	function change1(){
		alert("我是红色");
	}
	function change2(){
		alert("我是绿色");
	}
</script>
	</head>
	<body>
<div id="left" style="width: 100px;height: 100px;float: left;background-color: red;" onmouseover="change1();">
	
</div>
<div id="right" style="width: 100px;height: 100px;float: left;background-color: green;" onmouseover="change2();">
	
</div>
	</body>
</html>

3)、键盘事件
?? ?onkeyup?? ??? ??? ??? ?当键盘在某个HTML元素上弹起的时候触发
?? ?onkeydown?? ??? ??? ?当键盘在某个HTML元素上下压的时候触发

范例:设置按下键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS事件</title>
<script type="text/javascript">
	function change(){
		alert("xss");
	}
</script>
	</head>
	<body>
用户名:<input type="text" id="" value="" onkeydown="change();"/>
	</body>
</html>

4)、焦点事件
?? ?onfocus?? ??? ??? ??? ?当某个HTML元素获取焦点的时候触发
?? ?onblur?? ??? ??? ??? ?当某个HTML元素失去焦点的时候触发

范例:设置input文本框失去焦点触发事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS事件</title>
<script type="text/javascript">
	function change(){
		alert("xss");
	}
</script>
	</head>
	<body>
用户名:<input type="text" id="" value="" onblur="change();"/>
	</body>
</html>

5)、页面加载事件?? ??? ??? ?
?? ?onload?? ??? ??? ??? ?当页面加载成功后触发。

范例:页面加载成功后获取input文本框的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS事件</title>
<script type="text/javascript">
	function change(){
		alert(document.getElementById("test").value);
	}
</script>
	</head>
	<body onload="change();">
用户名:<input type="text" id="test" value="麻子" />
	</body>
</html>

正则表达式

正则表达式简介

正则表达式是由一些具有特殊含义的字符组成的字符串,多用于查找、替换符合规则的字符串。在表单验证、Url映射等处都会经常用到。

一、元字符

元字符:即为有特定含义的字符,常见的元字符如下

常用的元字符
代码说明
.匹配除换行符以外的任意字符
\w匹配字母或数字或下划线或汉字
\s匹配任意的空白符
\d匹配数字
\b匹配单词的开始或结束
^匹配字符串的开始(在集合字符里[^a]表示非(不匹配)的意思
$匹配字符串的结束

二、反义字符

反义字符:多用于查找除某个字符以外其他任意字符均可以的情况

常用的反义字符如下:

常用的反义字符
代码/语法说明
\W匹配任意不是字母,数字,下划线,汉字的字符
\S匹配任意不是空白符的字符
\D匹配任意非数字的字符
\B匹配不是单词开头或结束的位置
[^x]匹配除了x以外的任意字符
[^aeiou]匹配除了aeiou这几个字母以外的任意字符

三、限定字符

限定字符多用于重复匹配次数

常用的限定字符如下

常用的限定符
代码/语法说明
*重复零次或更多次
+重复一次或更多次
?重复零次或一次
{n}重复n次
{n,}重复n次或更多次
{n,m}重复n到m次

四、转义字符

在实际的开发中,可能会遇到要比配元字符的情况,这个时候就需要进行字符转义,如元字符 . ?* ?\ 需要转换为\. ? \* ? \\

例如: 需要匹配qq邮箱 \d{8,}+qq+\.+com ?在这里的. 就需要加斜杠

五、字符分枝

字符分枝多用于满足不同情况的选择,用“|”将不同的条件分割开来,比如有些固定电话区号有三位,有些有四位,这个时候可以采用字符分枝

例如:\d{3}-\d{8}|\d{4}-\d{8} ?可以匹配两种不同长度区号的固定电话

下边的IP地址正则表达式也有用到字符分枝

六、字符分组

字符分组多用于将多个字符重复,主要通过使用小括号()来进行分组

形如:(\d\w){3} 重复匹配3次(\d\w)

类似这些过滤规则!

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-20 12:24:14  更:2021-10-20 12:24:46 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 0:18:31-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码