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. 4.RDD操作

    目录 一. RDD创建 从本地文件系统中加载数据创建RDD 从HDFS加载数据创建RDD 通过并行集合(列表)创建RDD 二. RDD操作 转换操作 filter(func) map(func) fl ...

  2. Ubuntu 18.04 磁盘根目录在线扩容 & 修改分区 inode 数量

    Ubuntu 18.04 磁盘根目录在线扩容 & 修改分区 inode 数量   Ubuntu 作为服务器系统使用的时候,系统盘的空间可能并不是很充裕,apt apt 着,根目录就满了.诚然, ...

  3. Python 与 C++ 向量

    Python 与 C++ 向量 Python 和 C++ 对比 我们再回到向量!你已经学习了如何声明一个空的向量. 在下面的代码中,你可以比较 Python 列表和 C++ 向量的语法.你会看到,C+ ...

  4. uniapp-npm install 进入版本后 优先运行全局安装，在HBuilder X终端输入 npm install 点击回车

    uniapp-npm  install 进入版本后 优先运行全局安装,在HBuilder X终端输入 npm  install 点击回车

  5. [译] 沙箱中的间谍 - 可行的 JavaScript 高速缓存区攻击

    原文 The Spy in the Sandbox – Practical Cache Attacks in Javascript 相关论文可在 https://github.com/wyvernno ...

  6. 移动端调试工具weinre安装教程（java版）

    先申明:本安装教程是基于java的jdk安装的,经过测试可以正常使用,基于nodejs的安装,小喵鼓弄了好几天也没有成功,如果哪位童鞋基于nodejs安装成功了,请联系小喵,小喵在这里先谢谢你了! 好 ...

  7. MEVN 架构（MongoDB + Express + Vue + NODEJS）搭建

    一个完整的网站服务架构包括:1.web frame ---这里应用express框架2.web server ---这里应用nodejs3.Database ---这里应用monggoDB4.前端展示 ...

  8. 网络安全—xss

    1.xss的攻击原理 需要了解 Http cookie ajax,Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码.比如 ...

  9. Citus 分布式 PostgreSQL 集群 - SQL Reference(SQL支持和变通方案)

    由于 Citus 通过扩展 PostgreSQL 提供分布式功能,因此它与 PostgreSQL 结构兼容.这意味着用户可以使用丰富且可扩展的 PostgreSQL 生态系统附带的工具和功能来处理使用 ...

  10. 鸿蒙JS 开发整理

    目录 一.前言: 二.鸿蒙 JS UI框架 2.1 JS UI特性 2.2 架构 2.3 新的UI框架结构 三.API 四.最后 一.前言: 5月25日,华为对外宣布计划在6月2日正式举办鸿蒙手机发布 ...