前端基础小知识
1.CSS样式四种引入方式
CSS是Cascading Style Sheets的简称，中文称为层叠样式表。
外联式：
导入式：
内嵌式：
行内式：
2.jQuery检测元素是否存在
if($(“#box”).length > 0){alert(true);}else{alert(false)}·
jQuery对象都是有返回值所有if($(“#box”))是检测不出来
3.var和let和const的区别(面试题)
- var声明的变量会挂载在window上,而let和const声明的变量不会
- var声明变量存在变量提升，let和const会报错
例：console.log(a); // undefined
console.log(aa); // (Cannot access 'XX' before initialization)
console.log(aaa); // (Cannot access 'XX' before initialization)
var a = 11;
let aa = 11;
const aaa = 111;
- let和const声明形成块作用域
if(true) {
let a = 1;
}
console.log(a); // a is not defined
- 同一作用域下let和const不能声明同名变量，而var可以
let a = 11;
console.log(a); // 11
let a = 11;
console.log(a) // Identifier 'a' has already been declared
- 暂存死区
- const(constant)
- Const就是声明一个不变的量
- 一旦声明必须赋值,不能使用null占位(Missing initializer in const declaration)
- 声明后不能再修改 (Assignment to constant variable)
- 如果声明的是复合类型数据，可以修改其属性
4.offset,client,scroll三大家族
-
Offset(偏移)家族
- offsetWidht/Height: 检测盒子的尺寸(盒子的宽/高 + padding + border);
- offsetTop/Left: 盒子距离父盒子(定位的盒子)的距离，若父盒子没有定位就以body为准
- offsetParent: 返回带有定位的父亲
- offsetLeft/Height 和 style.left/height的区别
- style.left是可读写的，offsetLeft只可读不可写
- style.left返回的是字符串(xxpx),offsetLeft返回的是数字
- 如果没有给HTMl元素指定top样式,则style.top返回是空字符串
- 最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。而 style.left不可以
-
Scroll(卷轴)家族
- scrollWidth/Height: 检测盒子的尺寸(盒子的宽/高 + padding)
- scrollTop 和 scrollLeft: 被卷去的头部和左边部分
- scrollTop 和 scrollLeft的兼容性问题
- 未声明 DTD
document.body.scrollTop - 已经声明DTD（IE678只认识他）
document.documentElement.scrollTop - 火狐/谷歌/ie9+以上支持的
window.pageYOffset
四、兼容性写法window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
-
client(客户)家族
- clientWidth/Height : 获取网页的可视区域的宽/高
- client/Y(event调用): 鼠标距离可视区域的左/上侧距离
- clientTop/Left: 盒子border(边框)的宽高
-
三大家族区别
- width/height
- clientHeight = height + padding
- offsetHeight = height + padding + border
- scrollHeight = 内容高度（不包含border）width + padding
- Top 和 Left
- offsetTop/offsetLeft：
- 调用者：任意元素。(盒子为主)
- 作用：距离父系盒子中带有定位的距离。
- offsetTop/offsetLeft：
- scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
- 调用者：document.body.scrollTop/…(window)
- 作用：浏览器无法显示的部分（被卷去的部分）。 - clientY/clientX:（clientTop/clientLeft 值的是border）
- 调用者：event.clientX(event)
- 作用：鼠标距离浏览器可视区域的距离（左、上）。
- width/height
5.正则表达式
5.1正则表达式基础知识
5.2符号
星号(*) : 星号代表匹配它前面一个字符任意遍(0或任意次)
加号(+): 加号是一个与星号(*)类似的通配符,它也是数量词,表示匹配前面的字符至少一次或多次 它与星号的差别就在这里，星号可以匹配0次，加号则必须一次以上。
问号(?): 问号也是一个数量词，它代表匹配前一个字符0或1次。
中括号[]： 中括号用来表示一个字符集合，
如果这个集合有很多元素.如26个字母,数字等,这时可以用连字符(hyphen)来表示一个范围，
//如:[a-z]表示小写字母的集合，
// [a-zA-Z]表示大小写字母的集合。
脱字符^ (caret).
这种写法表示，匹配任何不在该集合中的字符，与上面的用法刚好相反,和中括号配合就是脱字符,不然就是匹配输入字符串的开始位置
5.3定位符：
^ 匹配输入字符串的开始位置。
$ 匹配输入字符串的结束位置。
\b 匹配一个单词边界，也就是指单词和空格间的位置。//例如， ‘er\b’ 可以匹配"never" 中的 ‘er’，但不能匹配 “verb” 中的 ‘er’。
\B和\b相反，匹配非单词边界。‘er\B’ 能匹配 “verb” 中的 ‘er’，但不能匹配 “never” 中的 ‘er’。
5.4特殊字符：
\w – (小写w) 表示字母或数字，等价于 [a-zA-Z0-9]
\W – (大写W)非字母且非数字，与\w相反 等价于 ‘[^A-Za-z0-9_]’
\s – (小写s)匹配一个空格字符，包括：空格，换行，回车,tab,等价于[ \n\r\t\f]
\S – (大写S)匹配非空格字符，\s的相反 等价于 [^ \f\n\r\t\v]。
\d – 表示10进制数字，等价于 [0-9]
\D – 匹配一个非数字字符。等价于 [^0-9]。
\f 匹配一个换页符。等价于 \x0c 和 \cL。
\n 匹配一个换行符。等价于 \x0a 和 \cJ。
\r 匹配一个回车符。等价于 \x0d 和 \cM。
\t 匹配一个制表符。等价于 \x09 和 \cI。
\v 匹配一个垂直制表符。等价于 \x0b 和 \cK。
大括号:{}
大括号的作用是指定重复前面一个字符多少遍:
{N} 重复N遍
{n,m} 重复 n~m 遍
{n,} 至少重复n遍
{,m} 至多重复m遍
6.四种判断类型的方式
typeof
Console.log(typeof 11); // number
Console.log(typeof ‘str’); // string
Console.log(typeof function(){}); // function
Console.log(typeof []); // object
Console.log(typeof {}); // object
Console.log(typeof null); // object
Console.log(typeof undefined); // undefined
缺点：
- 判断Array和null都是Object
- 在使用 typeof 运算符时采用引用类型存储值会出现一个问题，
无论引用的是什么类型的对象，它都返回 “object”。
toString.call()
console.log(toString.call(11)) // number
console.log(toString.call(‘str’)) // string
console.log(toString.call(function(){}) // function
console.log(toString.call([])) // array
console.log(toString.call({})) // object
console.log(toString.call(null)) // null
console.log(toString.call(undefined)) // undefined
instanceof
Console.log(cc instanceof Array); // true
Console.log(dd instanceof Object); // true
Console.log(ee instanceof Function); // true
缺点:：判断Number和String都是false
constructor
console.log(aa.constructor === Number); // aa=11,ture
console.log(bb.constructor === Array); // bb=[],true
console.log(cc.constructor === Object); // cc={},true
console.log(dd.constructor === Function); // dd=function(){},true
console.log(ee.constructor === String); // ee=’str’,true
7.变量的内存分配(面试题)
7.1概念
1.值类型:在定义变量时没具体赋值时是不分配内存，输出的是undefined
2.值类型:当给定具体的值是才会分配内存
3.值类型:分配的是独立的内存空互不影响
4.引用类型:系统都会在内存中生成两个区域：一个存储变量(指针)，一个用来存储值
5.引用类型:共用的是同一片内存区域,变量保存的是指向值的指针
6.引用类型:其实是指向同一个地址,也就是操纵的其实是同一个位置
7.引用类型:当新赋值就会开辟新的内存区域
console.log(typeof(x)); // undefined 值类型
console.log(typeof(10)); // number 值类型
console.log(typeof('abc')); // string 值类型
console.log(typeof(true)); // Boolean 值类型
console.log(typeof(function () { })); //函数 引用类型
console.log(typeof([])); //数组 引用类型
console.log(typeof ({ a: 10 })); // object 或者json 引用类型
console.log(typeof (null)); //null 引用类型
console.log(typeof (new Number(10))); //内置对象 引用类型
7.2值类型
var num1; //这个时候不进行内存分配
var num3=9;//分配内存
var num4=num3;//会不会分配
// 这里到底分配还是不分配内存？？
// 答案 --分配内存 彼此拥有独立的内存空间，互不影响
console.log(num3)
console.log(num4)
num3=3333333;
num4=4444444;
console.log(num3)
console.log(num4) //当更改数据，值不一样的本质是这里分配两个空间独立存储
7.3引用类型
var arr1=[‘传智播客’,‘黑马’];//分配内存
var arr2=arr1; //问题：这里arr2会不会分配内存
console.log(arr1[0]);
console.log(arr2[0]); //一样
//修改数组1
arr2[0]=‘水浒传 西游记 三国演义 红楼梦’;
console.log(arr1[0]);
console.log(arr2[0]);//一样
// 变量只是存储了指向内容的地址,他们公用/修改的是同一片内存区域
8.与或非
8.1与(&&)
a&&b 如果a为真，则返回b
a&&b 如果a为假，则返回a
8.2或(||)
a||b 如果a为真，则返回a
a||b 如果a为假，则返回b
8.3短路表达式
例：if(a){return a};
短路表达式：a && return a;
9.GET和POST的区别
10.JS操作CSS
10.1 Set
通过.语法是无法获取CSS里设置的值，只能获取到行内样式的值
例：{width:200px} dom.style.width; // ‘ ’(什么都没有)
其他: window.getComputedStyle(dom,null)[key]；
IE: dom.currentStyle[key];
兼容性问题
10.2 Get
在设置CSS属性时不能用setAttribute(key,value)这个方法
在一些class id name data行内式的能够设置，如果设置了CSS的属性
在设置属性需用点语法
11.浅拷贝和深拷贝
12.移动Web滚动性能优化: Passive event listeners
简单的公式
-
缓动动画
leader = leader + (target - leader)/10
ps：后面的数字是根据速度修改，数字越大动画越慢 -
滚动条
动态滚动条: 容器高度 / 内容高度 * 容器高度
滚动比例: (内容高度 – 容器高度)/(容器高度 – 滚动条高度) * 滚动像素 -
动画(时间角度)
Animate = 总距离 * (用时/总用时);
兼容性
Substr:
- slice(-1)可以截取字符串的最后一个
- IE678不支持则需要使用
xx.substr(xx.length-1)
Scroll
- 在没有DTD的情况下可以用 IE10+兼容(到了IE9及以下都是0)
document.body.scrollTop - 除了chrome不兼容 IE7+都兼容
document.documentElement.scrollTop - 兼容到IE9+(到了IE8及以下 都是undefined)
window.pageYOffset
检测屏幕宽度(可视区域)
- ie9及其以上的版本：
window.innerWidth - 标准模式：
document.documentElement.clientWidth - 怪异模式 ：
document.body.clientWidth
opacity(透明度)
- 正常浏览器：
opacity: 0.6 - IE678:：
filter:alpha(opacity = 60)
Bubble(冒泡机制)
- W3C方法:
event.stopPropagation() - IE方法:
event.cancelBubble = true
判断当前对象
- 正常浏览器:
event.target.id - IE678:
event.srcElement.id
获取内容
- 标准浏览器:
window.getSelection() - IE:
document.selection.createRange().text