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)
类似这些过滤规则!
|