DOM一些题目详解
题目:
- 前端教材都在互联网上.
- 现在为了节省时间,要学js就在阮一峰javascript上面学
- js高程只适合当工具书,如果哪里不清楚,或者想深入,就去看js高程,比如面向对象想深入学习,就去看js高程.
image.png
全局变量,window里面本身就有的不能用.比如parent,不然会覆盖
image.png
局部变量
全局变量容易覆盖,所以要用局部变量,用局部变量的方法
立即调用函数,使用局部变量
立即执行函数有什么用？
只有一个作用：创建一个独立的作用域。
这个作用域里面的变量，外面访问不到（即避免「变量污染」）。
用途：封装功能不污染全局变量
- 要写在一个函数里,然后再立即执行这个函数.
image.png
不用加函数名,在后面加.call或者直接用()
但是这样写会直接报错,解决方法
function(){}()可以立即执行且不报错的方法
(function(){alert('我是匿名函数')} ()) // 用括号把整个表达式包起来
(function(){alert('我是匿名函数')}) () //用括号把函数包起来
//下面的都是执行这个表达式,而不管返回值是什么
!function(){alert('我是匿名函数')}() // 求反，我们不在意值是多少，只想通过语法检查。
+function(){alert('我是匿名函数')}()
-function(){alert('我是匿名函数')}()
~function(){alert('我是匿名函数')}()
void function(){alert('我是匿名函数')}()
new function(){alert('我是匿名函数')}()
- 最新的方法:使用let
在花括号里使用let,就可以相当于在花括号这个作用域声明了局部变量
{
let parent = document.querySelector('#self');//let声明的parent是局部变量,不会覆盖window.parent.
}
image.png
打印出来的是window.parent,没有被覆盖,说明let没有出按个画括号的作用域
image.png
image.png
image.png
打印出来的是2
立即执行函数的作用
以一个著名的面试题为例：
var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
liList[i].onclick = function(){
alert(i) // 为什么 alert 出来的总是 6，而不是 0、1、2、3、4、5
}
}
为什么 alert 的总是 6 呢，因为 i 是贯穿整个作用域的，而不是给每个 li 分配了一个 i，如下：
image.png
解决方法:
- 加立即执行函数
var ul = document.getElementsByTagName('ul')[0]
var liList = ul.getElementsByTagName('li');
for (var i = 0; i < 6; i++) {
!function (i) {
liList[i].onclick = function () {
console.log(i) // 为什么 alert 出来的总是 6，而不是 0、1、2、3、4、5
}
}(i)
}
- 将for循环里面的
var替换成let
关于let
let是ES6才规定的.也就是说,直到2015年以前,如果想使用局部变量,必须得用方法一,即下面的方法,使用局部变量必须得放在函数里面,然后立即执行函数.
image.png
前端指导思想:
前端指导思想将贯穿整个前端职业生涯,就是代码写的很乱,这时候就需要有一些原则
内容样式行为分离
image.png
说说对内容样式行为分离的理解:
回答方法,反着回答.
如果不这样会有什么坏处:
- 如果由html负责样式,会使html很复杂,很难分清标签的逻辑结构
image.png
- 如果用css标识内容,比如after,加上content,用户选不到,js取不到
image.png
- 如果css负责逻辑,会很慢
- 重点,尽量不要用js控制样式
比如说 hide(),show(),因为先隐藏起来之后在show,出来的display是不能够确定是block还是inline-flex
image.png
所以,尽量不要用$div.show(),$div.hide().因为jquery会乱改display
