Hay menos contenido para aprender hoy, principalmente expresiones regulares, pero antes de hablar de esto, hablemos de algunos comportamientos del navegador.
1. El comportamiento predeterminado del navegador
- formulario formulario, cuando hacemos clic en el botón enviar, el navegador enviará automáticamente el formulario
- una etiqueta de hipervínculo, que tiene un evento de clic de forma predeterminada
- Menú contextual (oncontextmenu)
prevenir el comportamiento predeterminado
var a = document.querySelector('a');
a.onclick = function(e){
e = e || window.event;
//只能阻止常用的浏览器，不能阻止ie
e.preventDefault();
//阻止IE浏览器的
e.returnValue = false;
//推荐使用
return false;
}
2. Personaliza el menú contextual
思路：
+ 点击鼠标右键的时候，先让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>
3. Seleccionar todo
<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>
4. Expresiones regulares
introducir:
- Una expresión regular es un objeto que describe reglas de caracteres. Se puede usar para verificar si una cadena contiene un carácter determinado, reemplazar el carácter coincidente o extraer un carácter condicional determinado de una cadena determinada, etc.
- Una expresión regular es en realidad un tipo de regla, de hecho, es más apropiado llamar a una expresión regular una expresión regular. La sintaxis regular se basa en un antiguo lenguaje perl.
crear:
//正则的作用是描述字符的规则，检查字符存不存在有没有问题
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
cuantificador:
- También llamado calificador, puede especificar cuántas veces debe aparecer un grupo dado de expresiones regulares para satisfacer la coincidencia.
- Los cuantificadores se pueden usar para establecer el número de ocurrencias de un contenido. Nota: Los cuantificadores solo funcionan en el contenido que se encuentra delante de ellos.
- Empieza con qué ^ termina con qué $
- {n}: coincide exactamente con n ocurrencias del carácter anterior
- {n,}: coincide con el carácter anterior más de n veces, sin límite
- {n,m}: Coincide con un carácter de n a m veces
- * Indica que el número de veces permitido es de 0 a infinito positivo, presente o no
- + indica que la cantidad de veces permitida es de 1 a infinitas veces positivas, al menos una
- ?Indica que el número de veces permitido es de 0 a 1, con un máximo de 1 ocurrencia
- () significa un grupo
expresión:
- [abc] encuentra cualquier carácter entre corchetes.
- [0-9] encuentra cualquier número del 0 al 9.
- [az] Encuentra cualquier carácter desde la minúscula a hasta la minúscula z.
- [AZ] Encuentra cualquier carácter desde la A mayúscula hasta la Z mayúscula.
- [Az] Encuentra cualquier carácter desde la A mayúscula hasta la z minúscula.
- Nota: ponga ^ en la expresión para excluir [^0-9]
Metacaracteres (caracteres de escape):
- \d - [0-9] dígitos
- \w - [a-z0-9_] dígitos, letras, guión bajo
- \s —— carácter en blanco, verifique si hay un espacio
- \b - coincidir con un límite de palabra
- \D - [^0-9] no es un número
- \W - [^a-z0-9_] no es un número, letra, guión bajo
- \S - carácter que no es un espacio en blanco
" . " Indica cualquier carácter Nota: " . " no puede verificar la nueva línea\n