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