资讯专栏INFORMATION COLUMN

JavaScript基础

Miracle_lihb / 2858人阅读

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

笔记

</>复制代码

  1. 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, 使用构造函数创建的参数因为是字符串所以要进行双重转义, 如:

</>复制代码

  1. /[bc]at/ ==> "[bc]at"
  2. /whello123/ ==> "wwhello123"

5.4.1 实例属性:

</>复制代码

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

5.4.2 实例方法:

方法一 pattern.exec(str)

</>复制代码

  1. var text = "mom and dad and baby"
  2. var pattern = /mom( and dad( and baby)?)?/gi
  3. var matches = pattern.exec(text)
  4. console.log(matches.index) // 0
  5. console.log(matches.input) // "mom and dad and bady"
  6. console.log(matches[0]) // "mom and dad and bady"
  7. console.log(matches[1]) // "and dad and bady"
  8. console.log(matches[2]) // "and bady"

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

</>复制代码

  1. var text = "cat, bat, sat, fat",
  2. pattern1 = /.at/
  3. var matches = pattern1.exec(text)
  4. console.log(matches.index) // 0
  5. console.log(pattern1.lastIndex) // 0
  6. console.log(matches[0]) // cat
  7. var matches = pattern1.exec(text)
  8. console.log(matches.index) // 0
  9. console.log(pattern1.lastIndex) // 0
  10. console.log(matches[0]) // cat
  11. var pattern2 = /.at/g
  12. var matches2 = pattern2.exec(text)
  13. console.log(matches2.index) // 0
  14. console.log(pattern2.lastIndex) // 3
  15. console.log(matches2[0]) // cat
  16. var matches2 = pattern2.exec(text)
  17. console.log(matches2.index) // 5
  18. console.log(pattern2.lastIndex) // 8
  19. console.log(matches2[0]) // cat

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

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

</>复制代码

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

其他方法

</>复制代码

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

5.4.3 RegExp 构造函数属性

</>复制代码

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

也可以使用

</>复制代码

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

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

</>复制代码

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

</>复制代码

  1. 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滚动条位置

</>复制代码

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

clientWidth, clientHeight视口(窗口)尺寸

</>复制代码

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

15.8.2 查询元素的几何尺寸

box = e.getBindingClientRect()

</>复制代码

  1. box = {
  2. left: "左上角水平",
  3. top: "左上角垂直",
  4. right: "右下角水平",
  5. bottom: "右下角垂直"
  6. }

内联元素
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 元素尺寸, 位置, 溢出的更多信息

</>复制代码

  1. offsetWidth clientWidth scrollWidth
  2. offsetHeight clientHeight scrollHeight
  3. offsetLeft clientLeft scrollLeft
  4. offsetTop clientTop scrollTop
  5. offsetParent

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

</>复制代码

  1. 不包含滚动条的情况
  2. function getElementPosition(e) {
  3. var x = 0, y = 0
  4. while(e != null) {
  5. x += e.offsetLeft
  6. y += e.offsetTop
  7. e = e.offsetParent
  8. }
  9. return {x: x, y:y}
  10. }

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

scroll
scrollWidth scrollHeight内容区域加内边距加溢出内容尺寸,scrollLeft scrolTop滚动条的位置, 可写属性, 改写getElementPosition

</>复制代码

  1. function getElementPositon () {
  2. var x = 0, y = 0
  3. for(var e = elt; e != null; e = e.offsetParent) {
  4. x += e.offsetLeft
  5. y += e.offsetTop
  6. }
  7. for (var e = elt.parentNode; e != null && e.noeType == 1; e = e.parentNode) {
  8. x -= e.scrollLeft
  9. y -= e.scrollTop
  10. }
  11. return {x: x, y:y}
  12. }

getElementPosition可以在不支持getBoundingClientRect的浏览器中使用, 但低效, 不可靠, 不支持的浏览器最好用JQuery类库

15.9

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82670.html

相关文章

  • 基础巩固:JavaScript基础总结(基本概念篇)

    摘要:基础巩固基础总结使用已经好几年了,由于工作主要是做服务端开发,在工作中逐渐发现的使用范围原来越广泛。这里要注意,务必将基础部分掌握牢靠,磨刀不误砍柴功,只有将基础部分掌握并建立起系统的知识体系,在后面学习衍生的其他模式才能游刃有余。 基础巩固:JavaScript基础总结 使用JavaScript已经好几年了,由于工作主要是做服务端开发,在工作中逐渐发现JavaScript的使用范围原...

    YuboonaZhang 评论0 收藏0
  • 那些年,我的前端/Java后端书单

    摘要:全文为这些年,我曾阅读深入理解过或正在阅读学习即将阅读的一些优秀经典前端后端书籍。当然,如果您喜欢这篇文章,可以动手点点赞或者收藏。 全文为这些年,我曾阅读、深入理解过(或正在阅读学习、即将阅读)的一些优秀经典前端/Java后端书籍。全文为纯原创,且将持续更新,未经许可,不得进行转载。当然,如果您喜欢这篇文章,可以动手点点赞或者收藏。 基础 基础书籍 进阶 进阶阶段,深入学习的书...

    fxp 评论0 收藏0
  • 那些年,我的前端/Java后端书单

    摘要:全文为这些年,我曾阅读深入理解过或正在阅读学习即将阅读的一些优秀经典前端后端书籍。当然,如果您喜欢这篇文章,可以动手点点赞或者收藏。 全文为这些年,我曾阅读、深入理解过(或正在阅读学习、即将阅读)的一些优秀经典前端/Java后端书籍。全文为纯原创,且将持续更新,未经许可,不得进行转载。当然,如果您喜欢这篇文章,可以动手点点赞或者收藏。 基础 基础书籍 进阶 进阶阶段,深入学习的书...

    Tecode 评论0 收藏0
  • 那些年,我的前端/Java后端书单

    摘要:全文为这些年,我曾阅读深入理解过或正在阅读学习即将阅读的一些优秀经典前端后端书籍。当然,如果您喜欢这篇文章,可以动手点点赞或者收藏。 全文为这些年,我曾阅读、深入理解过(或正在阅读学习、即将阅读)的一些优秀经典前端/Java后端书籍。全文为纯原创,且将持续更新,未经许可,不得进行转载。当然,如果您喜欢这篇文章,可以动手点点赞或者收藏。 基础 基础书籍 进阶 进阶阶段,深入学习的书...

    VPointer 评论0 收藏0
  • 那些年,我的前端/Java后端书单

    摘要:全文为这些年,我曾阅读深入理解过或正在阅读学习即将阅读的一些优秀经典前端后端书籍。当然,如果您喜欢这篇文章,可以动手点点赞或者收藏。 全文为这些年,我曾阅读、深入理解过(或正在阅读学习、即将阅读)的一些优秀经典前端/Java后端书籍。全文为纯原创,且将持续更新,未经许可,不得进行转载。当然,如果您喜欢这篇文章,可以动手点点赞或者收藏。 基础 基础书籍 进阶 进阶阶段,深入学习的书...

    idealcn 评论0 收藏0
  • 程序员练级攻略(2018):前端基础和底层原理

    摘要:下面我们从前端基础和底层原理开始讲起。对于和这三个对应于矢量图位图和图的渲染来说,给前端开发带来了重武器,很多小游戏也因此蓬勃发展。这篇文章受众之大,后来被人重新整理并发布为,其中还包括中文版。 showImg(https://segmentfault.com/img/bVbjM5r?w=1142&h=640); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 这...

    widuu 评论0 收藏0

发表评论

0条评论

Miracle_lihb

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<