前端入门到熟悉day22

js事件绑定

01js入口函数

// 原生js的入口函数只有一个多个还是会读取最后一个入口函数只执行最后一个入口函数的逻辑

window.onload=function(){

console.log('我是入口函数1')

alert('sdasdasddas')

}

window.onload=function(){

console.log('我是入口函数2')

}

window.onload=function(){

console.log('我是入口函数3')

}

</script>

02事件绑定

1、事件绑定的几种方式

在Javascript中，事件绑定一共有3种方式：

① 行内绑定

② 动态绑定

③ 事件监听

事件绑定

IE方式

attachEvent(事件名称, 函数)，绑定事件处理函数

detachEvent(事件名称, 函数)，解除绑定

DOM方式

addEventListener(事件名称,函数, 捕获)

removeEventListener(事件名称, 函数, 捕获)

window.onload = function () {

var oBtn = document.getElementById('btn1');

//传统的添加事件如果添加的是相同的多个事件它只会执行最后一个

// oBtn.onclick=function(){

// alert('a');

// }

// oBtn.onclick=function(){

// alert('b');

// }

// attachEvent(事件名称, 函数)，绑定事件处理函数

//IE低版本事件绑定

// oBtn.attachEvent('onclick',function(){

// alert('a');

// })

// oBtn.attachEvent('onclick',function(){

// alert('b');

// })

// DOM方式解决高版本浏览器的兼容

// addEventListener(事件名称,函数, 捕获)

// oBtn.addEventListener('click',function () {

// alert('a');

// },false);

// oBtn.addEventListener('click',function () {

// alert('bbbb')

// },false)

}

</script>

03事件绑定兼容处理

window.onload = function () {

var oBtn = document.getElementById('btn1');

//传统的添加事件如果添加的是相同的多个事件它只会执行最后一个

// oBtn.onclick=function(){

// alert('a');

// }

// oBtn.onclick=function(){

// alert('b');

// }

// attachEvent(事件名称, 函数)，绑定事件处理函数

//IE低版本事件绑定

// oBtn.attachEvent('onclick',function(){

// alert('a');

// })

// oBtn.attachEvent('onclick',function(){

// alert('b');

// })

// DOM方式解决高版本浏览器的兼容

// addEventListener(事件名称,函数, 捕获)

// oBtn.addEventListener('click',function () {

// alert('a');

// },false);

// oBtn.addEventListener('click',function () {

// alert('bbbb')

// },false)

if (oBtn.attachEvent) {

oBtn.attachEvent('onclick', function () {

alert('a');

});

oBtn.attachEvent('onclick', function () {

alert('b');

});

} else {

oBtn.addEventListener('click', function () {

alert('aaa');

}, false);

oBtn.addEventListener('click', function () {

alert('bbbb');

}, false);

}

</script>

04事件绑定的封装

//事件绑定兼容性封装

function myaddEvent(obj,ev,fn) {

if(obj.attachEvent){

obj.attachEvent('on'+ev,fn)

}else{

obj.addEventListener(ev,fn,false);

}

window.onload=function(){

var oBtn=document.getElementById('btn1');

myaddEvent(oBtn,'click',function () {

alert('aaaa')

})

myaddEvent(oBtn,'click',function () {

alert('bbbbb')

})

}

</script>

05删除事件绑定

document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {

document.getElementById("demo").innerHTML = Math.random();

}

function removeHandler() {

document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

}

// removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。

// 注意：如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如上实例所示 (myFunction)。

// 匿名函数，类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的。

//eg:

// btn3.addEventListener('click',function(){alert("this.value");},false); //添加事件有效

// btn3.removeEventListener('click',function(){alert("this.value");},false); //删除事件无效

// 解决方法

// btn3.addEventListener('click',function(){alert("this.value");},false);

// btn3.removeEventListener('click',function(){alert("this.value");},false);

// 这两行代码中的function(){alert(alert("this.value"));}看上去是同一个东西，实际上是不同的对象，而removeEventListener要求函数必须一样。

// 所以addEventListener最好还是用将匿名函数赋值给某个变量

// addEventListener('click',showValue,false);

// removeEventListener('click',showValue,false);

</script>

06删除事件绑定兼容处理

var x = document.getElementById("myDIV");

if (x.addEventListener) {

x.addEventListener("mousemove", myFunction);

} else if (x.attachEvent) {

x.attachEvent("onmousemove", myFunction);

}

function myFunction() {

document.getElementById("demo").innerHTML = Math.random();

}

function removeHandler() {

if (x.removeEventListener) {

x.removeEventListener("mousemove", myFunction);

} else if (x.detachEvent) {

x.detachEvent("onmousemove", myFunction);

}

</script>

正则表达式

01search()

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。（查找）

var str='dasdadadeeefrtg';

alert(str.search('z'))

//search 要是找得到的返回的是字符的index index是从0开始的要是没有的话就返回-1

</script>

02substring

substring() 方法用于提取字符串中介于两个指定下标之间的字符。（获取子字符串）

var str='abcdefg';

// alert(str.substring(1)); bcdefg 就是从下标为1开始一直获取到最后

// alert(str.substring(2,5)); cde

// 起始结束不包括结束位置

</script>

03charAt

charAt() 方法可返回指定位置的字符。（获取某个字符）

请注意，JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串。

var str='abcdefg';

alert(str.charAt(2));

//charAt(index) 这个方法能够通过下标拿到字符串里面的具体字符下标从0开始

</script>

04split

split()方法用于把一个字符串分割成字符串数组。（分割字符串，获得数组）

var str='12-34-56-78';

var arr=str.split('-');

alert(arr);

// console.log(arr);

</script>

05找出字符串中的所有数字

var str = '12 fff 87 er333 -=-=fa80'

var arr = [];

var tmp = '';

for (var i = 0; i <= str.length; i++) {

if (str.charAt(i) >= '0' && str.charAt(i) <= '9') {

tmp += str.charAt(i);

} else {

if (tmp) {

arr.push(tmp);

tmp = ''//避免重复添加进来

}

console.log(arr);

</script>

06找出字符串中的所有数字02

var str = '12 fff 87 er333 -=-=fa80'

console.log(str.match(/\d+/g));

</script>

07第一个正则表达式

什么叫“正则”

规则、模式

强大的字符串匹配工具

是一种正常人类很难读懂的文字

RegExp对象

JS风格——new RegExp(“a”, “i”)

perl风格——/a/i

var str='abcdefg';

var re=new RegExp('B','i') //i 忽略大小写 ignore

alert(str.search(re));

</script>

08第一个正则表达式02

var str='abcdefg';

// var re=/A/i //i 忽略大小写 ignore

alert(str.search(/A/i));

</script>

09正则

var str='asdf 03 23 dasdsadsda';

// alert(str.search(/\d/));

alert(str.match(/[0-9]+/g));

// \d 数字 [0-9] 全局匹配：g——global

</script>

10match

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

var str='asdf 43 566 csc33';

var re=/\d/g;

alert(str.match(re));

//计算机非常懒他只会帮你找到第一个数字

</script>

11match

var str='asdf 43 5666 csc33';

var re=/\d+/g; //+ 量词

alert(str.match(re));

//计算机非常懒他只会帮你找到第一个数字

</script>

12replace

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

//你不是用正则的情况下只替换第一个

// var str='abc aaa erw';

// alert(str.replace('a','0'));

var str='sdafrgrggafdfdsafdsfsdaaa'

var re=/g/g;

alert(str.replace(re,'0'))

</script>

13敏感词过滤

window.onload=function(){

var oTxt1=document.getElementById('txt1');

var oTxt2=document.getElementById('txt2');

var oBtn=document.getElementById('btn1');

oBtn.onclick=function(){

var re=/广州|百度|淘宝/g

oTxt2.value=oTxt1.value.replace(re,'*')

}

</script>

14方括号

var str='apc xpc ppc bpc spc tpc cpc';

// var re=/[apc]pc/g []或的意思

alert(str.match(re));

</script>

15过滤html标签

window.onload=function(){

var oTxt1=document.getElementById('txt1');

var oTxt2=document.getElementById('txt2');

var oBtn=document.getElementById('btn1');

oBtn.onclick=function(){

// var re=/[^<>]+/g <><>

var re=/<[^<>]+>/g //^除了什么以外过滤html标签

oTxt2.value=oTxt1.value.replace(re,'');

}

</script>

16邮箱验证

window.onload=function(){

var oTxt=document.getElementById('txt1');

var oBtn=document.getElementById('btn1');

oBtn.onclick=function(){

//忽略大小写

// var re=/^\w+@[a-z0-9]+\.[a-z]+$/i;

var re=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/i

if(re.test(oTxt.value)){

alert('合法邮箱')

}else{

alert('你Ya写错了')

}

</script>

前端入门到熟悉day22

猜你喜欢