JS中的BOM、正则表达式、定时器
一、BOM
浏览器对象模型 (BOM-Browser Object Model) 使 JavaScript 有能力与浏览器"对话"。
由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。
1.1 window
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一
Window Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。 一些例子:
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.href 属性返回当前页面的 URL(重要)
location.assign() 方法加载新的文档
<html>
<head>
<script>
function newDoc(){window.location.assign("http://www.baidu.com/")}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>
Window History
window.history 对象包含浏览器的历史。
window.history 对象在编写时可不使用 window 这个前缀。
history.back() 与在浏览器点击后退按钮相同
history.forward() 与在浏览器中点击按钮向前相同
一些方法示例如下:
1.1.1 location
表示当前浏览器的链接地址
可以读取地址
可以修改地址
<body><input type="text" name="url" id="url" placeholder="请输入链接地址..."/><button type="button" onclick="showUrl()">打印当前链接</button><button type="button" onclick="toUrl()">跳转</button><button type="button" onclick="assignUrl()">替换url</button></body><script type="text/javascript">/* 打印当前链接*/function showUrl(){console.log(window.location.href);}/*** 跳转* 1、获取输入框中的链接* 2、修改location的href属性*/function toUrl(){// 获取输入的内容var newUrl = document.getElementById("url").value;// 修改href属性location.href = newUrl;}</script>
1.1.2 history
浏览器历史
能控制浏览器页面的前进和后退的跳转(有历史记录才可以跳转)
<body style="background-color: antiquewhite;"><a href="a.html">a页面</a><a href="b.html">b页面</a><hr ><button type="button" onclick="backPage()">上一页</button><button type="button" onclick="forwardPage()">下一页</button></body><script type="text/javascript">// 后退一页function backPage(){window.history.back();}// 前进一页function forwardPage(){window.history.forward();}</script>
二、定时器
设置定时器
setInterval(调用函数,毫秒时间):每间隔固定毫秒值就执行一次函数
setTimeout(调用函数,毫秒时间):在固定时间之后执行一次调用函数
关闭定时器:
clearInterval(定时器名称)
clearTimeout(定时器名称)
<button onclick="showTimeout()">演示-setTimeOut定时器</button><button onclick="closeTimeout()">演示-关闭setTimeOut定时器</button><br><button onclick="showInterval()">演示-setInterval定时器</button><button onclick="closeInterval()">演示-关闭setInterval定时器</button>
/*** 定时执行* 每间隔指定的时间执行一次* * 倒计时执行* 给定义一个时间,时间到了执行一次*/<script>var name1;function showTimeout() {// setTimeout的两个参数,第一个为一个匿名函数,第二个为秒数name1 = setTimeout(function () {alert("基你太美");}, 4000);}function closeTimeout() {clearTimeout(name1);}var name2;function showInterval() {var i = 1;name2 = setInterval(function () {console.log(i++);}, 1);}function closeInterval() {clearInterval(name2);}
练习:随机点名(新手版)
<div style="width: 100px;height: 80px;border: 2px red solid;background-color: skyblue; "><div id="nd" style="text-align: center;margin-top:20%">人名</div></div><hr><button onclick="begin()">Start</button><button onclick="end()">Stop</button><script>var name;function begin() {var nameArr = ["0000", "1111", "2222", "3333", "4444"];name = setInterval(function () {var index = parseInt(Math.random() * nameArr.length);// console.log(index);// var n = nameArr[index];// var div = document.getElementById("nd");// div.innerText = n;document.getElementById("nd").innerText = nameArr[index];}, 20)}function end() {clearInterval(name);}</script>
三、正则表达式
Regular Expression (RegExp)
3.1 正则表达式
正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。
语法:
var patt=new RegExp(pattern,modifiers);
var patt=/pattern/modifiers;
3.2 基本知识
var re = new RegExp("模板");
var re = /模板/;
方括号:用于查找某个范围内的字符
表达式 |
描述 |
[abc] |
查找方括号之间的任何字符。 |
[^abc] |
查找任何不在方括号之间的字符。 |
[0-9] |
查找任何从 0 至 9 的数字。 |
[a-z] |
查找任何从小写 a 到小写 z 的字符。 |
[A-Z] |
查找任何从大写 A 到大写 Z 的字符。 |
[A-z] |
查找任何从大写 A 到小写 z 的字符。(由于是按照ASCII码,A为65,a为97,中间不止26个值(26个字母),因此这个判断A-z会出问题) 应该[A-Za-z] |
(red|blue|green) |
查找任何指定的选项。 |
元字符(Metacharacter):是拥有特殊含义的字符:
元字符 |
描述 |
. |
查找单个字符,除了换行和行结束符。 |
\w |
查找单词字符。 |
\W |
查找非单词字符。 |
\d |
查找数字。 |
\D |
查找非数字字符。 |
\s |
查找空白字符。 |
\S |
查找非空白字符。 |
\b |
匹配单词边界。 |
\B |
匹配非单词边界。 |
\0 |
查找 NULL 字符。 |
\n |
查找换行符。 |
\f |
查找换页符。 |
\r |
查找回车符。 |
\t |
查找制表符。 |
\v |
查找垂直制表符。 |
\xxx |
查找以八进制数 xxx 规定的字符。 |
\xdd |
查找以十六进制数 dd 规定的字符。 |
\uxxxx |
查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词:用于表示重复次数的含义
量词 |
描述 |
n+ |
匹配任何包含至少一个 n 的字符串。例如,/a+/ 匹配 "candy" 中的 "a","caaaaaaandy" 中所有的 "a"。 |
n* |
匹配任何包含零个或多个 n 的字符串。例如,/bo*/ 匹配 "A ghost booooed" 中的 "boooo","A bird warbled" 中的 "b",但是不匹配 "A goat grunted"。 |
n? |
匹配任何包含零个或一个 n 的字符串。例如,/e?le?/ 匹配 "angel" 中的 "el","angle" 中的 "le"。 |
n{X} |
匹配包含 X 个 n 的序列的字符串。例如,/a{2}/ 不匹配 "candy," 中的 "a",但是匹配 "caandy," 中的两个 "a",且匹配 "caaandy." 中的前两个 "a"。 |
n{X,} |
X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如,/a{2,}/ 不匹配 "candy" 中的 "a",但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。 |
n{X,Y} |
X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次,至多 Y 次时匹配。例如,/a{1,3}/ 不匹配 "cndy",匹配 "candy," 中的 "a","caandy," 中的两个 "a",匹配 "caaaaaaandy" 中的前面三个 "a"。注意,当匹配 "caaaaaaandy" 时,即使原始字符串拥有更多的 "a",匹配项也是 "aaa"。 |
n{X} |
前面的模式 n 连续出现X 次时匹配 |
n$ |
匹配任何结尾为 n 的字符串。 |
^n |
匹配任何开头为 n 的字符串。 |
?=n |
匹配任何其后紧接指定字符串 n 的字符串。 |
?!n |
匹配任何其后没有紧接指定字符串 n 的字符串。 |
PS:
+ [1,+无穷]
* 任意个
? [0,1]
RegExp 对象方法
方法 |
描述 |
compile |
编译正则表达式。 |
exec |
检索字符串中指定的值。返回找到的值,并确定其位置。 |
test |
检索字符串中指定的值。返回 true 或 false。 |
正则表达式的使用
test方法:搜索字符串指定的值,根据结果并返回真或假
exec() 方法:检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
3.3 演示
<body>数据<input id="i1" onblur="checkData()" /><script>var i1 = document.getElementById("i1");function checkData() {var val = i1.value;// 创建正则表达式1// var reg = new RegExp("[0-9]");// 创建正则表达式2var reg = /[0-9]/; // 模板1: 判断内容是否包含0-9之间任何一个数字var reg2 = /[a]/; // 模板2: 是否包含avar reg3 = /[abc]/; // 模板3: 是否包含abc中任何一个var reg4 = /[a-z]/; // 模板4: 是否包含a-z中任何一个var reg5 = /[A-Z]/; // 模板5: 是否包含A-Z中任何一个var reg6 = /[a-zA-Z]/; // 模板6: 是否包含大小写中任何一个var reg7 = /[A-z]/; // 模板7: 是否包含大小写中任何一个(因为ascll码值)var reg8 = /[0-9A-Za-z]/; // 模板8: 是否包含数字或者字母var reg9 = /[\dA-Za-z]/; // 模板9: 是否包含数字或者字母var reg10 = /\d+/; // 匹配至少一个数字var reg11 = /\d*/; // 匹配0或者多个数字var reg12 = /\d?/; // 匹配0或者1个,只要字符串内有1个或0个就对var reg13 = /^\d?$/; // 匹配整个内容中只能有0或者1个数字var reg14 = /^\d{4}$/; // 整个内容中只能有数字,且数字个数是4位var reg15 = /^\d{4,6}$/; // 整个内容中只能有数字,且数字个数是4-6位var reg16 = /^\d{4,}$/; // 整个内容中只能有数字,且数字个数是至少4位// 匹配手机号// 手机号开头必须是1,第二位可以是3,5,6,8,9,后续数字任意,总长得11位var reg17 = /^1[35689]\d{9}$/;// 匹配邮箱 237876779@qq.com// 开头是数字或者字母,其中必须包含@符号,@后可以是数字和字母,必须有.符号,后面必须是字母// .是正则表达式的特殊符号,需要转移var reg18 = /^[\dA-Za-z]+@[\da-z]+\.[a-z]+$/;console.log(reg18.test(val));// 置空// i1.value = "";// 重点是能看懂就行,会写简单模板}</script></body>
eg:
<input type="text" id="i1" onblur="checkData()"><script>function checkData() {// 获得输入框的值var i1 = document.getElementById("i1");var val = i1.value;// 创建正则表达式的模板// var reg = /[abc]/;// var reg = /[^abc]/;//手机号:// 需求1:全数字,长度固定11// var reg = /^[\d]{11}$/;// 需求2:首位是1,第二位3,5,6,7,8后面任意// var reg = /^1[35678]{1}[\d]{9}$/;// 邮箱// 需求:前面数字或者字母至少一个以上// 中间必须有@符号// @后面是数字或者字母,至少以为一个以上// 再后必须有.符号// .后必须是字母 // var reg = /^[\d\w]+[\@][\d\w]+[\.][a-z]+$/;var reg = /^[\dA-Za-z]+@[\dA-Za-z]+\.[a-z]+$/;var result = reg.test(val);console.log(result);}</script>
JS中的BOM、正则表达式、定时器相关推荐
- JavaScript基础(3)-JS中的面向对象、定时器、BOM、位置信息
一.创建对象的几种常用方式. 1.使用Object或对象字面量创建对象: a.使用Object()内置的构造函数来创建对象,例如: var student = new Object(); // 创建一 ...
- python 全栈开发,Day54(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)...
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
- js中的两种定时器setTimeout()和setInterval()怎么用
JS有两种定时器分别是setTimeout()和setInterval(),这两个区别就是setTimeout()是一次性的定时器,而setInterval()是循环的定时器. 定时器的精度 js中的 ...
- JS中的BOM 详解
BOM:Browser Object Model,浏览器对象模型,提供一系列与浏览器相关的信息. BOM对象:分为window对象和window子对象(screen对象,location对象,navi ...
- php正则匹配js中变量_PHP正则表达式核心技术 第4节 php查找匹配函数使用心得
作者:极客小俊 一个专注于web技术的80后 你不用拼过聪明人,你只需要拼过那些懒人 你就一定会超越大部分人! php中兼容Perl的正则表达式处理函数 在我们说php系统自带的正则处理函数之前,我们 ...
- php正则匹配js中变量_PHP正则表达式核心技术完全详解 第12节 [附加知识] 断言匹配...
作者:极客小俊 一个专注于web技术的80后 我不用拼过聪明人,我只需要拼过那些懒人 我就一定会超越大部分人! 极客小俊@知乎,官方首发原创文章 博客: 极客小俊GeekerJun PHP正则中的断言 ...
- js中常用的正则表达式
过滤script标签 var filterScript = function(str){ var reg=new RegExp("<.*?script[^>]*?> ...
- js中按钮去触发定时器,那么多次点击这个定时器会越来越快,解决方法
并不是越来越快, 而是越来越多; $('button:first').click(function(){ // 记录ID var timerId = setInterval(function(){ c ...
- php的正则表达式函数,php中常用的正则表达式函数
php中常用的正则表达式函数 * preg_match() * preg_match_all() * preg_replace() * preg_filter() * preg_grep() * pr ...
最新文章
- 小结spring和struts整合的三类方式
- js 实时监听input中值变化
- python sys干嘛的_Python之sys模块
- leetcode387. 字符串中的第一个唯一字符
- react如何卸载组件_18道 React 面试必考题含解答面试高频
- 77GHz毫米波雷达快速chirp信号技术(二):测速原理
- 平板电脑android 管理软件,应用宝HD下载V5.2.0.142 安卓版-Android平板电脑(aPad)专用西西软件下载...
- python 打开txt文件
- Rhodamine-PEG-Pyrene,罗丹明聚乙二醇芘丁酸,Pyrene-PEG-RB
- javaweb项目实训总结_JAVA WEB实训总结
- [转]如何查找最新文献
- Android listview图片刷新闪烁
- 正确计算linux系统内存使用率
- 逆向爬虫14 Mongo入门
- echarts 定制legend内容,显示和位置
- 第三方App接入微信登录 解读 (微信开放平台)
- MySQL批量导入Excel数据【超详细】
- 上号神器,穿越火线扫码登录教程
- CPU密集型与IO密集型
- 仙剑奇侠传2java_仙剑奇侠传1系列:2.编译主程序SDLPAL及SDL