摘要：筆記引用類(lèi)型類(lèi)型創(chuàng)建方法一方法二中使用的元字符因?yàn)橛刑厥獾囊饬x所以需要轉(zhuǎn)義如匹配使用構(gòu)造函數(shù)創(chuàng)建的參數(shù)因?yàn)槭亲址砸M(jìn)行雙重轉(zhuǎn)義如實(shí)例屬性是否設(shè)置了是否這是了是否設(shè)置了開(kāi)始搜索下一個(gè)匹配的字符串位置從開(kāi)始表達(dá)式的字符串表示實(shí)例方法方法一

筆記

5. 引用類(lèi)型

5.4 RegExp 類(lèi)型

創(chuàng)建 :

方法一

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

方法二

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

pattern中使用的元字符因?yàn)橛刑厥獾囊饬x, 所以需要轉(zhuǎn)義. 如:
匹配 "[bc]at" => pattern = /[bc]at/i, 使用構(gòu)造函數(shù)創(chuàng)建的參數(shù)因?yàn)槭亲址砸M(jìn)行雙重轉(zhuǎn)義, 如:

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

5.4.1 實(shí)例屬性:

pattern.global     // true 是否設(shè)置了g
pattern.ignoreCase // true 是否這是了i
pattern.multiline  // true 是否設(shè)置了m
pattern.lastIndex  // 0 開(kāi)始搜索下一個(gè)匹配的字符串位置, 從0開(kāi)始
pattern.source     // "[bc]at" 表達(dá)式的字符串表示

5.4.2 實(shí)例方法:

方法一 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"

對(duì)于exec()方法中模式的g, 即使設(shè)置了一次也只會(huì)返回一個(gè)匹配項(xiàng), 但是多次調(diào)用該方法可以返回新匹配項(xiàng)的信息同時(shí)lastIndex會(huì)有變化, 而不設(shè)置則始終返回第一個(gè)匹配項(xiàng)的信息, 如:

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屬性也會(huì)變化

方法二 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 構(gòu)造函數(shù)屬性

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 匹配項(xiàng)左側(cè)文本
    console.log(RegExp.rightContext) // summer 匹配項(xiàng)右側(cè)文本
    console.log(RegExp.lastMatch)    // short 最近一次匹配項(xiàng)
    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 匹配項(xiàng)左側(cè)文本
    console.log(RegExp.["$""]) // summer 匹配項(xiàng)右側(cè)文本
    console.log(RegExp.["$&"]) // short 最近一次匹配項(xiàng)
    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 創(chuàng)建節(jié)點(diǎn)

方法一
創(chuàng)建Element節(jié)點(diǎn)document.createElement("tagName")
創(chuàng)建Text節(jié)點(diǎn)document.createTextNode("text")

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

15.6.2 插入節(jié)點(diǎn)

parentNode.appendChild(node)

parentNode.insertBefore(node, parentNode.childNode[i])
注: 如果節(jié)點(diǎn)已經(jīng)存在, 節(jié)點(diǎn)將從當(dāng)前位置刪除插入新位置.

15.6.3 替換刪除節(jié)點(diǎn)

n.parentNode.removeChild(n)

n.parentNode.replaceChild(newNode, n)

15.6.4 DocumentFragment

document.createDocumentFragment()

15.8.1

scrollLeft, scrollTop滾動(dòng)條位置

function getScrollOffsets (w) {
    w = w || window
    
    // <=IE8不支持, 其他都支持
    if (w.pageXOffset != null) return {x: w.pageXOffset, y: w.pageYOffset }
    
    // 標(biāo)準(zhǔn)模式下的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} 
    
    // 標(biāo)準(zhǔn)模式下的IE以及任何瀏覽器
    if (document.campatMode == "CSS1Compat") return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight}
    
    // 對(duì)怪異模式下的瀏覽器
    return {w: d.body.clientWidth, h: d.body.clientHeight}
}

15.8.2 查詢(xún)?cè)氐膸缀纬叽?/p>

box = e.getBindingClientRect()

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

內(nèi)聯(lián)元素
arr = e.getClientRects()

注: getBindingClientRect, getClientRects不是"實(shí)時(shí)的"

15.8.3 判斷某點(diǎn)上的元素

document.elementFromPoint(x, y)(視口坐標(biāo))返回最里面和最上面的元素

15.8.4 滾動(dòng)

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

scrollBy()和以上幾種方法類(lèi)似, 但是它是相對(duì)的,在當(dāng)前滾動(dòng)條的偏移量上增加
setInterval(function() {scrollBy(0, 10)}, 200)

e.scrollIntoView()將元素上邊緣放在接近視口的上邊緣
e.scrollINtoView(false)將元素下邊緣放在接近視口的上邊緣, 該方法類(lèi)似錨點(diǎn)

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

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

offset
offsetWidth, offsetHeight返回不包含margin. 大多數(shù)元素返回文檔坐標(biāo), 但定位和一些其他元素(如表格單元), 返回相對(duì)祖先元素非文檔, offsetParent返回相對(duì)祖先元素, 如果offsetParent為null, 這些屬性都是文檔坐標(biāo)

不包含滾動(dòng)條的情況
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 滾動(dòng)條 內(nèi)聯(lián)元素總返回0, clientLeft clientTop返回包含滾動(dòng)條

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}
}