web前端基础知识-(六)jQuery-补
一、JS正则
1、定义正则表达式
JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串;
1)构造函数
1 | var reg=new RegExp('<%[^%>]+%>','g'); |
2)字面量
1 | var reg=/<%[^%>]%>/g; |
-
/.../ 用于定义正则表达式
-
/.../g 表示全局匹配
-
/.../i 表示不区分大小写
-
/.../m 表示多行匹配
预定义类:
字符 | 等价类 | 含义 |
. | [^\n\r] | 除了回车符和换行符之外的所有字符 |
\d | [0-9] | 数字字符 |
\D | [^0-9] | 非数字字符 |
\s | [ \t\n\x0B\f\r] | 空白符 |
\S | [^ \t\n\x0B\f\r] | 非空白符 |
\w | [a-zA-Z_0-9] | 单词字符(字母、数字、下划线) |
\W | [^a-zA-Z_0-9] | 非单词字符 |
边界:
字符 |
含义 |
^ |
以xx开头 |
$ |
以xx结尾 |
\b |
单词边界,指[a-zA-Z_0-9]之外的字符 |
\B |
非单词边界 |
量词:
字符 | 含义 |
? | 出现零次或一次(最多出现一次) |
+ | 出现一次或多次(至少出现一次) |
* | 出现零次或多次(任意次) |
{n} | 出现n次 |
{n,m} | 出现n到m次 |
{n,} | 至少出现n次 |
2、匹配
JavaScript中支持正则表达式,其主要提供了两个功能:
1)test(string) 检查字符串中是否和正则匹配
1 2 3 | n = 'uui99sdf' reg = /\d+/ reg.test(n) ---> true |
2)exec(string) 获取正则表达式匹配的内容,如果未匹配,值为null,否则,获取匹配成功的数组。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 获取正则表达式匹配的内容,如果未匹配,值为null,否则,获取匹配成功的数组。 非全局模式 获取匹配结果数组,注意:第一个元素是第一个匹配的结果,后面元素是正则子匹配(正则内容分组匹配) var pattern = /\bJava\w*\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) var pattern = /\b(Java)\w*\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) 全局模式 需要反复调用exec方法,来一个一个获取结果,直到匹配获取结果为null表示获取完毕 var pattern = /\bJava\w*\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) var pattern = /\b(Java)\w*\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) |
3)其他
1 2 3 4 5 6 7 8 | obj.search(regexp) 获取索引位置,搜索整个字符串,返回匹配成功的第一个位置(g模式无效) obj.match(regexp) 获取匹配内容,搜索整个字符串,获取找到第一个匹配内容,如果正则是g模式找到全部 obj.replace(regexp, replacement) 替换匹配替换,正则中有g则替换所有,否则只替换第一个匹配项, $数字:匹配的第n个组内容; $&:当前匹配的内容; $`:位于匹配子串左侧的文本; $':位于匹配子串右侧的文本 $$:直接量$符号 |
二、JS模板
1、EasyUI(推荐指数★)
使用方法:把文件下载到本地、直接从官网上把源码拷贝过来,更改下js的路径即可
优点:功能非常多、非常齐全 偏做后台管理
缺点:定制时改造代价大、不仅要改CSS 还要改JS
2、jQueryUI(推荐指数★★)
使用方法:把文件下载到本地、直接从官网上把源码拷贝过来,更改下JS的路径即可
优点:功能完善、JS比较多 偏做后台管理
缺点:页面不太好看、要自己进行调整的多
3、Bootstrap(推荐指数★★★)
使用方法:把文件下载到本地、直接从官网上把源码拷贝过来,更改下JS的路径即可
优点:页面简洁、符合审美 前端后端都能做
4、其他
!important强制使用自定义的样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < style > .backgroupbule{ background-color: blue !important; } </ style > <!--主要的css样式--> < link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap.css"/> <!--加了简单的颜色配比--> < link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap-theme.css"/> </ head > < body > < nav class="navbar navbar-default" role="navigation"> < div class="container-fluid backgroupbule"> <!-- Brand and toggle get grouped for better mobile display --> < div class="navbar-header"> < button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> < span class="sr-only">Toggle navigation</ span > < span class="icon-bar"></ span > < span class="icon-bar"></ span > < span class="icon-bar"></ span > </ button > < a class="navbar-brand" href="#">Brand</ a > </ div > <!-- Collect the nav links, forms, and other content for toggling --> < div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> < ul class="nav navbar-nav"> < li class="active">< a href="#">Link</ a ></ li > < li >< a href="#">Link</ a ></ li > < li class="dropdown"> < a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown < span class="caret"></ span ></ a > < ul class="dropdown-menu" role="menu"> < li >< a href="#">Action</ a ></ li > < li >< a href="#">Another action</ a ></ li > < li >< a href="#">Something else here</ a ></ li > < li class="divider"></ li > < li >< a href="#">Separated link</ a ></ li > < li class="divider"></ li > < li >< a href="#">One more separated link</ a ></ li > </ ul > </ li > </ ul > < form class="navbar-form navbar-left" role="search"> < div class="form-group"> < input type="text" class="form-control" placeholder="Search"> </ div > < button type="submit" class="btn btn-default">Submit</ button > </ form > < ul class="nav navbar-nav navbar-right"> < li >< a href="#">Link</ a ></ li > < li class="dropdown"> < a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown < span class="caret"></ span ></ a > < ul class="dropdown-menu" role="menu"> < li >< a href="#">Action</ a ></ li > < li >< a href="#">Another action</ a ></ li > < li >< a href="#">Something else here</ a ></ li > < li class="divider"></ li > < li >< a href="#">Separated link</ a ></ li > </ ul > </ li > </ ul > </ div > <!-- /.navbar-collapse --> </ div > <!-- /.container-fluid --> </ nav > <!--bootstrap依赖jQuery--> < script src="jquery-1.12.4.js"></ script > < script src="bootstrap-3.3.0-dist/dist/js/bootstrap.js"></ script > </ body > </ html > bootstrap样式和自定义样式搭配.html |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp