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. LIKE 声明中的％和_是什么意思？

    %对应于 0 个或更多字符,_只是 LIKE 语句中的一个字符. 如何在 Unix 和 MySQL 时间戳之间进行转换? UNIX_TIMESTAMP 是从 MySQL 时间戳转换为 Unix 时间戳 ...

  2. springboot-数据访问之jdbc

    官网的starthttps://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#using-boot-starter 111 ...

  3. Mybatis入门程序（一）

    1.入门程序实现需求 根据用户id查询一个用户信息 根据用户名称模糊查询用户信息列表 添加用户(二) 更新用户(二) 删除用户(二) 2.引入Mybatis所需 jar 包(Maven工程) < ...

  4. scrapy--使用案例

    1.scrapy框架 1.1 安装scrapy pip3 install wheel 下载twisted http://www.lfd.uci.edu/~gohlke/pythonlibs/#twis ...

  5. mybatis-02-mapper生成器插件使用

    sb_mybatis <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  6. 打败算法 —— 环形链表 II

    本文参考 出自LeetCode上的题库 -- 环形链表II,哈希表和快慢指针两种解法都需要O(n)的时间,但快慢指针仅占用O(1)的空间 https://leetcode-cn.com/problem ...

  7. PCB产业链、材料、工艺流程详解（1）

    PCB知识大全 1.什么是pcb,用来干什么? PCB( Printed Circuit Board),中文名称为印制电路板,又称印刷线路板,是重要的电子部件,是电子元器件的支撑体,是电子元器件电气连 ...

  8. AD18布线技巧

    3. 快乐打孔模式(颜色配置)PCB 设计完成后,补回流孔,需要打开多层,软件设置如下: 设置方法: 转载原文链接未知

  9. 利用AudioContext来实现网易云音乐的鲸鱼音效

    一直觉得网易云音乐的用户体验是很不错的,很早就注意到了里面的鲸鱼音效,如下图,就是一个环形的跟着音乐节拍跳动的特效. gif动图可能效果不太理想,可以直接在手机上体验 身为前端凭着本能的好奇心和探索心 ...

  10. webpack 4.0 配置方法以及错误解决

    选取一个空目录来试验 全局安装webpack4.1之后 创建目录 mkdir webpacktest && cd webpacktes 初始化package.json npm init ...