一、JS正则

1、定义正则表达式

JavaScript种正则表达式有两种定义方式，定义一个匹配类似 <%XXX%> 的字符串；

1）构造函数

var reg=new RegExp('<%[^%>]+%>','g');

2）字面量

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) 检查字符串中是否和正则匹配

n = 'uui99sdf'

reg = /\d+/

reg.test(n)  ---> true

2）exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。

获取正则表达式匹配的内容，如果未匹配，值为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）其他

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强制使用自定义的样式

<!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

web前端基础知识-（六）jQuery-补的更多相关文章

web前端基础知识及快速入门指南
web前端基础知识及快速入门指南做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
web前端基础知识-（五）jQuery
通过之前的学习我们已经了解了html.css.javascript的相关知识:本次我们就共同学习进阶知识:jQuery~ 一.什么是jQuery? jQuery其实就是一个轻量级的javascript ...
web前端基础知识 jQuery
通过之前的学习我们已经了解了html.css.javascript的相关知识:本次我们就共同学习进阶知识:jQuery~ 一.什么是jQuery? jQuery其实就是一个轻量级的javascript ...
web前端基础知识学习网站推介
内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...
web前端基础知识总结
上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 ...
web前端基础知识-（六）Django基础
上面我们已经知道Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Sessi ...
web前端基础知识-（六）web框架
一.web框架本质众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:ut ...
web前端基础知识-（八）Ajax
Ajax即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 Ja ...
web前端基础知识-（七）Django进阶
通过上节课的学习,我们已经对Django有了简单的了解,现在来深入了解下~ 1. 路由系统 1.1 单一路由对应 url(r'^index$', views.index), 1.2 基于正则的路由 u ...

随机推荐

我的2013 Q.E.D
"旧历的年底毕竟最像年底,村镇上不必说,就在天空中也显出将到新年的气象来.灰白色的沉重的晚云中间时时发出闪光,接着一声钝响,是送灶的爆竹:近处燃放的可就更强烈了,震耳的大音还没有息,空气里已 ...
mysql半同步(semi-sync)源码实现
mysql复制简单介绍了mysql semi-sync的出现的原因,并说明了semi-sync如何保证不丢数据.这篇文章主要侧重于semi-sync的实现,结合源码将semi-sync的实现过程展现给 ...
HttpsURLConnection 利用keepAlive特性进行优化一例
最近项目中,遇到一个报错: java.lang.OutOfMemoryError: unable to create new native thread 报错的场景是:一个消息的群发,群里总共有50多 ...
zabbix完整安装
一.nginx安装 1.必要软件准备: 为了支持rewrite功能,我们需要安装pcre: yum install pcre-* 需要ssl的支持,如果不需要ssl支持,请跳过这一步: yum ins ...
[原创]下拉框控件react-native-modal-dropdown更新历程
前言不知不觉从今年9月发布第一版控件到现在已经快3个月了过去不断从开源社区索取,一直一直想着有机会一定要回报
怎么实现ZBrush 4R7中界面视窗的快速转换
本篇教程介绍ZBrush® 4R7界面的基本操作之转换界面视窗, 教程属于入门教程可以帮助新手快速入门.因为ZBrush工作界面不同于其他我们所熟知的3D软件,初次接触ZBrush的时候难免会有所困 ...
《深入理解Java内存模型》读书总结
概要文章是<深入理解Java内容模型>读书笔记,该书总共包括了3部分的知识. 第1部分,基本概念包括"并发.同步.主内存.本地内存.重排序.内存屏障.happens befo ...
SSM整合(三)：Spring4与Mybatis3与SpringMVC整合
源码下载 SSMDemo 上一节整合了Mybatis3与Spring4,接下来整合SpringMVC! 说明:整合SpringMVC必须是在web项目中,所以前期,新建的就是web项目! 本节全部采用 ...
DataTable转List
Invoke : DataTableToList<City>.ConvertToModel(ds.Tables[0]).ToList<City>(); using System ...
1.ios synthesize有什么作用
###1.ios synthesize有什么作用当定义了一系列的变量时,需要写很多的getter和setter方法,而且它们的形式都是差不多的,所以Xcode提供了@property和@synthe ...

web前端基础知识-（六）jQuery-补