那些我懵懵懂懂的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>
待续、、
