今天学的内容比较少，主要就是正则表达式，不过在讲这个之前先说说浏览器的一些行为。
一、浏览器的默认行为
- form表单，当咱们点击submit按钮的时候浏览器会自动提交表单
- a超链接标记，默认就具有点击事件
- 右键菜单 (oncontextmenu)
阻止默认行为
var a = document.querySelector('a');
a.onclick = function(e){
e = e || window.event;
//只能阻止常用的浏览器，不能阻止ie
e.preventDefault();
//阻止IE浏览器的
e.returnValue = false;
//推荐使用
return false;
}
二、自定义右键菜单
思路：
+ 点击鼠标右键的时候，先让ul元素显示
+ 获取鼠标的坐标，赋值给ul，这样ul才会跟随
+ 通过鼠标左键，隐藏ul元素
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 110px;
min-height: 157px;
border: 1px solid #ccc;
border-radius: 10px;
display: none;
position: absolute;
}
ul li{
font-size: 14px;
text-align: center;
border-bottom: 1px dashed #ccc;
line-height: 30px;
list-style: none;
}
ul li:last-child{
border: none;
}
</style>
<ul>
<li>新闻</li>
<li>娱乐</li>
<li>体育</li>
</ul>
<script>
var ul = document.querySelector('ul');
//鼠标右键事件
oncontextmenu = function(e){
//注意点：如果给元素使用了left和top一定要设置定位属性，不然不会起作用
e = e || window.event;
//先让ul元素显示
ul.style.display = 'block';
//获取鼠标坐标
var x = e.pageX;
var y = e.pageY;
//进行赋值操作
ul.style.left = x + 'px';
ul.style.top = y + 'px';
return false;
}
//鼠标左键事件
document.onclick = function(){
ul.style.display = 'none';
}
</script>
三、全选
<style>
div{
width: 200px;
margin: 50px auto;
}
input{
display: block;
margin: 20px;
}
</style>
<div>
<!--问题：由checked属性控制的，如果复习框标记上有checked属性表示默认选中，否则反之-->
全选
<input type="checkbox">
<hr/>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<script>
//获取元素
var firstInput = document.querySelector('input');
var allInput = document.querySelectorAll('hr~input');
//给全选复选框标记绑定事件 onchange专门给checkbox和radio表单标记使用的
firstInput.onchange = function(){
//获取全选复选框标记的状态 选中 或者 没有选中
var type = firstInput.checked;
//遍历其他的复选框标记，设置checked属性
for(var i=0; i<allInput.length; i++){
allInput[i].checked = type;
}
}
//给其他的复选框标记绑定事件
for(var j=0; j<allInput.length; j++){
allInput[j].onchange = function(){
//获取哪些复选框选中了，把选中的复选框标记放在了伪数组里面
//input:checked获取哪些表单标记默认选中了
var ck = document.querySelectorAll('hr~input:checked');
//判断选中的复选框的length和所有的复选框的length如果相等了，说明都选中了
//可以把全选的复选框给赋值true，否则false
if(ck.length == allInput.length){
firstInput.checked = true;
}else{
firstInput.checked = false;
}
}
}
</script>
四、正则表达式
介绍：
- 正则表达式（regular expression）是一个描述字符规则的对象。可以用来检查一个字符串是否含有某个字符，将匹配的字符做替换或者从某个字符串中取出某个条件的字符等。
- 正则表达式其实就是一种规则，其实把正则称作规则表达式更为恰当。正则的语法基于一种古老的perl语言
创建：
//正则的作用是描述字符的规则，检查字符存不存在有没有问题
var str = 'b';
var reg = new RegExp('b');
console.log(typeof reg); //object
//使用正则提供的test()方法检查，如果有返回true 没有返回false
var res = reg.test(str);
console.log(res);
//构造函数方式
var reg1 = new RegExp("a");
var str = "adassdfsd";
console.log(str.match(reg1)) //输出匹配a的字符
//字面量方式，古老的perl语言风格
var reg2 = /a/;
console.log(str2.match(reg2)); //输出匹配a的字符
/ / 是正则表达式的标识符
" " 是字符串的标识符
[ ] 是数组的标识符
{
} 是对象的标识符
正则中的修饰符，写在正则表达式后面／的后面：
修饰符 i 忽略大小写
修饰符 g 全局匹配
字符串方法
match 获取匹配的项目 返回数组 匹配正则
search 字符串搜索
replace 替换
正则方法：
test 方法用于检测一个字符串是否匹配某个模式. 返回true和false
exec()找到了返回数组，找不到反回null
量词：
- 也叫限定符，可以指定正则表达式的一个给定组，必须要出现多少次才能满足匹配
- 通过量词可以设置一个内容出现的次数。注意点：量词只对它前边的一个内容起作用。
- 以什么开头^ 以什么结尾$
- {n}：匹配前一个字符正好出现n次
- {n,}：匹配前一个字符出现n次以上，没有限制
- {n,m}：匹配一个字符出现n到m次
- *表示允许的次数是0 至 正无穷次，有没有都行
- +表示允许的次数是1 至 正无穷次，至少有一个
- ? 表示允许的次数是0至1，最多出现1次
- ()表示一组
表达式：
- [abc] 查找方括号之间的任何字符。
- [0-9] 查找任何从 0 至 9 的数字。
- [a-z] 查找任何从小写 a 到小写 z 的字符。
- [A-Z] 查找任何从大写 A 到大写 Z 的字符。
- [A-z] 查找任何从大写 A 到小写 z 的字符。
- 注意：把 ^ 放在表达式的里面表示排除 [^0-9]
元字符（转义字符）：
- \d —— [0-9] 数字
- \w —— [a-z0-9_] 数字，字母，下划线
- \s —— 空白字符，验证有没有空格
- \b —— 匹配单词边界
- \D —— [^0-9] 非数字
- \W —— [^a-z0-9_] 非数字，字母，下划线
- \S —— 非空白字符
" . " 表示任意字符 注意点：" . " 验证不了换行\n