js事件的绑定

最新推荐文章于 2022-06-22 22:47:53 发布

最love酸奶

最新推荐文章于 2022-06-22 22:47:53 发布

阅读量244

点赞数

分类专栏： javascript基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_46065861/article/details/120005360

版权

javascript基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JS操作css代码

注意js无法获取内嵌(css设置的)的样式,只能获取行内的

必须利用封装的函数获取内嵌属性先外部引入getStyle.js

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="getStyle.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .two{
            width: 500px;
            height: 500px;
            background: #0085FB;
            border-radius: 2px;
        }
    </style>
</head>
<body>
    <div style="width: 300px; height: 300px; background: orange;" class="one"></div>
    <div class="two"></div>
    <script type="text/javascript">
        var one=document.querySelector('.one');
        var two=document.querySelector('.two');
        console.log(one.style.width)//300px
        console.log(one.style.height)//300px

        // 设置css属性
        one.style.background='lightgreen';

        // 当使用的css属性有-时间,则可以省略进行首字母大写
        one.style.borderRadius='30px'

        // js无法获取内嵌(css设置的)的样式,只能获取行内的
        console.log(two.style.width)
        console.log(two.style.height)

        // 利用封装的函数获取内嵌属性  先外部引入getStyle.js
        var res=getStyle(two,'width')
        console.log(res)
    </script>
</body>

getStyle.js

function getStyle(obj,name){
    if(window.getComputedStyle){
        return getComputedStyle(obj,null)[name];
    }else{
        return obj.currentStyle[name];
    }
}

事件的绑定

两种方式

方式二可以获取事件e

IE的低版本浏览器不能获取事件e

需要解决兼容

取消事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 50px;
				margin: 2px auto;
				background: #ccc;
			}
		</style>
	</head>
	<body>
		<div onclick="clickme()">不想多作业</div>
		<div>不想多作业</div>
		<script type="text/javascript">
		
			// 方式一
			function clickme(){
				console.log('点击了我')
			}
			
			
			
			// 方式二
			var div=document.querySelectorAll('div')[1];
			
			//IE的低版本浏览器不能获取事件e,只支持window.event
			div.onclick=function(e){
				// 解决了事件兼容
				var e=e||window.event;
				console.log(e)
				console.log('点击了第二个div')
			}
			
			
			// 取消事件绑定
			// setTimeout(function(){
			// 	div.οnclick=null;
			// },1000)
			
		</script>
	</body>
</html>

事件冒泡

注意一般出现再嵌套和父子同样的事件

点击了儿子，父亲也响应了

解决冒泡有两种方法

e.stopPropagation();

IE解决冒泡要用

e.cancelBubble=true;

没有兼容性写法

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .outer{
            width: 500px;
            height: 300px;
            background: royalblue;
            margin: 0 auto;
        }
        .inner{
            width: 200px;
            height: 200px;
            background: red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <script type="text/javascript">
        var outer=document.querySelector('.outer')
        var inner=document.querySelector('.inner')

        outer.onclick=function(){
            console.log('外层点击')
        }
        inner.onclick=function(e){
            console.log('内层被点击')
            // 解决事件的兼容
            var e=e||window.event;

            // 方法一:解决事件冒泡
            e.stopPropagation();

            // 方法二:
            e.cancelBubble=true;
        }
    </script>
</body>

兼容性写法

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .outer{
            width: 500px;
            height: 300px;
            background: royalblue;
            margin: 0 auto;
        }
        .inner{
            width: 200px;
            height: 200px;
            background: red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <script type="text/javascript">
        var outer=document.querySelector('.outer')
        var inner=document.querySelector('.inner')

        outer.onclick=function(){
            console.log('外层点击')
        }
        inner.onclick=function(e){
            console.log('内层被点击')
            // 解决事件的兼容
            var e=e||window.event;

            // // 方法一:解决事件冒泡
            // e.stopPropagation();

            // // 方法二:解决事件冒泡
            // e.cancelBubble=true;

            // 兼容性解决冒泡的写法
            e.stopPropagation? e.stopPropagation():e.cancelBubble=true;
        }
    </script>
</body>

鼠标事件

开头都是onmouse

移入移出必须配对使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 300px;
                height: 300px;
                background: lightblue;
                margin: 2px auto;
            }
        </style>
    </head>
    <body>
        <div onclick="clickme(this)">onclick</div>
        <div ondblclick="clickme(this)">双击</div>
        <div onmousedown="clickme(this)">按下鼠标</div>
        <div onmouseup="clickme(this)">鼠标弹起</div>
        <div onmousemove="clickme(this)">移动鼠标触发</div>
        <div onmouseover="clickme(this)">鼠标移入,配对使用</div>
        <div onmouseout="clickme(this)">鼠标移出,配对使用</div>
        <div onmouseenter="clickme(this)">鼠标移入,没有事件冒泡</div>
        <div onmouseleave="clickme(this)">鼠标移出,没有事件冒泡</div>
        <div oncontextmenu="clickme(this)">鼠标右键被点击</div>
        <script type="text/javascript">
            function clickme(obj){
                obj.style.background='pink';
            }
        </script>
    </body>
</html>

阻止默认事件

e.preventDefault阻止默认事件

Ie低版本采用returnValue =false

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                width: 20px;
                height: 20px;
                background: lightblue;
                display: none;
            }
        </style>
    </head>
    <body>
        <div></div>
        <a href="www.baidu.com" onclick="clickMe()">百度</a>
        <script type="text/javascript">

            // 当右键被点击时触发
            document.oncontextmenu=function(e){
                var e=e||window.event;

                // 兼容性写法
                e.preventDefault? e.preventDefault():e.returnValue=false
                console.log(e)
                var div=document.querySelector('div');
                div.style.display='block';
                console.log('右键默认被阻止')
            }


            var a=document.querySelector('a')

            a.onclick=function(e){
                var e=e||window.event;
                // 阻止默认事件,w3c
                e.preventDefault()
                console.log('超链接被点击')
            }
        </script>
    </body>
</html>

获取鼠标信息的获取

e.button 获取鼠标当前按按下的是哪个键

W3C 0 左键 1 滚轮 2 右键
IE 1左键 2 右键 4 滚轮

获取鼠标的位置

screenX 获取鼠标到屏幕左侧的距离

screenY 获取鼠标到视窗顶部的距离

clientX 获取鼠标到视窗(内容)左侧的距离

clientY 获取鼠标到视窗(内容)顶部的距离

offsetX 获取鼠标距离当前操作元素的左侧距离 (相对于父级)

offsetY 获取鼠标距离当前操作元素的顶部距离

offsetLeft获取当前对象相当于于第一个定位父级的偏移量。

<body>
    <div class="box"></div>
    <script>	
        var div = document.querySelector('div.box')
        div.onclick = function(e){
            var e = e || window.event;

            console.log(e.offsetX)
            // console.log(e.offsetY)

            console.log(e.clientX)
            // console.log(e.clientY)

            console.log(e.screenX)
            // console.log(e.screenY)
        }
    </script>
</body>

键盘事件

检测特殊的键是否被按下返回boolean值，当前有没有对应的键被按下

e.ctrlKey

e.shiftKey

e.altKey
e.key表示具体的按键

onkeydown按键按下

onkeyup按键弹起

onkeypress键盘按下就触发（只包含数字、字母键盘）

注意先执行down,再press，最后up

<script type="text/javascript">
    document.onkeydown=function(){

    }

    document.onkeyup=function(){

    }

    document.onkeypress=function(){

    }
</script>

keyCode 对于 keydown 事件，该属性声明了被敲击的键生成的 Unicode 字符码左->37 上->38 右->39 下->40

which 返回键盘敲击按键生成的unicode编码

<script>
	console.log(e.keyCode)
    console.log(e.which)
</script>

页面事件

window是最大的

window.onload，当页面加载时直接触发

window.onunload:当页面关闭的时候触发可以取消事件绑定

window.onresize:当窗口大小发生改变触发

window.onscroll:滚动条滚动时触发

scrollTop:获取被卷去的高度

window.onmousewheel鼠标滚动时触发 可以监听鼠标滚的方向， 也可以实现全屏切换,原js不支持这个

<script type="text/javascript">
    window.onload=function(){
        console.log('页面加载时触发')
    }

    window.onunload=function(){
        console.log('看不到关闭')
    }

    window.onresize=function(){
        console.log('窗口发生改变')
    }
    window.scroll=function(){
        console.log('滚动条滚动触发')
    }
    window.onmousewheel=function(){
        console.log('鼠标滚动触发')
    }
</script>

一些属性

scrollTop获取滚动过的区域到顶部的距离

他是整数，如果一个元素不能滚动，他的scrollTop设置为0

判断元素是否滚到底

可以滚的高度-滚过得高度=视窗的高度

element.scrollHeight-element.scrollTop=element.clientHeight

position:stick取消定位

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 100%;
            height: 2000px;
            background: #0085FB;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- <div class="head"></div>
<div class="mian"></div> -->
    </div>
    <script type="text/javascript">
        window.onload=function(){
            console.log('页面加载时触发')
        }

        window.onunload=function(){
            console.log('看不到关闭')
        }

        window.onresize=function(){
            console.log('窗口发生改变')
        }
        window.onscroll=function(){
            console.log('滚动条滚动触发')
        }
        window.onscroll=function(){
            console.log('页面滚动触发')
            // 下面是兼容写法
            console.log(document.documentElement.scrollTop||document.body.scrollTop)

        }
    </script>
</body>

表单事件

focus()聚焦时触发用于可以输入的

onblur()失焦时触发

select下拉框

onchange()下拉框使用这个,当域里面的值改变触发,也可以用于输入框

和focus和onclick()差不多

onsubmit点击确认按钮时间触发

注意onsubmit和onreset是个整个表单绑定，返回boolean值，return false阻止表单提交 return true允许表单提交

onreset点击重置按钮时触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            input{
                /* 去掉边框 */
                padding: 2px 3px;
                border:1px solid #333;
                /* 去掉外边框 */
                outline: 0;
                border-radius: 30px;
            }
            input.active{
                border:1px solid #00FFFF;
            }
            span{
                font-size: 12px;
                color: #999;
            }
        </style>
    </head>
    <body>
        <!-- 表单 -->
        <form action="" method="post" id="form">
            姓名:<input type="text" id="user" value=""/><span>请输入用户名</span><br>
            密码:<input type="password"/><br>
            <input type="submit" value="注册"/>
            <input type="reset" value="重置"/>
        </form>

        <!-- 下拉框 -->
        <select name="food" id="food">
            <option value="凉面">凉面</option>
            <option value="牛奶">牛奶</option>
            <option value="酸奶">酸奶</option>
            <option value="稀饭">稀饭</option>
        </select>



        <script type="text/javascript">
            var user=document.querySelector('#user');

            var user_flag=false;

            // 聚焦改变颜色
            user.onfocus=function(){
                // this表示当前对象
                this.setAttribute('class','active')
            }

            // 失焦时触发
            user.onblur=function(){
                this.removeAttribute('class')

                // 获取输入框的内容
                console.log(this.value)

                // 判断输入的用户名是否正确(正则表达式)
                // 定义规则,用户名由数字 字母 下划线组成,且六位以上
                var pattern=/^\w{6,}$/;

                console.log(pattern.test(this.value))//

                if(pattern.test(this.value)){
                    this.nextElementSibling.innerHTML='√';
                    this.nextElementSibling.style.color='green';
                    user_flag=true;
                    // 还得连接数据库 查看当前用户名是否被占用
                }else{
                    this.nextElementSibling.innerHTML='x用户名格式不对';
                    this.nextElementSibling.style.color='red';
                    user_flag=false;
                }
            }


            // 下拉框
            var food=document.querySelector('#food');
            // 监听域的改变
            food.onchange=function(){
                console.log(this.value)//获取当前的值  凉面
            }

            // onsubmit必须给表单绑定，return false阻止表单提交
            // return true允许表单提交
            var form=document.querySelector('#form')
            form.onsubmit=function(){
                // 当满足if里面的条件才能提交
                if(user_flag){
                    // 允许提交
                    return true;
                }else{
                    // 阻止提交
                    return false;
                }
            }

            // 
            form.onreset=function(){
                var res=confirm('你确定要重置所有内容吗');
                // 点击确认res就为true,否正为false 
                return res;
            }
        </script>
    </body>
</html>

拓展:

创建option

var option=new Option(值,下标)

事件句柄

addEventListener(eventName,listener,false)来添加绑定事件，事件的On全部不要

注意可以支持绑定多个事件(可以相同事件),可以决定冒泡方向，可以移除

false是冒泡，true是委派

removeEventListener(eventName,listener)移除事件绑定

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background: lightblue;
        }
    </style>
</head>
<body>
    <div id=""></div>
    <script type="text/javascript">
        var div=document.querySelector('div');
        // addEventListener(eventName,listener,false)
        var listener1=function(){
            console.log(111)
        }
        var listener2=function(){
            console.log(222)
        }

        div.addEventListener('click',listener1,false);
        div.addEventListener('click',listener2,false);


        // removeEventListener(eventName,listener)
        setTimeout(function(){
            div.removeEventListener('click',listener1)//2秒后移除listenner1事件
        },2000)
    </script>
</body>

IE下

attachEvent()添加事件句柄

detachEvent()移除事件句柄

兼容性写法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background: lightblue;
            }
        </style>
    </head>
    <body>
        <div></div>

        <script type="text/javascript">
            var Listener={
                add:function(obj,eventName,callback){
                    // 判断是否为IE浏览器
                    if(obj.addEventListener){
                        obj.addEventListener(eventName,callback,false)
                    }else{
                        obj.attachEvent('on'+eventName,callback)
                    }
                },
                remove:function(obj,eventName,callback){
                    if(obj.removeEventListener){
                        obj.removeEventListener(eventName,callback)
                    }else{
                        obj.detachEvent('on'+eventName,callback)
                    }
                }
            }

            var div=document.querySelector('div');
            Listener.add(div,'click',function(){
                console.log(111)
            })
        </script>
    </body>
</html>

this的指代问题

this指代

在es5中this的指代和定义的位置无关,与调用的位置有关

this指代当前对象

es5中this的指代情况

1（经常出现）this在普通函数(比如定时器、foreach)内调用，this指代全局对象window，对应的变量为全局变量

<script type="text/javascript">
    var name='张三';
    function fun(){
        var name='李四';
        console.log(name)//李四   全局变量和局部同时存在时优先用局部
        console.log(this.name)//张三   this指代全局变量window，对应的变量为全局变量
    }
    fun()
</script>

2.this在对象内调用，指代当前对象(好好看)

方式一 this指代实例化对象(用的时候建议直接用this不要用实例化对象)

<script type="text/javascript">
    var obj={
        name:'张三',
        age:20,
        play:function(){
            console.log(this===obj)//true   this指代实例化对象(这个var后面的对象)
            console.log(this.age)//20
            console.log(this.name)//张三
        }
    }
    obj.play()
</script>

方式二 this作为实参，传入的是当前操作的对象

<body>
    <button onclick="demo(this)"></button>
    <script type="text/javascript">
        function demo(obj){
            console.log(obj)//<button οnclick="demo(this)"></button>

            obj.style.background='blue'//改为蓝色
        }
    </script>
</body>

方式三 (重点)只要有绑定事件，里面的this都指代当前对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            ul>li{
                width: 200px;
                height: 50px;
                background: blue;
                margin: 2px 0px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <script type="text/javascript">
            var oli=document.querySelectorAll('ul li');
            for(var i=0;i<oli.length;i++){
                // 为当前对象定义一个属性index接受i的值
                oli[i].index=i;

                oli[i].onclick=function(){
                    // console.log(i)//4 li的个数
                    this.style.background='red';//this指代当前点击的， 点击一下就红色,点击哪个是哪个对象
                    console.log(this.index)// 0 1 2 3
                }
            }
        </script>
    </body>
</html>

方式四(重点易错点)

注意 定时器或则forEach内的函数为普通函数(一般有function的就是普通函数)

<body>
    <h2>好</h2>
    <script type="text/javascript">
        var h2=document.querySelector('h2');
        h2.onclick=function(){
            console.log(this)//h2

            var _this=this;
            // 定时器内的函数为普通函数
            setTimeout(function(){
                console.log(this)//window
                console.log(_this)
                _this.innerHTML='我改了';
            },1000)
        }
    </script>
</body>

3.this在构造函数中,this指代当前实例化对象

constructor一般为构造函数,拿来创建对象

<script type="text/javascript">
    // this在构造函数中使用
    // constructior一般为构造函数

    // 自定义构造函数
    function test(name,age){
        // 构造函数内的this指代当前实例化对象cat
        // 定义对象属性
        this.name=name;
        this.age=age;

        // 定义对象方法
        this.play=function(){
            console.log(this.name+'今年已经'+this.age+'岁')
        }
    }

    // 用构造函数创建对象
    var cat =new test('流浪猫',1);
    console.log(cat)
    console.log(typeof cat)//object

    console.log(cat.name)//流浪猫
    cat.play()//流浪猫今年已经一岁了
</script>

this在apply()、call()、bind()里面的调用

this指代切换后的对象(就是把this换成了其它)

三个方法都是切换对象

三个 若没有传入参数，则代表全局对象window

区别

bind()切换对象，返回一个函数

apply()只允许传入数组

call()和bind()传入一个一个的数

A.play.apply(B,[])

A.play.call(B,a,b,c)

A.play.bind(B,a,b,c)返回一个函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            // 切换对象，this指代切换后的对象
            var name='李四';

            var person={
                name:'张三',
                age:20,
                paly:function(a,b,c){
                    console.log(a,b,c,this.name+'玩')
                }
            }

            var obj={
                name:'王霸',
                age:23,
                say:function(){
                    console.log(this.name+'说')
                }
            }

            obj.say()//王霸说

            obj.say.apply()//李四说

            obj.say.apply(person)//张三说

            obj.say.call(person)//张三说

            // bind()返回一个函数
            var res=obj.say.bind(person)
            res()//张三说

            //apply()  bind()  call()  传参
            person.paly.apply(obj,[1,2,3])//1,2,3,王霸玩
            person.paly.call(obj,1,2,3)//1,2,3,王霸玩
            var res1=person.paly.bind(obj,[1,2,3])//1,2,3,王霸玩
            res1()//1,2,3,王霸玩
            var arr=[1,2,3,4,5];
            var max=Math.max.apply(Math,arr)
            console.log(max)//5

        </script>
    </body>
</html>

缓存

cookie session sessionStorage cookieStorage (最后两个统称webStorage)

区别

cookie客户端缓存在浏览器(本地计算机)
cookie存储大小4kb
存储的信息不安全，只能存较为简单的数据
cookie存储的数据会随着每一次http请求发送，占用带宽
session是服务器端缓存,返回一个sessionID,存储在cookie中
session有域、地址的概念、失效事件、默认不设置则为session，则会话结束(浏览器关闭就失效)
重要的放在session
不重要的放在cookie
cookie中有域，不同的域之间不能直接访问
webStorage的特点
- 存放在客户端浏览器
- 存储大小为5M
- 发起http请求时，不会携带缓存数据。不会占用带宽
locaLStorage关闭浏览器不失效，除非手动删除
sessionStorage关闭就失效

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">

            // 设置Cookie
            // 同名的cookie只能有一个值
            // document.cookie='name=aaa;path=/;max-age=3600';
            // max-age单位十秒

            // 设置缓存两个小时后失效,并且变为UTC
            var time=new Date();
            time.setMinutes(time.getMinutes()+120)
            document.cookie='name=aaa;path=/;expires='+time.toUTCString();
            console.log(document.cookie)//name=aaa

            /* 
				封装一个setCiikie的函数
				name cookie的名字
				value cookie的值
				expires cookie的失效时间

			 */

            function setCookie(name,value,Minutes){
                var time=new Date();
                time.setMinutes(time.getMinutes()+Minutes)
                document.cookie=''+name+'='+value+';path=/;expires='+time.toUTCString();
            }

            setCookie('pass',123456,10)

            /* 
				cookie失效
					1.时间过期
					2.人为删除
			 */

            // cookie若想失效,则需要让时间过期
            setTimeout(function(){
                setCookie('username',false,-1)
            })
        </script>
    </body>
</html>

web Storage和cookie的异同

webStorage也叫本地存储

共同点：都保存在本地浏览器中，和服务器端的session的机制不同
生命周期（缓存存活的最大时间）：
cookie:会设置一个expires（max-age）则cookie会在指定的时间失效，若没有设置结束时间，则默认为session,关闭浏览器则失效

localStorage:关闭浏览器数据仍然存在，除非手动清除

sessionStorage:仅存在于会话期间（关闭浏览器失效）
localStorage和sessionStorage的区别：

localStorage:关闭浏览器数据仍然存在，除非手动清除

sessionStorage:仅存在于会话期间（关闭浏览器失效）

web Storage和cookie的异同

同：sessionSrotage、localStorage、cookie都在浏览器上
异:1.大小
cookie的存储大小最多4Kb
localStorage和seesionStorage一般可存储5M或者更大

2.失效时间
localStorage:关闭浏览器数据仍然存在，除非手动清除
sessionStorage:仅存在于会话期间（关闭浏览器失效）
cookie可以设置失效时间**

封装

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">

            // 最简单的封装
            var person={
                name:'张三',
                age:18,
                say:function(){
                    console.log(this.name+'今年'+this.age+'岁')
                }
            }

            console.log(person.name)//张三
            person.say()

            // 构造函数
            function Person(name,age,sex){

                // 公有属性 在外面看得到
                this.name=name;
                this.age=age;

                // 私有属性(var声明) 外面看不到
                var sex=sex;

                // 公有方法
                this.say=function(){
                    console.log('我的性别:'+sex)
                }
            }

            var people=new Person('张三',20,'男')
            console.log(people)
            console.log(people.name)//张三
            console.log(people.age)//男

            people.say()//我的性别为 男
        </script>
    </body>
</html>

继承

注意每个构造方法都必须定义一个初始化方法

通过apply 和call继承

通过原型链

Teacher.prototype=new Person()

原型链:当前对象没有该属性和方法时，自动向上查找

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            function Person(name,age,sex){
                // 定义公有属性
                this.name=name;
                this.age=age;
                this.sex=sex;

                // 定义公有方法
                this.show=function(){
                    console.log('age:'+this.age+',sex:'+this.sex)
                }
            }

            var people=new Person('张三',20,'男');
            console.log(people.name)//张三
            people.show()//age:20,sex:男


            // 方式一 通过apply和call的方式继承
            // 定义一个学生
            function Student(name,age,sex,score){
                // this.name=name;
                // this.age=age;
                // this.sex=sex;
                this.score=score;

                // 通过apply切换对象,继承Person对象内的属性和方法 this在构造函数中代表实例化对象
                // Person.apply(this,[name,age,sex])
                //this是student这个实例化对象
                Person.call(this,name,age,sex)
            }

            var student=new Student('李四',21,'男',90)
            console.log(student)//
            console.log(student.name)//李四




            // 方式二 通过prototype继承(推荐使用)
            Teacher.prototype=new Person('王霸',18,'男');

            function Teacher(type){
                this.type=type;
            }
            console.log(Teacher.prototype)

            var teacher=new Teacher('讲师')
            console.log(teacher)
            console.log(teacher.name)//王霸
            console.log(teacher.age)//18
            console.log(teacher.sex)//男
            console.log(teacher.type)//讲师
            teacher.show()//age:18,sex:男

        </script>
    </body>
</html>

非对象的继承

引用型概念(变量和内容分开的)

数组、对象叫做引用型

非浅和深的引用型赋值只是让两个的指针指向了相同的内容区域，故只要内存区域的内容发生改变则均会改变

<script type="text/javascript">
    var a=10;
    var b=a;

    b=20;
    console.log(b)//20
    console.log(a)//10


    // 对象类型为引用型 变量指向一块区域     引用型概念(变量和内容分开的)
    var aa={
        name:'张三',
        city:['重庆','上海','深圳']//数组、对象叫做引用型
    }

    var bb=aa;//引用类型赋值只是让bb的指针指向了aa相同的内容区域，故只要指向的区域的内容发生改变则两个会改变
   console.log(aa)//张三
    console.log(bb)//张三
    bb.name='李四';
    console.log(bb)//李四
    console.log(aa)//李四
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F2j4HTIq-1630328009189)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210814111753932.png)]

浅拷贝：简单的赋值,不会深入一个个赋值(如果有引用型拷贝过去的是指向同一个内容区域),改变了其中一个引用类型，另一个引用类型也会跟着变，非引用类型改变了这一个，另外一个也不会变

<script>
var obj={
    name:'张三',
    city:['重庆','上海','深圳']//数组叫则引用型
}


function copy(obj){
    var newObj={};
    // 遍历对象
    for(var key in obj){
        newObj[key]=obj[key]
    }
    return newObj
}

    var newObj=copy(obj);
    console.log(obj)
    console.log(newObj)
    obj.name='老王'

    console.log(obj)//老王
    console.log(newObj)//张三
    obj.city.push('西藏')
    console.log(obj)//多了西藏
    console.log(newObj)//多了西藏
</script>

深拷贝(还有concat来):可以理解为深入拷贝,把值一个个赋值过来，改变了其中一个引用类型和值类型，另一个引用类型和值类型也不会变

过程：创建一个空数组，来依次赋值

<script>
    var obj={
        shop:[
            {
                name:'手机',
                price:'6680'
            },
            {
                name:'电脑',
                price:'5000'
            }
        ],
        name:'张三',

        city:['重庆','上海','深圳']//数组叫则引用型
    }

  function deepCopy(obj,arr){
      // 定义一个新的对象接收拷贝的数据
      var newObj=arr||{};

      // 循环遍历对象
      for(var key in obj){
          // 判断是否值类型
          if(typeof obj[key]=='object'){
              // 判断值类型是数组还是对象
              newObj[key]=obj[key].constructor==Array?[]:{},

                  // 调用自己
                  deepCopy(obj[key],newObj[key]);//拿newObj[key]去装obj[key]的值
          }else{
              newObj[key]=obj[key]
          }
      }

      // 将新生成的对象进行返回
      return newObj;
  }
    var dd=deepCopy(obj)
    dd.name='王霸'
    console.log(dd)
    console.log(obj)
    dd.city.push('成都')

    console.log(dd)
    console.log(obj)
</script>

正则表达式

定界符
原子
元字符
模式修正符
函数

需要掌握:exec、test、元字符、取消贪婪模式

正则表达式的定义

要求:看懂，写一些简单的，可以百度查

一个具有特殊字符的字符串

找到符合条件的字符串

正则作用:

表单验证
查找字符串
查找字符串并替换

`正则的定义`

方式一:通过对象原型方式定义(不推荐)
方式二：通过定界符定义

<script type="text/javascript">
    //方式一：通过对象原型方式定义(不推荐)
    var pattern = new RegExp('a');// a是规则
    console.log(pattern)// /a/

    // 2.通过定界符定义  /正则规则/  
    var pattern = /a/;// a是规则
    console.log(pattern)// /a/  匹配字符串里面有字母a的,真正的内容是//之间的,不要在之间乱写+或则''之类
</script>

`原子`

每一个字符都是一个原子
特殊的原子

每个字符都是一个原子(数字、字母、下划线、任意符号)
每一个[]代表一个原子，[]内的内容为可选的字符任意一个
中括号内简写

注意第一点
[]内出现^且在所有字符之前 代表除了[]内的字符以外符合规范
[0-9]代表数字0-9任意一个数字
[a-zA-Z]代表任意一个字母
[0-9a-zA-Z_]代表数字、字母、下划线任意一个

{}代表重复前面一个原子指定的次数
{m}代表重复前面的原子m次
{m,}代表重复前面的原子至少m次
{m,n}代表重复前面的原子至少m次,最多n次
\d 代表0-9 
\D 代表除了0-9以外的字符 相当于[^0-9]

\w 代表数字、字母、下划线 相当与[0-9a-zA-Z_]
\W 代表除了数字、字母、下划线以外的字符 相当于[^0-9a-zA-Z_]
	
\s 代表空白符(空格、换行符、制表符)
\S 代表除了空白符以外的字符

  
  ```html
  <script>	
  	var pattern=/[^0-9]/;
      vat str=9;//null
      var str=a;//a
      var res=pattern.exec(str)
      console.log(res)
  </script>

<script type="text/javascript">
    var pattern = /a/;
    var str='abcabc';
    var res=pattern.exec(str)
    console.log(res)//[a]


    var pattern=/abc/
    var str='a1b1c1';//null
    var str='abcabc';//[abc]
    var res=pattern.exec(str)
    console.log(res)

    // 匹配任意的一位数
    var pattern=/[0-9]/;//代表数字0-9  ASCII的码值为48-57 码值连续：则中间可以省略
    var str=5;
    var res=pattern.exec(str)
    console.log(res)

    // 匹配任意的一位字母
    var pattern=/[A-Za-z]/;//A-Z 65-90 a-z 97-122

    // 用户名为六位的数字、字母、下划线组成
    var pattern=/[0-9A-Za-z_]{6}/;//myadmin
    var pattern=/[0-9A-Za-z_]{6,12}/;//myadminmyadmin
    var pattern=/[0-9A-Za-z_]{6,}/;//myadminmyadminmyadmin
    var str='myadminmyadminmyadmin';
    var res=pattern.exec(str)
    console.log(res)

    // 用户名为六位的数字、字母、下划线组成,且不能以数字开头 位数为6-12
    var pattern=/[a-zA-Z_][0-9A-Za-z_]{5,11}/;
    var str='abcdef';
    var res=pattern.exec(str);
    console.log(res)//[abcdef]


    // -9-9的任意一位数 {0,1}可有可无
    var pattern=/-{0,1}[0-9]/
    var str=-9;//[-9]
    var str=9;//[9]
    var res=pattern.exec(str);
    console.log(res)

    // 匹配10-99的两位数
    var pattern=/[1-9][0-9]/;
    var str=10;//[10]
    var res=pattern.exec(str);
    console.log(res)

    // 匹配1-99两位数
    var pattern=/[1-9][0-9]{0,1}/;
    var str=1;
    var res=pattern.exec(str);
    console.log(res)

    // 匹配1-120的数 120 100-119 1-99
    /* 
				一位数:1-9
				两位数:10-99
				三位数100-119  120
			 */
    var pattern=/^[1-9]$|^[1-9][0-9]$|^1[01][0-9]$|^120$/;
    var str=119;
    var res=pattern.exec(str);
    console.log(res)

    // 匹配手机号码
    /* 
				第一位:1
				第二位:3-9
			 */
    // 移动
    var isChinaMobile =  /^134[0-8]\d{7}$|^(?:13[5-9]|147|15[0-27-9]|178|18[2-478])\d{8}$/; //移动方面最新答复;
    // 联通
    var isChinaUnion = /^(?:13[0-2]|145|15[56]|166|176|18[56])\d{8}$/; //向联通微博确认并未回复
    // 电信
    var isChinaTelcom = /^0?(133|149|153|17[34]|177|18[01]|189|199)\d{8}$/; //1349号段 电信方面没给出答复，视作不存在
    // 固定的验证
    var pattern=/^1[3-9][0-9]{9}$/
    var str=13452019607;
    var res=pattern.exec(str)
    console.log(res)

    // 匹配qq号码 1453952471
    var pattern=/^[1-9][0-9]{5,9}$/
    var str=1453952471;
    var res=pattern.exec(str)
    console.log(res)
</script>

正则验证的函数

exec()验证这个是否复合正则表达式,将符合的部分进行返回

语法规则：pattern.exec(要检测的字符串) 注意只输出满足条件的第一个,不符合则返回null,符合的以数组进行返回

exec()检测是否复合正则规则将符合的部分以数组的方式返回,不符合为nill
语法:pattern.exec(str)

*test()检测是否符合正则规则 返回boolean值(给表单用)
语法: pattern.test(str)

字符串的查找
search()验证正则规则 返回匹配的下标
语法：只要不是表单验证
str.search(pattern)

字符串的查找和替换(不用严格模式)
replace()将所有符合正则规则的内容进行替换
语法：str.replace(pattern,替换后的内容)


match()检测是否符合正则规范,将所有的内容全部以数组方式返回
 配合修正符g使用
语法:str.match(patter)

严格模式

除了在查找不用，其他大多数再用
^代表必须以指定的字符开头
$代表必须以指定的字符结尾

<script type="text/javascript">
    // 严格模式 插头去尾
    var pattern=/^$/
</script>

元字符

. 代表任意的字符
* 代表匹配前面的原子任意次数 相当于{0,}
? 代表至少0次,最多一次 相当于{0,1}

+ 匹配前面的原子至少一次 相当于{1,}

贪婪模式

转义字符 \

<script type="text/javascript">
    // 贪婪模式 拿了两个li
    var pattern=/<li>.*<\/li>/;
    var str='<li>想去漂流</li><li>想去睡觉</li>';
    var res=pattern.exec(str)
    console.log(res)//[<li>想去漂流</li><li>想去睡觉</li>]
</script>

取消贪婪模式

取消贪婪模式 .*?

<script>
    var pattern=/<li>.*?<\/li>/;
    var str='<li>想去漂流</li><li>想去睡觉</li>';
    var res=pattern.exec(str)
    console.log(res)//[<li>想去漂流</li>]
    
    //  + 代表至少匹配前面的原子一次 相当于 {1,}
    var pattern=/^\w+$/
</script>

匹配中文

\u4e00-\u9fa5a表示中文的范围

<script type="text/javascript">
    var pattern=/脑震荡/;
    var str='这个人有点脑震荡';
    var res=pattern.exec(str)
    console.log(res)//[脑震荡]

    // 匹配2-3个字的中文
    var pattern=/^[\u4e00-\u9fa5a-zA-Z0-9]{2,3}$/;
    var str='2傻逼';
    var res=pattern.exec(str)
    console.log(res)//[脑震荡]
</script>

模式修正符

模式修正符 放置在定界符之后
i 不区分大小写
g 全局匹配 不要插头去尾
m 识别换行符


match()检测是否符合正则规范,将所有的内容全部以数组方式返回
配合修正符g使用
语法:str.match(patter)

<script type="text/javascript">
    // i不区分大小写
    var pattern = /a/i;
    var str = 'A'
    var res = pattern.exec(str)
    console.log(res)//A


    var pattern = /[a-z0-9]{4}/i;
    var str = 'A3da'
    var res = pattern.exec(str)
    console.log(res)//[A3da]


    // match()检测是否符合正则规范,将所有的内容全部以数组方式返
    var pattern=/意思/g;
    var str='外国人不知道意思意思到底是个什么意思';
    // var res=pattern.exec(str)//只能找到一个意思
    var res=str.match(pattern);
    console.log(res)//["意思", "意思", "意思"]

    // m识别换行符
    var pattern = /http:\/\/www\.baidu\.com/gm;
    var str = 'http://www.baidu.com\nhttp://www.baidu.com\nhttp://www.baidu.com';
    var res = str.match(pattern);
    console.log(res)//[http://www.baidu.com,http://www.baidu.com,http://www.baidu.com]
</script>

正则表达式函数

exec()检测是否复合正则规则将符合的部分以数组的方式返回,不符合为null
	语法:pattern.exec(str)

*test()检测是否符合正则规则 返回boolean值(给表单用)
	语法: pattern.test(str)

字符串的查找
	search()验证是否符合正则规则 返回匹配的下标
	语法：只要不是表单验证
	str.search(pattern)

字符串的查找和替换(不用严格模式)
	replace()将所有符合正则规则的内容进行替换
	语法：str.replace(pattern,替换后的内容)

<script type="text/javascript">

    //search()
    var pattern=/a/;
    var str='111abcabc';
    var res=str.search(pattern)
    console.log(res)//0

    //match
    var pattern=/a/g;
    var str='111abcabc';
    var res=str.match(pattern)
    console.log(res)//[a,a]

    //replace()
    var pattern=/鞠婧祎姐姐/;
    var str='鞠婧祎姐姐真漂亮';
    var res=str.replace(pattern,'醋妹');
    console.log(res)//醋妹真漂亮
</script>

script>


## 模式修正符

```tex
模式修正符 放置在定界符之后
i 不区分大小写
g 全局匹配 不要插头去尾
m 识别换行符


match()检测是否符合正则规范,将所有的内容全部以数组方式返回
配合修正符g使用
语法:str.match(patter)

<script type="text/javascript">
    // i不区分大小写
    var pattern = /a/i;
    var str = 'A'
    var res = pattern.exec(str)
    console.log(res)//A


    var pattern = /[a-z0-9]{4}/i;
    var str = 'A3da'
    var res = pattern.exec(str)
    console.log(res)//[A3da]


    // match()检测是否符合正则规范,将所有的内容全部以数组方式返
    var pattern=/意思/g;
    var str='外国人不知道意思意思到底是个什么意思';
    // var res=pattern.exec(str)//只能找到一个意思
    var res=str.match(pattern);
    console.log(res)//["意思", "意思", "意思"]

    // m识别换行符
    var pattern = /http:\/\/www\.baidu\.com/gm;
    var str = 'http://www.baidu.com\nhttp://www.baidu.com\nhttp://www.baidu.com';
    var res = str.match(pattern);
    console.log(res)//[http://www.baidu.com,http://www.baidu.com,http://www.baidu.com]
</script>

正则表达式函数

exec()检测是否复合正则规则将符合的部分以数组的方式返回,不符合为null
	语法:pattern.exec(str)

*test()检测是否符合正则规则 返回boolean值(给表单用)
	语法: pattern.test(str)

字符串的查找
	search()验证是否符合正则规则 返回匹配的下标
	语法：只要不是表单验证
	str.search(pattern)

字符串的查找和替换(不用严格模式)
	replace()将所有符合正则规则的内容进行替换
	语法：str.replace(pattern,替换后的内容)

<script type="text/javascript">

    //search()
    var pattern=/a/;
    var str='111abcabc';
    var res=str.search(pattern)
    console.log(res)//0

    //match
    var pattern=/a/g;
    var str='111abcabc';
    var res=str.match(pattern)
    console.log(res)//[a,a]

    //replace()
    var pattern=/鞠婧祎姐姐/;
    var str='鞠婧祎姐姐真漂亮';
    var res=str.replace(pattern,'醋妹');
    console.log(res)//醋妹真漂亮
</script>

最love酸奶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件的绑定

JS操作css代码注意js无法获取内嵌(css设置的)的样式,只能获取行内的必须利用封装的函数获取内嵌属性先外部引入getStyle.js<head> <meta charset="utf-8"> <title></title> <script src="getStyle.js" type="text/javascript" charset="utf-8"></script> <style
复制链接

扫一扫