那些我懵懵懂懂的js

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>

8、JSON.parse( str ) | JSON.stringify( json )

<script>
  /*
     JSON.parse(str) 用于把字符串的 json 对象解析出来，该单词是解析的意思。
     JSON.stringify(json) 用于把 json 对象字符串化。
  */

  var str = '{"name": "Leonie", "age": "20"}';
  var beChangeToJSON = JSON.parse(str);
  console.log(typeof beChangeToJSON); // object

  var obj = {name: "Leonie", age: "20"};
  var beChangeToString = JSON.stringify(obj);
  console.log(typeof beChangeToString); // string

</script>

parse/stringify

待续、、

posted @ 2020-04-20 08:50 し7709 阅读(127) 评论(0) 收藏举报

刷新页面返回顶部

し7709

那些我懵懵懂懂的js

公告