JavaScript进阶

• 正则表达式

  • 语法
    /正则表达式/修饰符(可选)
  • 使用字符串方法
    • search() 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
    • replace() 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
  • 修饰符
    • i：执行对大小写不敏感的匹配
    • g：执行全局匹配
    • m：多行匹配
  • 正则表达式模式

    • 方括号用于查找某个范围内的字符：

      • [abc] 查找方括号之间的任何字符。
      • [0-9] 查找任何从 0 至 9 的数字。
      • (x|y) 查找任何以 | 分隔的选项。

    • 元字符是拥有特殊含义的字符：

      • \d 查找数字。
      • \s 查找空白字符。
      • \b 匹配单词边界。
      • \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

    • 方括号用于查找某个范围内的字符：

      • n+ 匹配任何包含至少一个 n 的字符串。
      • n* 匹配任何包含零个或多个 n 的字符串。
      • n? 匹配任何包含零个或一个 n 的字符串。

• CSS和HTML里面怎么写，JS就怎么写，但是唯一例外为class要写为className

• 为a链接添加JS：<a href="javascript:;"></a>去掉a标签的默认行为

• 操作属性的方法

  1. .
  2. []

  []中为字符串，可以用于函数传参时的属性变化，.后面被认定为固定的属性

• 优先级：
  同权重：内联样式 > 嵌入样式表 > 外部样式表
  !important > 内联样式 > id > class > tag > *
  故如果先改变行间属性再改变class和id，样式将不发生变化$⟶$只对class或者行间属性做改变
  元素.style.属性=xxx是修改行间样式，样式表中的样式不能涉及

• 匿名函数：将函数体不加名字写到对应的属性后

• window.onload:页面加载完成的时候发生

• 不能直接再HTML上添加自定义属性，要用js添加

• this:当前发生事件的元素

• innerHTML:可以插入字符也可以插入HTML语句

• ECMAScript：解释器，翻译(核心，基础)，几乎没有兼容性问题
  DOM(Document Object Model)：有操作HTML的能力，在JS中为document，有一些兼容问题
  BOM(Browser Object Model)：操作浏览器，在JS中为window，完全不兼容

• 判断是否是NaN，不能直接用==，因为NaN和NaN不相等，得用isNaN()

• 显式类型转换：parseInt() parseFloat()
  隐式类型转换：== 在比较前有时会先转换后比较，用===便是不转换直接比较

• 真：true，非0数字，非空字符串，非空对象
  假：false，数字0，空字符串，空对象，undefined

• JSON对象没有length属性，循环它得用for(var in JSON)

• 可变参数：函数体不传参而用一个arguments数组来获得所有参数，可以传参增强可读性
  通过对arguments数组的长度判断可以知道传入了多少个参数，间接达到函数重载

• 取非行间样式：(不能用来设置样式；只能用来取单一样式，不能取复合样式如:border
  IE7及以下：obj.currentStyle[name]
  Chrome及Firefox下：getComputedStyle(obj,无效参数可以任意写)[name]

• 数组定义方式：var arr=[]或var arr = new Array()

• 定时器：setInterval(间隔型：多次执行)
  setTimeout(延时型：一次执行)
  停止定时器：cllearInterval clearTimeout
  定时器会产生阻塞，会暂时跳过它执行后面的程序

• 获取系统时间的函数返回的都是数字不是字符串
  getDay()取值为0-6，0表示周日
  getMonth()取值为0-11

• 通过字符串下标访问字符串出现兼容问题，用str.charAt(i)可以避免此问题

• offsetLeft：返回当前容器相对与左部文档的偏移距离，相似的还有offsetTop

  • left获取或设置相对于具有定位属性的父对象的左边距，这同offsetLeft是相同的，区别在：
  1. style.left返回的是字符串，如28px，offsetLeft返回的是数值28
  2. style.left是读写的，offsetLeft是只读的
  3. 未事先定义和写在样式表里取得的值都为空，但offsetLeft可以取得

• childNodes获取子节点，会把文本节点也算进去

  • 解决方法：
  1. 用for循环判断nodeType==1为元素节点，nodeType==3为文本节点
  2. 用children直接取所有元素节点

• parentNodes 获取父节点

• offsetParent获取定位参照的父节点，没有则默认为body

• firstChild有兼容问题，也是把文本节点算入，解决方法同childNodes
firstChild——firstElementChild
lastChild——lastElementChild
nextSibling——nextElementSibling
previousSibliing——previousElementSibling

• DOM方式操作元素属性：

  • setAttribute(名称，属性)——设置
  • getAttribute(名称)——获取
  • removeAttribute(名称)——删除

• DOM元素灵活查找：用className选择元素，可以将其封装成函数，第一个参数为父节点，第二个参数为className，如：getByClass(oParent,sClass)

• DOM创建，插入和删除

  • 创建：
    createElement(标签名)然后需要指定在那个节点后插入
  • 插入：
    appendChild(节点)
insertBefore(节点，原有节点)
  • 删除
    removeChild(节点)都需要在父节点对子节点进行操作

• 文档碎片：理论上可以提高DOM操作性能，但高级浏览器基本无太大提升，可以忽略
  document.createDocumentFragment() 先将元素添加到x中，再将x添加到插入位置

• 表格应用：

  • tBodies(获取tbody，为数组)
  • tHead(表头thead)
  • tFoot(表尾tfoot)
  • rows(获取tr，数组)
  • cells(获取td，数组)

• Math.ceil 向上取整，Math.floor向下取整

• document.documentElement.scrollTop 获取当前页面的滚动条纵坐标位置
  或者也可以写document.body.scrollTop

• 获取当前页面滚动条横坐标位置：document.documentElement.scrollLeft或者document.body.scrollLeft

• 各浏览器下scrollTop的差异：
  IE6/7/8: 可以使用document.documentElement.scrollTop
  FireFox: window.pageYOffset或document.documentElement.scrollTop
  Safari:window.pageYOffset或document.body.scrollTop
  Chrome:document.body.scrollTop
  因为document.body.scrollTop和document.documentElement.scrollTop同时会有一个值生效，所以有一个始终为0，所以不考虑safari，可以使用：
  var sTop=document.body.scrollTop+documen.documentElement.scrollTop