OnlyWait's Blog

使用cheerio

cheerio是jquery核心功能的一个快速灵活而又简洁的实现，主要是为了用在服务器端需要对DOM进行操作的地方，让你在服务器端和html愉快的玩耍

快到没朋友

cheerio使用了及其简洁而又标准的DOM模型， 因此对文档的转换，操作，渲染都极其的高效。基本的端到端测试显示它的速度至少是JSDOM的8倍

provider函数对课程表进行解析

1
2
3
4

function scheduleHtmlProvider(dom = document) {
	var aaa = dom.querySelector('#user').outerHTML;
	return aaa;
}

• 创建一个正则表达式检查一个字符串中是否含有aaa
• 量词
  • 可以通过量词设置一个内容出现的次数
  • 量词只对他前边的内容起作用
  • {n}正好出现n次
  • {m,n}出现m～n次
  • {m,}出现m次以上
  • + 至少一个，相当于{1,}
  • * 0个或多个，相当于{0,}
  • ? 0个或一个，相当于{0,1}
    var reg = /a{3}/; //aaa
reg = /(ab){3}/; //ababab
reg = /ab{3}c/; //abbbc
reg = /b{3}/; //bbb
reg = /ab{1,3}c/; //a b出现1～3次 c
reg = /ab{3,}c/; //a b出现3次以上 c
reg = /ab+c/; //a b至少一个 c
reg = /ab*c/;
reg = /ab?c/;

• 检查一个字符串中是否以a开头
  ^表示开头 //[^]表示除了
  $表示结尾
  • 如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
    reg = /^a/;
reg = /a$/;
reg = /^a$/; //只能匹配a，而不是以a开头+以a结尾
reg = /^a|a$/; //以a开头或以a结尾
reg = /^(a).*(a)$/; //以a开头和以a结尾

• 创建一个字符串检查一个字符串是否是一个合法的手机号
  • 手机号的规则：
    § 11位
    § 以1开头
    § 第二位3-9
    § 三位任意数字9个
  • var phoneStr = “13248528492”;
  • var = phoneReg = /^1[3-9][0-9]{9}$/;

• . 表示任意字符
• 检查一个字符串中是否含有.
  \.来表示 .
\\ 表示 \
• 字符串中 \ 也要\来表示
• 注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符
  • 如果是需要使用\则需要使用\来代替
    \w 表示任意字母、数字_ [A-z0-9_]
\W除了字母、数字、_ [^A-z0-9_]
\d 任意数字[0-9]
\D 除了任意数字[^0-9]
\s 空格
\S 除了空格
\b 单词边界
    `\B 除了单词边界

• 去除字符串中前后的空格
  str = str.replace(/\s/g,""); //去除所有的空格
str = str.replace(/^\s*|\s*$/g,""); //去除字符串开头和结尾的空格

  reg = /\bchild\b/; //表示 "hello child" 匹配其中的child
var reg = /./;

• 电子邮件hello@abc.com.cn

• 任意字母数字下划线 .任意字母数字下划线@ 任意字母数字 .任意字母(2-5)位 .任意字母(2-5位)

  /^\w{3,} (\. \w)* @ [A-z0-9] \. ([A-z]{2-5} \. [A-z]{2-5}){1,2}$/

  /^\w{3,} (\.\w)*@[A-z0-9]\.([A-z]{2-5}\.[A-z]{2-5}){1,2}$/

浏览器已经为我们提供了文档节点对象，这个对象是window属性
可以在页面中直接使用，文档节点代表的是整个网页

• 事件就是文档或浏览器窗口中发生的一个特定的交互瞬间，是用户和浏览器之间的交互行为，比如点击按钮、鼠标移动、关闭窗口
• 在html标签中书写Js代码，我们称为结构和行为耦合，不方便维护，不推荐使用
• onclick 用户点击某个对象时调用的事件
  ondbclick 双击
onmousemove 鼠标移动上面
• 可以为按钮的对应时间绑定处理函数的形式来响应事件
  • 这样当事件被触发时，其对应的函数将会被调用
  • 像这种为单击事件绑定的函数，我们称为单击响应函数

1
2
3

btn.onclick = function(){
alert("你点我了");
}

• 浏览器在加载一个页面时，是按照自上而下的顺序加载的
• 读取到一行就运行一行，如果将script标签写到页面上面
• 在代码执行时，页面还没加载
• 将js代码编写到页面下部，就是为了可以在页面加载完毕后再执行js代码

1
2

btn.onclick = function(){
};

• onload事件会在整个页面加载完成之后才触发
• 为window绑定一个onload事件
  • 该事件可以确保我们的代码执行时，所有的DOM对象已经加载完毕

1
2
3

window.onload = function(){
	var btn = document.get ElementById("btn");
};

• document.getElementById()
  • 通过id属性获取一个元素节点
  • var btn = document.getElementById("btn");

• document.getElementByTagName()
  • 通过标签名获取一组元素节点对象
  • 返回一个类数组对象，所有查询到的对象都会封装到对象中
  • 即使查询到的元素只有一个，也会封装到数组中

• document.getElementByName()
  • 通过name属性获取一组元素节点对象
  • var inputs = document.getElementsByName("gender");

• bj.innerHTML
  • 用于获取元素内部的HTML代码的
  • 对于自结束标签，这个属性没有意义

• 如果需要读取元素节点属性
  • 直接使用元素.属性名
    • 例子：元素.id 元素.name 元素.value
    • 注意：⚠️class属性不能采用这种方式
      □ 读取class属性时需要使用 元素.className
      □ inputs[i].className 而不是inputs[i].class
      console(inputs[i].value);

1. 方法
   • getElementById()
     • 通过id属性获取一个元素节点对象
   • getElementByTagName()
     • 通过标签名获取一组元素节点对象
   • getElementByName()
     • 通过name属性获取一组元素节点对象

• //本节新加

  • getElementsByTagName()
    • 方法，返回当前节点的指定标签名后代节点
    • 查找#city下所有li节点
      var city = document.getElementById("city");
var lis = city.getElementsByTagName("li");

2. 属性
   • childNodes
     • 属性，表示当前节点的所有子节点
     • 根据DOM标签，标签间的空白也会被当成文本节点（包括空白文本）
     • 注意：⚠️在IE8及以下的浏览器中，不会将空白的文本当成子节点，
       § 所以该属性在IE8中会返回4个字元素而其他浏览器时9个
     • 返回#city下所有的子节点
       var city = document.getElementById("city");
var cns = city.childNodes;
   • children✨🌟！！推荐使用
     • 属性，获取当前元素的所有子元素
       var city = document.getElementById("city");
var cns2 = city.children;
   • firstChild
     • 属性，表示当前节点的第一个子节点（包括空白文本）
       var fir = phone.firstChild;
//也可以是 var fir = phone.childNodes[0];
   • firstElementChild
     • 属性，获取当前元素的第一个字元素
     • 不支持IE8及以下的浏览器
       § 如果需要兼容他们尽量不要使用！！
       fir = phone.firstElementChild;
   • lastChild
     • 属性，表示当前节点的最后一个子节点
       var la = phone.lastChild;