那些我懵懵懂懂的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 )
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
待续、、