前端基础小知识

最新推荐文章于 2022-08-19 23:18:59 发布

青空–Air

最新推荐文章于 2022-08-19 23:18:59 发布

阅读量307

点赞数

本文链接：https://blog.csdn.net/weixin_46187747/article/details/104225391

版权

1.CSS样式四种引入方式

CSS是Cascading Style Sheets的简称，中文称为层叠样式表。
外联式： <link src = ”stylesheet” type = ”text/css” href = “css路径”>
导入式：<style type = “text/css”> @import “css路径”; </style>
内嵌式： <style type = “text/css”></style>
行内式：<div style = “ width:500px; height:200px;”></div>

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的区别
  1. style.left是可读写的，offsetLeft只可读不可写
  2. style.left返回的是字符串(xxpx),offsetLeft返回的是数字
  3. 如果没有给HTMl元素指定top样式,则style.top返回是空字符串
  4. 最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。而 style.left不可以
Scroll(卷轴)家族
- scrollWidth/Height: 检测盒子的尺寸(盒子的宽/高 + padding)
- scrollTop 和 scrollLeft: 被卷去的头部和左边部分
- scrollTop 和 scrollLeft的兼容性问题

未声明 DTDdocument.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(边框)的宽高
三大家族区别
1. width/height
  - clientHeight = height + padding
  - offsetHeight = height + padding + border
  - scrollHeight = 内容高度（不包含border）width + padding
2. Top 和 Left
  - offsetTop/offsetLeft：
    - 调用者：任意元素。(盒子为主)
    - 作用：距离父系盒子中带有定位的距离。
3. scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
  - 调用者：document.body.scrollTop/…(window)
  - 作用：浏览器无法显示的部分（被卷去的部分）。
4. clientY/clientX:（clientTop/clientLeft 值的是border）
  - 调用者：event.clientX(event)
  - 作用：鼠标距离浏览器可视区域的距离（左、上）。

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的属性

这个width没有style包着不生效
在设置属性需用点语法

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

青空–Air

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫