JavaScript后续

JavaScript后续

正则表达式

1.什么是正则?

正则表达式，又称规则表达式。(英语:Regular Expression，在代码中常简写为regex、regexp或RE)，计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。

2.正则的常用符号

1.位置符号

    ^		开头
	$		结尾
	例子:/^内容$/
	重点:在JS中不要忘了开头和结尾符号,否则会出现错误

2.次数符号

  *             0或多个
  +             1或多个
  ?	            0或1个
 {n}		    n个
 {n,}           至少n个
 {n,m}	        n-m的范围内
 例子:/^[1-9]*$/ 
     /^[1-9]+$/ 
     /^[1-9]?$/
     /^[1-9]{n}$/
     /^[1-9]{n,}$/ 
     /^[1-9]{n,m}$/ 

3.通配符

        \d		任意数字
		\D		任意非数字
		\s		任意空白
		\S		任意非空白
		\w		查找单词字符
		\W		查找非单词字符
		\b		匹配单词边界。
		\B		匹配非单词边界。
		.		任意字符（除'\n'外）

4.修饰符

        g      执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
	    i     （忽略大小写）执行对大小写不敏感的匹配 
	    m      执行多行匹配。

5.方括号(用于查询范围内的字符)

[abc]  查找方括号之间的任何字符。

[^abc]  查找任何不在方括号之间的字符。

[0-9]  查找任何从 0 至 9 的数字。

[a-z]  查找任何从小写 a 到小写 z 的字符。

[A-Z]  查找任何从大写 A 到大写 Z 的字符。

[A-z]  查找任何从大写 A 到小写 z 的字符。

[adgk]  查找给定集合内的任何字符。

[^adgk]  查找给定集合外的任何字符。

(red|blue|green)  查找任何指定的选项。

3.正则的创建方式

        
	1.	var regex = new RegExp("正则表达式", "标志");
		
	2.	var regex = /正则表达式/标志
	
	个人建议:第二种更加直观，学习起来更加容易

4.正则的方法

1.test() 检索字符串中指定的值。返回 true 或 false。

<script type="text/javascript">
var str = "Best Lee";
var x1 = new RegExp("Lee");
var result = x1.test(str);
document.write("Result: " + result);
</script>

2.exec() 检索字符串中指定的值。返回找到的值，并确定其位置。

var str  ="wo shi yi ge hao ren"; 

var myRegx=/\b[a-z]{3}\b/g;

var s=myRegx.exec(str); 

3.compile() 编译正则表达式。(用的较少)

4.JS常用正则表达式

1.手机号

/^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/

2.日期

/^\d{4}(-)\d{1,2}\1\d{1,2}$/

3.email地址

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

4.身份证号(15或18位)

/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

5.中国邮政编码

/^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/

BOM(Browser Object Model 浏览器对象模型)

BOM的概念和特点

1.概念:将浏览器的各个组成部分封装为对象

2.特点:BOM对象不能自己创建，当文档加载进内存，浏览器自动创建

BOM的组成

• Window:窗口对象

Window方法

1.alert()

window.alert("一个警告框");
alert() 显示带有一段消息和一个确认按钮的警告框。

2.confirm()

window.confirm("此网站不安全，确定要进入吗?");
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

建议:当网站不安全时或担心用户点错时可以使用此方法

3.setInterval()

<script type="text/javascript">
    	var i=0;
			var add=function(){
				i=i+1;
				console.log(i);}
            var timeID=window.setInterval(add,1000);
		</script>
  setInterval()  按照指定的周期（以毫秒计）来调用函数或计算表达式。 循环执行

4.clearInterval()

window.clearInterval(timeID);//取消3的 setInterval()设置的时间
  clearInterval()  取消由 setInterval() 设置的 timeout

5.setTimeout()

1.var id=window.setTimeout("window.close()",3000);
2.var id2=window.setTimeout(wdcl()，3000);
						funtion wdcl(){
							window.close();
						}
	setTimeout() 在指定的毫秒数后调用函数或计算表达式。 只执行一次			
	参数1：字符串(js语句)或者 函数对象
    参数2：毫秒值。

6.clearTimeout()

window.clearTimeout(定时器的id);
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

7.open()

window.open("http://www.baidu.com");
open() 打开新窗口

8.close()

window.close();
close() 关闭窗口

• Location:地址栏对象

1.获取方式

window.location

2.属性

href：设置或获取当前的URL

• History:历史纪录对象

1.获取方式

window.history;

2.方法

go()

window.history.go(传参数)
1:前进
-1：后退

• Navigator:浏览器对象 (使用较少)
• Screen:显示器屏幕 (使用较少)

DOM(Document Object Model 文档对象模型)

1.DOM的概念

1.将标记语言文档的各个组成部分 封装为对象

2.DOM的组成

• Document：文档对象

1.获取

//document 中 body属性 可以获取body标签对象
document.body.bgColor = "red";
title 属性获取文档标题
//document.title;
//获取文档最后一次修改时间
document.lastModified;
//URL 属性 获取地址栏中的地址
document.URL;

2.方法

获取Element对象
getElementById():通过id属性值获取唯一的元素
getElementsByTagName():通过标签名称获取元素对象数组
getElementsByName():通过name属性值获取元素对象数组
getElementsByClassName():通过class属性值获取元素对象数组

创建其他对象
createElement:创建元素对象
createAttribute：创建属性对象
createComment：创建注释对象
createTextNode：创建文本对象

1.remove()

bd.remove(); //删除自己
bd.removeChild(div);//删除子元素

innerHTML属性：获取或设置 元素的 子内容
innerTEXT属性:获取标签之间的文本内容

区别:innerHTML可以获取标签加文本，innerText只能获取文本

• Element:元素对象

• Attribute：属性对象

• Text：文本对象

• Comment：注释对象

• Node：节点对象

3.事件

1.事件的概念

事件：一件事
事件源：事件发生的组件。
监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法
注册监听：将监听器绑定到事件源上，监听事件的发生

JavaScript中注册监听的方式：

1.在定义标签时，添加 事件名称属性。属性值是js代码

js代码会被自动封装到一个function函数的方法体中

<div id="div_id" onclick="fun();">第一种方式</div>

2.通过js获取元素对象，再添加事件。

1.获取元素对象
var input = document.getElementById("username");
2.注册监听
input.onclick = function(){ }

js中事件的种类：

			  焦点事件：针对表单
                  onfocus 元素获得焦点。 
                  onblur  元素失去焦点
			
			* 点击事件：
				* onclick 当用户点击某个对象时调用的事件句柄。 
				* ondblclick 当用户双击某个对象时调用的事件句柄。 
				
			* 键盘事件：
				* onkeydown 某个键盘按键被按下。
				* onkeyup 某个键盘按键被松开。 
				* onkeypress 某个键盘按键被按下并松开。 
			* 鼠标事件：
				* onmousedown 鼠标按钮被按下。 
				* onmouseup 鼠标按键被松开。 
				* onmouseover 鼠标移到某元素之上。 
				* onmouseout 鼠标从某元素移开。 
				* onmousemove 鼠标被移动。 	
			* 表单事件：
				* onsubmit 确认按钮被点击。 
				* onreset 重置按钮被点击。 
				*oninput 事件 当你往表单中输入内容时就触发 	
			* 加载与卸载事件
				* onload 一张页面或一幅图像完成加载。 
				* onunload 用户退出页面。 其他浏览器不支持 IE支持
			* 其他事件：
				针对表单
				* onchange 域的内容被改变。 比如下拉框
				* onselect 文本被选中。

JS事件对象 event

1.属性

​ currentTarget: 获取的是绑定了该事件的元素对象
​ target : 获取的是触发了该事件的元素对象
​ type: 获取事件类型
​ keyCode 当绑定了键盘事件，可以从事件对象中获取按键的键码（ASCII码）

​ which/button 当绑定了鼠标事件，可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键

2.方法

 e.stopPropagation() 阻止事件冒泡;
 e.preventDefault(); 阻止元素的默认行为