JavaScript查缺补漏番外（完结）

最新推荐文章于 2021-08-20 11:20:27 发布

心湖中的石子

最新推荐文章于 2021-08-20 11:20:27 发布

阅读量104

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43745804/article/details/112002398

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1、自调用匿名函数

格式：

（匿名函数）（）

案例
先自定义匿名函数，在将其用小括号括起来，成为一个表达式，在使用小括号调用该匿名函数。

<script type="text/javascript">

        (function (sentence){
            console.log(sentence);
        })("hello world");

        </script>

2、函数提升

函数在执行的瞬间，会将函数内部所有的声明提升到顶端，但只提升到声明部分

<script type="text/javascript">

        function f(){
            console.log(h);
            var h=3;
        }
        f();

        </script>

等同于

<script type="text/javascript">

        function f(){
        	var h;
            console.log(h);
            var h=3;
        }
        f();

        </script>

3、函数的作用域

函数的的作用域在其声明的地方，不在于其调用的地方，这种情形在函数调用时会体现出来
如：

<script type="text/javascript">
        var a=1;
        function f(){
            console.log(a);
           
        }


        function f1(){
            var a=3;
            f();
        }
        f1();
        </script>

输出1，而不是3

4、词法分析

在一个标签内，js进行编译和执行，如果有语法错误，所有语句不执行。

5、添加事件及处理函数中的this

1、元素.addEventListener（“事件”，“事件处理函数”，“传播方式（可选）”）
传播方式为逻辑值ture或false主要是设定是否组织事件冒泡

onclick不是事件，click才是事件。这个和行内绑定事件不同
事件监听多次绑定不会覆盖而是叠加
2、元素.事件（动态绑定）

var mya=document.getElementById（‘a’）；
mya.onclick=function（）{ }

3、行内绑定

<button onclick="alert('hello')">提交</button>

动态绑定中，事件处理函数中的this指向当前对象
行内绑定时，事件处理函数中的this指向window对象
动态绑定估计行内绑定，为同一个元素绑定相同事件，会被覆盖；但事件监听不会覆盖。

推荐使用addEventListener，因为不违法分离原则。

6、移除事件处理函数

一个元素同时有两个以上监听事件及相应处理函数

<body>
        <div id="mydiv">moto</div>
        <script type="text/javascript">
        var mydiv=document.getElementById('mydiv');
        function fun1(){
            console.log("hello ");
        }
        //两个操作同时先后触发
        mydiv.addEventListener('click',fun1);
        mydiv.addEventListener('click',function(){console.log(2);})
        //移除掉一个
        mydiv.removeEventListener('click',fun1);
        
        
        </script>
    </body>

7、事件对象

事件对象就是事件发生是锁所产生的对象

<body>
        <div id="mydiv">moto</div>
        <script type="text/javascript">
        var mydiv=document.getElementById('mydiv');
        function fun1(e){
            console.log(e);//形参e，是浏览器产生的事件对象，她包含有关这个事件的一切信息
        }
        //两个操作同时先后触发
        mydiv.addEventListener('click',fun1);
       
        
        
        </script>
    </body>

打印出：
在这里插入图片描述

8、事件常用属性

event.bubbles:属性返回布尔值，表示当前事件是否会冒泡
event.eventPhase：返回一个整数值，表示时间目前所处的节点
0：事件目前没有发生
1：时间处于捕获阶段
2：时间到达目标节点
3：时间处于冒泡阶段
event.type：返回一个字符串，表示时间类型，大小写敏感
event.timeStamp：返回一个毫秒时间戳，表示距离用户上一次刷新至该时间出发的时间

9、事件委托（代理）

event.target：这个事件是在谁身上触发的（当出现事件冒泡时有必要弄清楚时被谁触发的）

<html>
    <head>
      <meta charset="utf-8">
      <title>ex02javascript</title>
        <style type="text/css">
        #div1{width: 100px; height: 100px; background-color: green; margin:35px}
        #div2{width: 150px; height: 150px; background-color: blue; margin:35px}
        #div3{width: 200px; height: 200px; background-color: red; margin:35px}

        </style>
    </head>
    <body>
        <div id="div3">
            <div id="div2">
                <div id="div1">
                    div1
                </div>
            </div> 
        </div>
        <script type="text/javascript">
        var d=document.getElementById('div3');
        d.onclick=function fun1(e){
            console.log(e.target);//事件触发在谁身上就由谁获取e
            e.target.style.background="yellow";
        }

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

event.currentTarget：当前触发事件

10、阻止浏览器默认行为&阻止事件传播

event.preventDefault():取消浏览器对当前事件的默认行为

定义在别的节点上的监听函数
以下阻止了a标签的跳转

var a=document.getElementById('a')
d.preventDefault()

event.stopPropagation（）：阻止事件在DOM中继续传播，防止再触发

<html>
    <head>
      <meta charset="utf-8">
      <title>ex02javascript</title>
        <style type="text/css">
        #div1{width: 100px; height: 100px; background-color: green; margin:35px}
        #div2{width: 150px; height: 150px; background-color: blue; margin:35px}
        #div3{width: 200px; height: 200px; background-color: red; margin:35px}

        </style>
    </head>
    <body>
        <div id="div3">
            <div id="div2">
                <div id="div1">
                    div1
                </div>
            </div> 
        </div>
        <script type="text/javascript">
        var d=document.getElementById('div3');
        var d1=document.getElementById('div1');
        var d2=document.getElementById('div2');
        d2.onclick=function fun1(e){
            console.log(e);
            e.stopPropagation();//组织事件传播
            
        }
        d1.addEventListener('click',function(){alert(1)});
        d.addEventListener('click',function(){alert('d')});
        </script>
    </body>
</html>

11、创建类

1、通过构造函数创建一个类
构造函数首字母都是大写

function Man() {
    
}
var m = new Man();
alert(m);

属性直接临时创建
方法也是直接临时创建

function Man() {
    
}
var m = new Man();
m.name = "zhangsan";
m.speack = function (language) { 
    document.write(m.name+" speak "+language);
}

m.speack("chinese");

m=null，只是断开m和内存空间的连接，连接空间还在，如果之前n=m，则n与内存空间的连接并没有断。

12、利用原型给系统类增加方法

实际是给任何一个自定义类设置原型也是可以的

Number.prototype.cal = function (cue) { 
   return cue * cue * cue  ;
}
var mycal = new Number();

document.write(mycal.cal(5)+"");

13、json字符串与jason对象的转换

var jason = '{"name":"lisi","age":34}';
var o = JSON.parse(jason);

console.log(o.name);

14、js从应用程序接口中拿数据

1、先用php取数据，从接口中拿到数据

my.php

<?php
	$url=''xxxxxxxxx";//接口地址
	$content=file_get_contents($url);
	//向文件输出$content字符
	echo "var mycontents=' ".$content." ' "
?>

2、再从js文件中再入这串字符（var mycontents）

<javscript src="my.php"></javascript>
console.log(s);

心湖中的石子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript查缺补漏番外（完结）

1、自调用匿名函数格式：（匿名函数）（）案例先自定义匿名函数，在将其用小括号括起来，成为一个表达式，在使用小括号调用该匿名函数。<script type="text/javascript"> (function (sentence){ console.log(sentence); })("hello world"); </script>2、函数提升函数在执行的瞬间，会将函数内部所有的声明提升
复制链接

扫一扫