JavaScript基础

摘要：笔记引用类型类型创建方法一方法二中使用的元字符因为有特殊的意义所以需要转义如匹配使用构造函数创建的参数因为是字符串所以要进行双重转义如实例属性是否设置了是否这是了是否设置了开始搜索下一个匹配的字符串位置从开始表达式的字符串表示实例方法方法一

笔记

5. 引用类型

5.4 RegExp 类型

创建 :

方法一

var expression = / pattern / flags
flags: g | i | m

方法二

var expression = new RegExp(pattern, flags) // pattern | flags (string)

pattern中使用的元字符因为有特殊的意义, 所以需要转义. 如:
匹配 "[bc]at" => pattern = /[bc]at/i, 使用构造函数创建的参数因为是字符串所以要进行双重转义, 如:

 /[bc]at/           ==>     "[bc]at"
 /whello123/     ==>     "wwhello123" 

5.4.1 实例属性:

pattern.global     // true 是否设置了g
pattern.ignoreCase // true 是否这是了i
pattern.multiline  // true 是否设置了m
pattern.lastIndex  // 0 开始搜索下一个匹配的字符串位置, 从0开始
pattern.source     // "[bc]at" 表达式的字符串表示

5.4.2 实例方法:

方法一 pattern.exec(str)

var text = "mom and dad and baby"
var pattern = /mom( and dad( and baby)?)?/gi

var matches = pattern.exec(text)
console.log(matches.index) // 0
console.log(matches.input) // "mom and dad and bady"
console.log(matches[0])    // "mom and dad and bady"
console.log(matches[1])    // "and dad and bady"
console.log(matches[2])    // "and bady"

对于exec()方法中模式的g, 即使设置了一次也只会返回一个匹配项, 但是多次调用该方法可以返回新匹配项的信息同时lastIndex会有变化, 而不设置则始终返回第一个匹配项的信息, 如:

var text     = "cat, bat, sat, fat",
    pattern1 = /.at/
var matches = pattern1.exec(text)
console.log(matches.index)      // 0
console.log(pattern1.lastIndex) // 0
console.log(matches[0])         // cat

var matches = pattern1.exec(text)
console.log(matches.index)      // 0
console.log(pattern1.lastIndex) // 0
console.log(matches[0])         // cat

var pattern2 = /.at/g

var matches2 = pattern2.exec(text)
console.log(matches2.index)     // 0
console.log(pattern2.lastIndex) // 3
console.log(matches2[0])        // cat

var matches2 = pattern2.exec(text)
console.log(matches2.index)     // 5
console.log(pattern2.lastIndex) // 8
console.log(matches2[0])        // cat

IE的lastIndex属性存在偏差, 即使非全局模式下, lastIndex属性也会变化

方法二 pattern.test(str)
如果str如pattern匹配则返回true否则返回false

var text    = "000-00-0000",
    pattern = /d{3}-d{2}-d{4}/
    
if (pattern.test(text)) {
    alert("ok!")
}

其他方法

var pattern = new RegExp("[bc]at", "gi")
pattern.toString()       // /[bc]at/gi
pattern.toLocaleString() // /[bc]at/gi
pattern.valueOf()        // /[bc]at/gi

5.4.3 RegExp 构造函数属性

var text = "this has been a short summer",
    pattern = /(.)hort/g
if (pattern.test(text)) {
    console.log(RegExp.input)        // this has been a short summer 最近一次匹配的字符串
    console.log(RegExp.leftContext)  // this has been a 匹配项左侧文本
    console.log(RegExp.rightContext) // summer 匹配项右侧文本
    console.log(RegExp.lastMatch)    // short 最近一次匹配项
    console.log(RegExp.lastParen)    // s 最近一次匹配组
    console.log(RegExp.multiline)    // false 是否使用多行模式
}

也可以使用

var text = "this has been a short summer",
    pattern = /(.)hort/g
if (pattern.test(text)) {
    console.log(RegExp.$_)     // this has been a short summer 最近一次匹配的字符串
    console.log(RegExp.["$`"]) // this has been a 匹配项左侧文本
    console.log(RegExp.["$""]) // summer 匹配项右侧文本
    console.log(RegExp.["$&"]) // short 最近一次匹配项
    console.log(RegExp.["$+"]) // s 最近一次匹配组
    console.log(RegExp.["$*"]) // false 是否使用多行模式
}

其他属性RegExp.$1, RegExp.$2 ... RegExp.$9

var text = "this has been a short summer",
    pattern = /(..)or(.)/g
if (pattern.test(text)) {
    console.log(RegExp.$1) // sh
    console.log(RegExp.$2) // t
}

15. DOM

15.6.1 创建节点

方法一
创建Element节点document.createElement("tagName")
创建Text节点document.createTextNode("text")

方法二
element.cloneNode(true)
非IE中element.importNode(true)

15.6.2 插入节点

parentNode.appendChild(node)

parentNode.insertBefore(node, parentNode.childNode[i])
注: 如果节点已经存在, 节点将从当前位置删除插入新位置.

15.6.3 替换删除节点

n.parentNode.removeChild(n)

n.parentNode.replaceChild(newNode, n)

15.6.4 DocumentFragment

document.createDocumentFragment()

15.8.1

scrollLeft, scrollTop滚动条位置

function getScrollOffsets (w) {
    w = w || window
    
    // <=IE8不支持, 其他都支持
    if (w.pageXOffset != null) return {x: w.pageXOffset, y: w.pageYOffset }
    
    // 标准模式下的IE以及任何浏览器
    var d = w.document
    if (document.compatMode == "CSS1Compat") return {x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop}
    
    // 怪异模式
    return {x: d.body.scrollLeft, y: d.body.scrollTop}
} 

clientWidth, clientHeight视口(窗口)尺寸

function getViewportSize (w) {
    w = w || window
    
    // <=IE8不支持, 其他都支持
    if (w.innerWidth != null) return {w: w.innerWidth, h: w.innerHeight} 
    
    // 标准模式下的IE以及任何浏览器
    if (document.campatMode == "CSS1Compat") return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight}
    
    // 对怪异模式下的浏览器
    return {w: d.body.clientWidth, h: d.body.clientHeight}
}

15.8.2 查询元素的几何尺寸

box = e.getBindingClientRect()

box = {
    left:   "左上角水平",
    top:    "左上角垂直",
    right:  "右下角水平",
    bottom: "右下角垂直"  
}

内联元素
arr = e.getClientRects()

注: getBindingClientRect, getClientRects不是"实时的"

15.8.3 判断某点上的元素

document.elementFromPoint(x, y)(视口坐标)返回最里面和最上面的元素

15.8.4 滚动

scroll(), scrollTop(), scrollLeft(), scrollTo()

scrollBy()和以上几种方法类似, 但是它是相对的,在当前滚动条的偏移量上增加
setInterval(function() {scrollBy(0, 10)}, 200)

e.scrollIntoView()将元素上边缘放在接近视口的上边缘
e.scrollINtoView(false)将元素下边缘放在接近视口的上边缘, 该方法类似锚点

15.8.5 元素尺寸, 位置, 溢出的更多信息

offsetWidth        clientWidth        scrollWidth
offsetHeight       clientHeight       scrollHeight
offsetLeft         clientLeft         scrollLeft
offsetTop          clientTop          scrollTop
offsetParent

offset
offsetWidth, offsetHeight返回不包含margin. 大多数元素返回文档坐标, 但定位和一些其他元素(如表格单元), 返回相对祖先元素非文档, offsetParent返回相对祖先元素, 如果offsetParent为null, 这些属性都是文档坐标

不包含滚动条的情况
function getElementPosition(e) {
    var x = 0, y = 0
    while(e != null) {
        x += e.offsetLeft
        y += e.offsetTop
        e = e.offsetParent
    }
    return {x: x, y:y}
}

client
clientWidth, clientHeight 返回不包含margin border 滚动条 内联元素总返回0, clientLeft clientTop返回包含滚动条

function getElementPositon () {
    var x = 0, y = 0
    for(var e = elt; e != null; e = e.offsetParent) {
        x += e.offsetLeft
        y += e.offsetTop
    }    
    for (var e = elt.parentNode; e != null && e.noeType == 1; e = e.parentNode) {
        x -= e.scrollLeft
        y -= e.scrollTop
    }
    return {x: x, y:y}
}