一些JS超级基础的知识梳理（六）

正则、盒子模型

// 常用的元字符
* 零到多次
+ 一到多次
? 零次或者一次
{n} 出现 n 次
{n,} 出现 n 到多次
{n,m} 出现 n 到多次

\ 转义字符（普通 -> 特殊 -> 普通）
\n 换行符
. 除 \n（换行符）以外的任意字符
^ 以哪一个元字符作为开始
$ 以哪一个元字符作为结束
\d 0~9之间的一个数字
\D 非0~9之间的一个数字 （大写和小写的意思是相反的）
\w 数字、字母、下划线中的任意一个字符
\s 一个空白字符（包含空格、制表符、换页符等）
\t 一个制表符（一个 TAB 键：四个空格）
\b 匹配一个单词的边界
x|y x 或者 y 中的一个字符
[xyz] x 或者 y 或者 z 中的一个字符
[^xy] 除了 x / y 以外的任意字符
[a-z] 指定 a-z 这个范围中的任意字符  [0-9a-zA-Z_]===\w
[^a-z] 上一个的取反“非”
() 正则中的分组符号
(?:) 只匹配不捕获
(?=) 正向预查
(?!) 负向预查 

 // 正则表达式常用的修饰符：img
 i => ignoreCace 忽略单词大小写匹配
 m => multiline 可以进行多行匹配
 g => global 全局匹配
 /A/.text('lalala') // false
 /A/i.test('lalala') // true

常用的正则表达式

1. 验证是否为有效数字

/*
 * 规则分析
 * 1.可能出现 + - 号，也可能不出现  [+-]?
 * 2.一位0-9都可以，多位首位不能是0 (\d|([1-9]\d+))
 * 3.小数部分可能有可能没有，一旦有后面必须有小数点+数字 (\.\d+)?
 */
let reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/;

2. 验证密码

// 数字、字母、下划线
// 6~16位
let val = userPassInp.value,
    reg = /^\w{6,16}$/;
let flag=reg.test(val);
function checkPass(val){
    if(val.length<6 || val.length>16){
     alert('长度必须介于6-16位之间！');
     return;
 }
    let area=['a','b'....'_']; //=>包含数字、字母、下划线
    for(let i=0;i<val.length;i++){
        let char=val[i];
        if(!area.includes(char)){
            alert('格式不正确！');
         return;
        }
    }
}

3. 验证真实性名的

/*
 * 1.汉字  /^[\u4E00-\u9FA5]$/
 * 2.名字长度 2~10位
 * 3.可能有译名 ·汉字  (·[\u4E00-\u9FA5]{2,10}){0,2}
 */
let reg = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;

4. 验证邮箱的

let reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

// \w+((-\w+)|(\.\w+))*
// 1.开头是数字字母下划线（1到多位）
// 2.还可以是 -数字字母下划线 或者 .数字字母下划线,整体零到多次
// 邮箱的名字由“数字、字母、下划线、-、.”几部分组成，但是-/.不能连续出现也不能作为开始

//=> @[A-Za-z0-9]+
//1.@后面紧跟着：数字、字母 （1-多位）

// ((\.|-)[A-Za-z0-9]+)*
// 1.对@后面名字的补充
// 多域名     .com.cn
// 企业邮箱    zxt@zhufeng-peixun-office.com

// \.[A-Za-z0-9]+
// 1. 这个匹配的是最后的域名（.com/.cn/.org/.edu/.net...）

5. 身份证号码

/*
 * 1. 一共18位
 * 2. 最后一位可能是X
 *
 * 身份证前六位：省市县  130828
 * 中间八位：年月日
 * 最后四位：
 *   最后一位 => X或者数字
 *   倒数第二位 => 偶数 女  奇数 男
 *   其余的是经过算法算出来的
 */
// let reg = /^\d{17}(\d|X)$/;
// 小括号分组的第二个作用：分组捕获，不仅可以把大正则匹配的信息捕获到，还可以单独捕获到每个小分组的内容
let reg = /^(\d{6})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|X)$/;
reg.exec("130828199012040617"); // ["130828199012040617", "130828", "1990", "12", "04", 
// "1", "7"...] 捕获结果是数组，包含每一个小分组单独获取的内容

盒子模型

1. client

let box = document.getElementById('box');
// 获取盒子可视区域的宽高（内容宽度+左右PADDING）
// 1.内容溢出与否对他无影响
// 2.获取的结果是没有单位的（其余的盒模型属性也是）
// 3.获取的结果是整数，它会自己进行四舍五入（其余的盒模型属性也是）
box.clientWidth
box.clientHeight
// 获取当前页面一屏幕（可视化）区域的宽高
let winW = document.documentElement.clientWidth || document.body.clientWidth;
let winH = document.documentElement.clientHeight || document.body.clientHeight;
// 获取盒子左边框和上边框的大小
box.clientLeft
box.clientTop

2. offset

let box = document.getElementById('box');
// 在CLIENT的基础上加上 BORDER == 盒子本身的宽高
box.offsetWidth
box.offsetHeight
// 在没有内容溢出的情况下，获取的结果和 CLIENT 是一样的
// 在有内容溢出的情况下，获取的结果约等于真实内容的宽高（上/左PADDING + 真实内容的高度/宽度）
// 1.不同浏览器获取的结果不尽相同
// 2.设置 overflow 属性值对最后的结果也会产生一定的影响
box.scrollWidth
box.scrollHeight
// 获取整个页面真实的高度
document.documentElement.scrollHeight || document.body.scrollHeight

3. scroll

let box = document.getElementById('box');
// 竖向滚动条卷去的高度
// 横向滚动条卷去的宽度
// 1.边界值
// min = 0
// max = 整个的高度 scrollHeight - 一屏幕高度 clientHeight
box.scrollTop
box.scrollLeft
// 13个盒子模型属性，只有这两个是“可读写”的属性（既可以获取也可以设置对应的值），其余的都是“只读”属性（不能设置值，只能获取）
box.scrollTop = 0;

// offsetParent：获取它的父参照物（不一定是父元素）
// 父参照物和它的父元素没有必然的联系，父参照物查找：同一个平面中，最外层元素是所有后代元素的父参照物，而基于 position:relative / absolute / fixed 可以让元素脱离文档流（一个新的平面），从而改变元素的父参照物
document.body.offsetParent === null;
// offsetTop：距离其父参照物的上偏移
// offsetLeft：距离其父参照物的左偏移（当前元素的外边框到父参照物的里边框）

4. 获取当前元素距body的左/上偏移值

/*
 * offset：获取当前元素距离 BODY 的左/上偏移（不论其父参照物是谁）
 *   @params
 *      curEle:current element当前要操作的元素
 *   @return
 *      [object]包含上/左偏移的信息  => {top:xxx,left:xxx} 
*/
function offset(curEle) {
    let par = curEle.offsetParent,
        l = curEle.offsetLeft,
        t = curEle.offsetTop;
    // 存在父参照物，而且还没有找到 BODY
    while (par && par.tagName !== "BODY") {
        //在原有偏移的基础上累加：父参照物的边框、父参照物的偏移
        if (!/MSIE 8\.0/.test(navigator.userAgent)) {
            // IE8 中偏移值自已就算了边框了，不需要我们在加边框的值 navigator.userAgent 获取当前浏览器的版本信息
            l += par.clientLeft;
            t += par.clientTop;
        }
        l += par.offsetLeft;
        t += par.offsetTop;
        // 继续获取上级参照物
        par = par.offsetParent;
    }
    return {
        top: t,
        left: l
    };
}