前端开发补充之-正则和插件
1: JS正则表达式（常用于表单）
定义正则表达式
/.../ 用于定义正则表达式
/.../g 全局匹配
/.../i 不区分大小写
/.../m 多行匹配
多行匹配：
默认就是多行匹配
使用^$进行多行匹配时候使用m。
只具有2个方法
方法1：test - 判断字符串是否符合规定的正则
rep = /d+/; 创建了正则表达式匹配数字
rep.test('asdfesf89sdf') #包含数字即返回true
输出：true
rep = /^d+$/; 开头到结尾均为数字
以上实例输出返回：false
方法2：exec - 获取匹配的数据
实例1：
rep = /d+/;
str = 'w_67_h_20'
rep.exec(str)
始终输出第一个数组：["67"]
实例2：
test = 'JavaScript is more fun than Java or JavaBeans!'
var pattern = /Java(w*)/;#不用分组只输出头一个值，使用分组输出头一组数据。
pattern.exec(test)
分组的输出：['JavaScript','Script']
var pattern = /Javaw*/g #使用g是全局匹配，输出类似迭代器，匹配完成后输出null，如果继续将会再次重新匹配
未分组输出：第一个["JavaScript"]，第二个['Java']，第三个['JavaBeans'] 第四个输出null
var pattern = /Java(w*)/g #使用分组
分组的输出：第一个["JavaScript","Script"]，第二个['Java',""]，第三个['JavaBeans',"Beans"] 第四个输出null
默认事件先执行：checkbox # 当点击时候，先打对勾，然后才输出自定义的查看状态true或者false
自定义先执行
a #先执行自定义的函数，然后才进行URi的跳转
submit
表单验证：是为了减少数据库的请求，当然，如果游览器关闭的jsscript功能，最后还是的通过数据库进行验证。
举例：js表单验证写法有以下几种，如下:
1 flag = true; 2 $(form).find(':text,:password').each(function(){ 3 var name = $(this).attr('name') 4 var label = $(this).attr('label') 5 var val = $(this).val() 6 var $parent = $(this).parent() 7 var required = $(this).attr('require') 8 if(required){ # 如果为真，则必填 9 if(!val||val.trim() == ''){ 10 flag = false; 11 ErrorMessage($parent,label+'不能为空') 12 return false; 13 } 14 } 15 var number = $(this).attr('number') 16 if(number){ 17 if(!$.isNumeric(number)){ 18 flag = false; 19 ErrorMessage($parent,label+'必须为数字'); 20 return false; 21 } 22 } 23 var mobile = $(this).attr('mobile') 24 if(mobile){ 25 var reg = /^1[3|5|8]d{9}$/; 26 if(!reg.test(val)){ 27 flag = false; 28 ErrorMessage($parent,label+'格式错误'); 29 return false; 30 } 31 } 32 })
2：前端插件模板
插件有很多，如：bootstrap,JqueryUI,EasyUI,bxslider
bootstrap （目前主流的模板，前台和后台通用），文件下载地址：v3.bootcss.com，包含：
- css 放置的是样式。
引入：<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css" /> 这个是加入了一些颜色
- fonts 放置的是bootstraps图标，直接从v3.bootcss.com组件中审查元素查找代码，然后直接复制到页面内即可
- js 放置的js文件，引入：<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
注意：当使用插件时候，如果要修改一个样式，css绝对生效在样式后加：!important;
包含：
1：响应式： @media
2：图标，字体： @font-face 根据代码找到图标，直接从网站的元素审查里copy相应代码
3：基本的使用
实例：bootstrap实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .no-radus{ 8 /*使用!important 优先级最高*/ 9 border-radius: 0 !important; 10 } 11 </style> 12 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> 13 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css" /> 14 15 </head> 16 <body style="background-color:red"> 17 <nav class="navbar navbar-default no-radus"> 18 <div class="container-fluid"> 19 <!-- Brand and toggle get grouped for better mobile display --> 20 <div class="navbar-header"> 21 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 22 <span class="sr-only">Toggle navigation</span> 23 <span class="icon-bar"></span> 24 <span class="icon-bar"></span> 25 <span class="icon-bar"></span> 26 </button> 27 <a class="navbar-brand" href="#">Brand</a> 28 </div> 29 30 <!-- Collect the nav links, forms, and other content for toggling --> 31 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 32 <ul class="nav navbar-nav"> 33 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 34 <li><a href="#">Link</a></li> 35 <li class="dropdown"> 36 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 37 <ul class="dropdown-menu"> 38 <li><a href="#">Action</a></li> 39 <li><a href="#">Another action</a></li> 40 <li><a href="#">Something else here</a></li> 41 <li role="separator" class="divider"></li> 42 <li><a href="#">Separated link</a></li> 43 <li role="separator" class="divider"></li> 44 <li><a href="#">One more separated link</a></li> 45 </ul> 46 </li> 47 </ul> 48 <form class="navbar-form navbar-left"> 49 <div class="form-group"> 50 <input type="text" class="form-control" placeholder="Search"> 51 </div> 52 <button type="submit" class="btn btn-default">Submit</button> 53 </form> 54 <ul class="nav navbar-nav navbar-right"> 55 <li><a href="#">Link</a></li> 56 <li class="dropdown"> 57 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 58 <ul class="dropdown-menu"> 59 <li><a href="#">Action</a></li> 60 <li><a href="#">Another action</a></li> 61 <li><a href="#">Something else here</a></li> 62 <li role="separator" class="divider"></li> 63 <li><a href="#">Separated link</a></li> 64 </ul> 65 </li> 66 </ul> 67 </div><!-- /.navbar-collapse --> 68 </div><!-- /.container-fluid --> 69 </nav> 70 71 72 bootstrap图标 73 <span class="glyphicon glyphicon-euro" aria-hidden="true"></span> 74 75 <!-- Single button --> 76 <div class="btn-group"> 77 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 78 Action <span class="caret"></span> 79 </button> 80 <ul class="dropdown-menu"> 81 <li><a href="#">Action</a></li> 82 <li><a href="#">Another action</a></li> 83 <li><a href="#">Something else here</a></li> 84 <li role="separator" class="divider"></li> 85 <li><a href="#">Separated link</a></li> 86 </ul> 87 </div> 88 89 <script src="jquery-1.12.4.min.js"></script> 90 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script> 91 </body> 92 </html>
注意：bootstrap的js 依赖于jquery，所以使用前需要先倒入jquery
JqueryUI，需要下载jqueryUi的包，（趋向后台管理），基本过时。
EasyUI，需要下载包（趋向后台管理），基本过时。
bxslider 也是一个插件。以下实现一个轮播图
网站：http://bxslider.com/ 下载包文件
轮播图实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- jQuery library (served from Google) --> <script src="../jquery-1.12.4.min.js"></script> <!-- bxSlider Javascript file --> <script src="bxslider/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="bxslider/jquery.bxslider.css" rel="stylesheet" /> </head> <body> <ul class="bxslider"> <li><img src="1.jpg" /></li> <li><img src="2.jpg" /></li> <li><img src="3.png" /></li> <li><img src="4.jpg" /></li> </ul> <script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script> </body> </html>
经验：写前端时候，有插件最好用插件，可以增加效率。