编程开发 购物 网址 游戏 小说 歌词 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
移动开发 架构设计 编程语言 互联网 开发经验 Web前端 开发总结
开发杂谈 系统运维 研发管理 数据库 云 计 算 Java开发
VC(MFC) Delphi VB C++(C语言) C++ Builder 其它开发语言 云计算 Java开发 .Net开发 IOS开发 Android开发 PHP语言 JavaScript
ASP语言 HTML(CSS) HTML5 Apache MSSQL数据库 Oracle数据库 PowerBuilder Informatica 其它数据库 硬件及嵌入式开发 Linux开发资料
  编程开发知识库 -> Web前端 -> JavaScript学习资料五 -> 正文阅读
 

[Web前端]JavaScript学习资料五[第1页]

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="" onsubmit="return jsCheck()">
<input type="text" name="name" /><br>
...
..
..
..
<input type="submit" value="提交" />
</form>
注意:onsubmit="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";
  Web前端 最新文章
echarts莫名缩小,并且宽度不能更改,生成时
JAVA后台 关于如何从后台传递信息在jsp前端
HTTP协议(二)
阿里云服务器的域名解析解决方案
live-server的安装与使用
HTML播放视频(兼容IE低版本)
windows下配置nginx+php环境
Chorme 开代理后无法打开jsp页面的问题
分布式任务调度平台XXL
作用域
上一篇文章      下一篇文章      查看所有文章
加:2017-10-30 04:00:12  更:2017-10-30 04:00:22 
VC(MFC) Delphi VB C++(C语言) C++ Builder 其它开发语言 云计算 Java开发 .Net开发 IOS开发 Android开发 PHP语言 JavaScript
ASP语言 HTML(CSS) HTML5 Apache MSSQL数据库 Oracle数据库 PowerBuilder Informatica 其它数据库 硬件及嵌入式开发 Linux开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年11日历
2018-11-13 2:17:31
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程开发知识库