1、this

　　如果说this是代表当前对象，而js中，除原始值（var str = "Leonie"，值Leonie是不能改变的，它就是一个字符串，如var num = 4, 4也是不能再改变的值，值的改变同变量改变不一样，你可以修改str/num等于其他值，但是不能修改它们值的值。）以外都是对象。所以当这个this要表示在大范围内使用，而不与其他对象的this冲突，需要使用将this赋值给一个变量，然后该变量就代表现对象。var _this = this;

2、对象、变量

3、timing

　　为什么——clearInterval是专清setInterval滴

　　程序设定的啊，你干啥纠结这个~

　　将x换成myFun没有效果是因为clearInterval只清setInterval呀~

3、作用域

4、函数回调

　　以下部分代码是获取后台数据显示到前台显示的。函数充当参数，函数充当参数时，不能接括号，不然就相当调用了。在方式1 getIndexAd(json){}【$(json).each(...)】中，json只是起一个形参作用，也可以用其它字符串代替。方式 1中，callBack(json.Info)为函数的回调，callback(json.Info)相当于是getIndexAd(json.Info)。A、B部分可以替换，可以理解为主要部分的抽离，比如说，如果取的是id为123的广告位，那只需创建另一个函数，其中B部分稍加修改即可，GetAd方法涉及的内容就不用重复了。A、B部分涉及的函数内容可以汇集到方式2中，只是如果页面广告位很多的话，可能方式1会更方便些。

 5、正则表达式

6、mouseover、mouseeenter

1）mouseover（mouseout）作用于目标元素及其子元素，支持冒泡事件；
2）mouseenter（mouseleave）作用于目标元素，不会冒泡。
3）冒泡（mouseover)：对于如图的mouseover来说，子元素外围的灰色区域为父元素（它本身也包含在父元素当中）。
　　当鼠标从白色区域（子元素）移到灰色区域（父元素），父元素被触发mouseover(可以看做是hover效果)。
　　当鼠标从灰色区域（父元素）到白色区域（子元素），子元素被重新hover，也就是会触发mouseover。
4）非冒泡：灰白区域的鼠标移动可以看成是一个整体，对于在整个元素上做hover，是不会切换效果的。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/jquery-3.1.0.min.js" ></script>

        <style>

            * {

                padding: 0;

                margin: 0;

            }

            :root {

                --radius: 100%;

            }

            div {

                overflow: hidden; /*清除子元素不同带来的位置变换*/

                display: inline-block;

                width: 130px;

                height: 130px;

                padding: 40px;

                line-height: 130px;

                background: lightgray;

                margin-right: 20px;

                border-radius: var(--radius);

            }

            h3 {

                width: 100%;

                height: 100%;

                background: #fff;

                font-weight: 400;

                border-radius: var(--radius);

            }

            .overenter {line-height:1;}

            p {

                width: 60%;

                height: 60%;

                line-height: 5;

                text-align: center;

                border-radius: var(--radius);

                background: #fff;

            }

            p:nth-child(2) {

                margin: -17px 0 0 60px;

            }

        </style>

        <script>

            $(function() {

                x=0, y=0, z=0, m=0;

                $(".over").mouseover(function() {

                    $(".over span").text(x += 1);

                });

                $(".enter").mouseenter(function() {

                    $(".enter span").text(y += 1);

                });

                // 对于overenter来说: 最先mouseover和mouseenter都是可以发生的，但mouseenter放后面可以最后反生，再在overenter中mouseover父、子元素查看变换效果

                $(".overenter").mouseover(function(event) {

                    event.target.style.background = "lightpink";

                    $(".overenter p:nth-child(1)").text(z += 1);

                    setTimeout(function() {

                        event.target.style.background = "";

                    }, 1000);

                });

                $(".overenter").mouseout(function(event) {

                    event.target.style.background = "lightpink";

                    $(".overenter p:nth-child(1)").text(z += 1);

                    setTimeout(function() {

                        event.target.style.background = "";

                    }, 1000);

                });

                $(".overenter").mouseenter(function(event) {

                    event.target.style.background = "lightcyan";

                    $(".overenter p:nth-child(2)").text(m += 1);

                    setTimeout(function() {

                        event.target.style.background = "";

                    }, 1000);

                });

                $(".overenter").mouseleave(function(event) {

                    event.target.style.background = "lightcyan";

                    $(".overenter p:nth-child(2)").text(m += 1);

                    setTimeout(function() {

                        event.target.style.background = "";

                    }, 1000);

                });

            });

        </script>

    </head>

    <body>

        <div class="over">

            <h3>mouseover:<span>0</span></h3>

        </div>

        <div class="enter">

            <h3>mouseenter:<span>0</span></h3>

        </div>

        <div class="overenter">

            <p>0</p>

            <p>0</p>

        </div>

    </body>

</html>

7、函数调用

一直以为函数的执行是要放在初始化方法中的，其实不然。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <script>

        window.onload = function() {

        }

        function foo() {

            function bar(a) {

                i = 3;

                console.log(a + i);

            }

            for(var i=0; i<10; i++) {

                bar(i * 2);

            }

        }

        foo();   // 会陷入死循环的，注意下。

    </script>

</body>

</html>

待续、、

那些我懵懵懂懂的js的更多相关文章

  1. 关于js中的回收机制，通俗版

    在前面的几篇文章中,我讲解过了js中的回收机制,但是对于当时的我来说,我自己对回收机制的这个概念也有些懵懵懂懂,现在对回收机制有了更深入的理解,所以特此发布此文给于总结,也好加深记忆. 如果你想学习闭 ...

  2. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  3. 萌新--关于vue.js入门及环境搭建

    十几天闭关修炼,恶补了html跟css以及JavaScript相应的基础知识,恰巧有个群友准备做开源项目,愿意带着我做,但是要求我必须懂vue.js,所以开始恶补vue.js相关的东西. 在淘宝上买了 ...

  4. Node.js到底是什么

    接触前端也有一段时间了,逐渐开始接触Node.js,刚刚接触Node.js的时候一直都以为Node.js就是JavaScript,当对Node.js有一定的了解之后,其实并不然两者之间有关系,其中的关 ...

  5. 关于js中this指向的总结

    js中this指向问题一直是个坑,之前一直是懵懵懂懂的,大概知道一点,但一直不知道各种情况下指向有什么区别,今天亲自动手测试了下this的指向. 1.在对象中的this对象中的this指向我们创建的对 ...

  6. 复习 - node.js（接口案例）

    其实复习一次的作用真实太大了,真的,自从上次ajax开始其实就开始i有点懵懵懂懂的感觉,一直拖想到了node在去回顾一遍,这一次回去复习,ajax已经很熟练了,node之前搞不懂那些原理也顺清楚了好多 ...

  7. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  8. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  9. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. 一个注解@Recover搞定丑陋的循环重试代码

    使用背景 在实际项目中其中一部分逻辑可能会因为调用了外部服务或者等待锁等情况下出现不可预料的异常,在这个时候我们可能需要对调用这部分逻辑进行重试,代码里面主要就是使用for循环写一大坨重试的逻辑,各种 ...

  2. List集合工具类之"将list集合按"指定长度"进行切分Lists.partition和ListUtils.partition"

    将list集合按"指定长度"进行切分,返回新的List<List<类型>>集合,如下的:  方法1:List<List<Integer>& ...

  3. （stm32学习总结）—GPIO位带操作

    本章参考资料:<STM32F10X-中文参考手册>存储器和总线构架章节.GPIO 章节,<CM3 权威指南 CnR2>存储器系统章节. 位带简介 位操作就是可以单独的对一个比特 ...

  4. Numpy的数学统计函数

    Numpy的数学统计函数 本节内容: 1.Numpy有哪些数学统计函数: 函数名 说明 np.sum 所有元素的和 np.prod 所有元素的乘积 np.cumsum 元素的累积加和 np.cumpr ...

  5. C#编写一个简易的文件管理器

    编写一个简易的文件管理器,通过本次实验,练习 TreeView.ListView 和SplitContainer 控件的使用,同时熟悉 C#文件系统的操作方法以及 File 类和 Directory类 ...

  6. java中的访问控制有什么用？如何用法？请举例

    9.访问控制 [新手可忽略不影响继续学习] 访问控制有什么用?在软件公司里是这么用的,我们想像一种场景,在你的类中,你编了三个私有方法,马克-to-win,别人当然都用不了,但在类外,你也是用不了的, ...

  7. executeFind()方法和execute()方法区别

    返回类型不同:executeFind()方法返回集合,execute()方法返回对象 executeFind @Override public List<TCpContact> getCp ...

  8. java集合（arraylist详解）

    一.ArrayList概述 ArrayList是实现List接口的动态数组,所谓动态就是它的大小是可变的.实现了所有可选列表操作,并允许包括 null 在内的所有元素.除了实现 List 接口外,此类 ...

  9. caioj 1002: [视频]实数运算2[水题]

    题意:输入三个数,计算并输出它们的平均值以及三个数的乘积,结果保留2位小数. 题解:简单题不写题解了-- 代码: #include <cstdio> double a, b, c; int ...

  10. 数据库篇：mysql事务原理之MVCC视图+锁

    前言 数据库的事务特性 数据并发读写时遇到的一致性问题 mysql事务的隔离级别 MVCC的实现原理 锁和隔离级别 关注公众号,一起交流,微信搜一搜: 潜行前行 1 数据库的事务特性 原子性:同一个事 ...