JavaScript学习资料五

1.正则表达式(RegExp)
1)正则表达式的基本语法规则
语法:
创建正则表达式对象:
var reg = new RegExp(pattern,modifiers);
或者
var reg = /pattern/modifiers; 
注:

pattern   描述了表达式的模式/规则
modifiers 用于指定全局匹配、区分大小写的匹配和多行匹配

对应修饰符modifiers有三个选项:
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
同时在创建正则表达式对象的是也可以不写修饰符,默认即可




2)pattern内容的分析
 
括号:
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
(red|blue|green) 查找任何指定的选项。

元字符:
. 查找单个任意字符，除了换行和行结束符.如果要表示.这个字符,需要转义
\w 查找单词字符。     字母 数字 _
\W 查找非单词字符。非 字母 数字 _
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NUL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。

量词:
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 到 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

3)支持正则表达式的 String 对象的方法
使用字符串对象的相关方法按照正则表达式所描述的规则去搜索、匹配、替换、分割.


search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。


4)RegExp 对象方法
   使用正则表达式对象(RegExp)的相关方法来对指定字符串进行格式的验证.


compile 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值，并确定其位置。
test 检索字符串中指定的值。返回 true 或 false。


5)例子
var v = "aa1a";
//字符串中包含数字就行
var reg = /\d/;
console.log(reg.test(v));


var v = "aaa1111aa";
//字符串中连着出现4次(或者更多)数字即可
var reg = /\d{4}/;
console.log(reg.test(v));


var v = "1111";
//^表示开头 $表示结尾
//开头和结尾直接必须连续出现4次数字
var reg = /^\d{4}$/;
console.log(reg.test(v));

var v = "1aaa2345";
//开头一个非0数字,后面跟任意字符0-n个,最后4个数字结尾
var reg = /^[1-9]{1}.*\d{4}$/;
console.log(reg.test(v));

var v = "aaredaa";
//red go yes 三个单词任意匹配
var reg = /(red|go|yes)/;
console.log(reg.test(v));

var v = "a1";
//开头是一个字符 结尾是一个数字(一共俩个字符)
var reg = /^\w\d$/;
console.log(reg.test(v));

var v = "aasd11111";
//开头是字符(1-n个),结尾是个数字
var reg = /^\w+\d$/;
console.log(reg.test(v));

var v = "aasd11111.com";
//开头是字符(1-n个),结尾.com
var reg = /^\w+(\.com)$/;

console.log(reg.test(v));

var v = "aasd  )_###11111";
//开头是字符(1-n个)  中间随意匹配 结尾是一个数字
var reg = /^\w+.*\d$/;
console.log(reg.test(v));

//email验证
var v = "test@briup.com";
//var reg = /^\w+@\w+(\.[A-z]{2,3}){1,2}$/;
var reg = /^\w+@\w+\.\w+/;
console.log(reg.test(v));


2.表单验证

第一种方式:提交的时候验证
<form action="" οnsubmit="return jsCheck()">
<input type="text" name="name" /><br>
...
..
..
..
<input type="submit" value="提交" />
</form>

注意:οnsubmit="return jsCheck()"表示表单提交之前先调用jsCheck()这个函数进行验证,然后jsCheck()返回true表示通过验证,则表单可以继续提交,返回false表示验证失败,表单不能提交.


第二种方式:在填写输入框的时候或者输入框失去焦点的时候进行验证,和第一种方式验证的时间点不同,但是验证使用的函数都是一样的.
例如使用onkeyup事件,可以在用户边输入的时候边验证


注意:javascript代码也可以提交表单:
document.forms.myForm.submit();

例如:使用document拿到name="f"的页面表单并设置提交表单事件
document.forms.f.onsubmit = function(){
//这个函数中的this表示当前表单对象f

//获得name="username"的输入框的值
console.log(this.username.value);
//获得name="password"的输入框的值
console.log(this.password.value);

//获得name="gender"的单选框(可以是多个)
console.log(this.gender);
//可以获得当前用户选的那个单选框的值
console.log(this.gender.value);
//可以设置单选框选择男(0)或者女(1)
this.gender.value = 1;
//也可以这样俩种方式设置某个单选框被选中
this.gender[1].checked = "checked";
this.gender[1].checked = true;
//可以取消某个已经被选择的单选框 注意是取消不是选另一个
this.gender[1].checked = false;

//获得表单中name="like"的多选框(可以有多个)
console.log(this.like);
//查询每个多选框是否被选中
console.log(this.like[0].checked);
console.log(this.like[1].checked);
console.log(this.like[2].checked);

//可以自己设置某个多选框被选中
this.like[2].checked = true;
this.like[2].checked = "checked";
//可以取消选中某一个多选框
this.like[2].checked = false;

//可以查看被选中的多选框的值
//不能使用for-in循环 this.like集合对象中除了下标还有其他的属性
for(var i=0;i<this.like.length;i++){
if(this.like[i].checked){
console.log(this.like[i].value);
}
}

//可以给某一个多选框添加点击事件
//每次点击之后我们可以知道用户是选中了还是取消了此多选框
this.like[0].onclick = function(){
console.log(this.checked);
}

//获得表单中name="city"的下拉列表
console.log(this.city);
//获得下拉列表中当前被选中的值
console.log(this.city.value);
//设置下拉列表中哪一个值被选中
this.city.value = 2;

//获得此下拉列表中所有option元素对象
var opt = this.city.getElementsByTagName("option");
//可以用俩种方式让某一个选项被选中
opt[2].selected = true;
opt[2].selected = "selected";

}



3.浏览器对象模型Browser Object Model (BOM)
BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。BOM的核心对象是window，它表示浏览器的一个实例，在浏览器中window对象有双重角色既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

1)窗口大小
innerWidth 页面视图区的宽度
      innerHeight 页面视图区的高度
      outerWidth 浏览器窗口的宽度
      outerHeight 浏览器窗口的高度
所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。注意：IE8及更早IE版本不支持这些属性。


例如:
console.log(window.innerWidth);
console.log(window.innerHeight);
console.log(window.outerWidth);
console.log(window.outerHeight);
2)scrren对象
    屏幕总宽度/高度: 
screen.width
screen.height


例如:
console.log(window.screen.width);
console.log(window.screen.height);

3)打开/关闭窗口
      window.open() 
例如:
      window.open("http://www.baidu.com","newwindow","height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no");
打开的新窗口高为100,宽为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏

或者
简单的使用window.open("http://www.baidu.com");即可


window.colse(); 
注意firefox浏览器中会不起作用,需要修改为以下写法:
window.open("","_self").close();
同时在FireFox需要设置一个浏览器参数:
在Firefox地址栏里输入 about:config
在配置列表中找到 dom.allow_scripts_to_close_windows
把默认的false值修改为true即可。默认是false，是为了防止脚本乱关窗口


4)location对象
是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。location是个神奇的对象，既是window的对象也是document的对象。
console.log(window.location == document.location);//true

属性：
       host 返回服务器名称和端口号
hostname 返回不带端口号的服务器名称
href 返回当前加载页面的完整URL
pathname 返回URL的目录和文件名
port 返回URL中指定的端口号
protocol 返回页面使用的协议
search 返回URL的查询字符串。这个字符串以问号开头

方法：
   assign() 传递一个url参数，打开新url，并在浏览记录中生成一条历史记录。
   replace() 参数为一个url,结果会导致浏览器位置改变，但不会在历史记录中生成新记录
注意:有历史记录就可以回退,没有则不能回退


      reload() 重新加载当前显示的页面，参数可以为boolean类型，默认为false,表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true,强制从服务器中重新加载

注意:
以下三句话效果一样
window.location="http://www.baidu.com";
location.href="http://www.baidu.com"
location.assign("http://www.baidu.com");


5)history对象
window.history 对象包含浏览器的历史
例如:
history.back()    - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
history.go(-3);

6)window的超时调用和定时调用
javascript是单线程语言，但是可以通过 超时值 和 间歇时间 来调度代码在特定时刻执行
1.setTimeout();
该方法返回一个数值ID，表示超时调用，超过指定时间后自动调用一次指定函数。这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID)取消调用


参数：
1.要执行的代码
2.以毫秒表示的时间。


例如: 
//一秒后调用
//只执行一次
var id = setTimeout(function(){
alert("hello");
},1000);
console.log(id);


//清除
clearTimeout(id);

2.setInterval();
按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用

参数：
  1.要执行的代码
2.以毫秒表示的时间。
  clearInterval(ID);  //取消间歇调用


例如: 
//每隔五秒钟调用一次函数
var id = setInterval(function(){
alert("hello");
},5000);
console.log(id);


//清除
clearInterval(id);


-----------------------------------------------------


特殊的css
  1) 元素的显示和可见性
  visibility:
hidden  元素不可见，但是在文档布局中保留了它的空间。
visible 元素可见
  display
none 元素不可见，在文档布局中不给它分配空间，它的各边元素会合拢，就当它不存在过。在展开和折叠轮廓的效果时，display属性很有用。
  
2) 颜色，透明度
  opacity 透明度：0~1之间的数字
  filter: IE中表示透明度 0~100之间的数字
常用表示透明度的方法
  opacity: 0.75;
  filter:alpha(opacity=75);



javascript中设置元素特殊名字的css的属性
style 属性，该属性的值不是字符串，而是一个CSSStyleDeclaration对象，该对象代表了HTML代码中通过style指定的css属性。javascript中的css属性大多与标签中的css属性相同，但是如果css样式属性在名字中出现了连字符，该属性名的格式应该是移除连字符，将每个连字符后面紧接着的字母大写，如 
background-color =>e.backgroundColor
其他的例子:
e.style.fontSize = "24px";
e.style.fontWeight = "bold";
e.style.color = "blue";