本文主要是介绍JavaScript属性及正则表达式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录
- offset、client、scroll属性
-
- 正则表达式
- 什么是正则表达式
- 正则表达式的特点
- 正则表达式的创建
- 正则表达式的检验
- 正则表达式的修饰符
- 模式修饰符
- 边界符
- 预定义符
- 转义特殊字符
- 字符类
- 字符组合
- 取反符
- 量词符
- 括号字符
- 正则表达式的优先级
- String类中的方法
- match方法
- search方法
- split方法
- replace方法
offset、client、scroll属性
offset
offset:偏移量,利用offset可以动态的获取元素在页面中的位置信息、大小信息。
- offsetLeft:返回元素相对其带有定位的父元素左边框的偏移
- offsetTop:返回元素相对其带有定位的元素上方的偏移
- offsetWidth:返回自身的宽度(包括padding、边框和内容区域的宽度),注意返回数值不带单位
- offsetHeight:返回自身的高度(包括padding、边框和内容区域的高度),注意返回数值不带单位
- offsetParent:返回作为该元素带有定位元素的父级元素(如果父级都没有定位则返回body)
![在这里插入图片描述](/upload/202107/17/202107172206043129.png)
client
client:客户端,通过client可以获取元素在浏览器可视区的相关信息。
- clientLeft: 返回元素左边框的大小
- clientTop:返回元素上边框的大小
- clientWidth:返回自身的宽度(包含padding),内容区域的宽度(不含边框),注意返回数值不带单位
- clientHeight:返回自身的高度(包含padding),内容区域的高度(不含边框),注意返回数值不带单位
![client](/upload/202107/17/202107172206044223.png)
scroll
scroll:滚动条
- scrollHeight:返回元素的整体高度
- scrollWidth:返回元素的整体宽度
- scrollTop:返回元素上边缘与试图之间的距离
- scrollLeft:返回元素左边缘与试图之间的距离
![scroll](/upload/202107/17/202107172206045171.png)
正则表达式
什么是正则表达式
正则表达式:是一种描述字符串结构的语法规则,是用于匹配字符串中字符组合的模式,同时正则表达式也是对象。
正则表达式的特点
- 正则表达式的灵活性
- 逻辑性和功能性非常强
- 可以迅速的用极简单的方式达到字符串的复杂控制
正则表达式的创建
var 变量名 = /表达式/
var 变量名 = new RegExp(/表达式/)
正则表达式的检验
test( )方法用来检测字符串是否符合正则表达式。
正则表达式的修饰符
模式修饰符
/表达式/[模式修饰符]
- 模式修饰符是可选的,用于进一步对正则表达式进行设置
![正则表达式](/upload/202107/17/202107172206046108.png)
边界符
正则表达式中的边界符(位置符)用来提示字符所处的位置。
![边界符](/upload/202107/17/202107172206047060.png)
预定义符
![在这里插入图片描述](/upload/202107/17/202107172206048154.png)
![在这里插入图片描述](/upload/202107/17/202107172206049106.png)
![在这里插入图片描述](/upload/202107/17/202107172206050043.png)
![在这里插入图片描述](/upload/202107/17/202107172206050995.png)
转义特殊字符
转义字符:“\” 通过‘\’可以将正则表达式中的修饰符、边界符、预定义符等转换为普通字符。
字符类
字符类:是一个字符集,匹配相应字符,它就会找到该匹配项。
![在这里插入图片描述](/upload/202107/17/202107172206052090.png)
![在这里插入图片描述](/upload/202107/17/202107172206053041.png)
![在这里插入图片描述](/upload/202107/17/202107172206053979.png)
字符组合
如果允许用户输入英文字母(不区分大小写)、数字、短横线 -、下划线_的正则表达式为:
var reg = /^[a-zA-Z0-9_-]$/
取反符
当“ [ ] ”和“ ^ ”结合使用,称为取反符。
量词符
量词符:用来设定某个模式出现的次数。
![在这里插入图片描述](/upload/202107/17/202107172206054931.png)
括号字符
catch|er --> 能够匹配的是:catch 、er
cat(ch|er) --> 能够匹配的是: catch、cater
- 使用小括号可以进行分组,当小括号后面有量词符时,就表示对整个组进行操作
abc{2} --> 能够匹配的是:abcc
a(bc){2} --> 能够匹配的是:abcbc
正则表达式的优先级
![在这里插入图片描述](/upload/202107/17/202107172206056025.png)
String类中的方法
match方法
match( ):根据正则匹配出符合要求的内容并保存在数组中,返回的是数组,匹配失败返回false。
search方法
search( ):方法可以返回指定模式的子串在字符串首次出现的位置,返回的是索引。
split方法
split( ):用于根据指定的分隔符将一个字符串分割成字符串数组,其分割后的字符串数组中不包括分隔符,也可以指定分割次数。
replace方法
replace( ):用于替换字符串,用来操作的参数可以是一个字符串或正则表达式。
这篇关于JavaScript属性及正则表达式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!