一、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 ...

随机推荐

commit(), commitNow()和commitAllowingStateLoss()
关于FragmentTransaction的各种提交方法: commit(),commitAllowingStateLoss(),commitNow()和commitNowAllowingStateL ...
转：IE兼容模式下 SCRIPT1028: 缺少标识符、字符串或数字
IE兼容模式下 SCRIPT1028: 缺少标识符.字符串或数字例如下面一段代码 var a = { x: 1, y: 2,};alert(a.x);如果在IE的兼容性视图(IE7文档模式 ...
原创 C++之常量（二）
4常量的内存分配 4.1应用程序的内存结构一个由C++编译的应用程序,占用的内存可以划分为如下几个部分: 栈(stack).由编译器自动分配释放.存放函数参数和函数里的局部变量(又称自动变量).其操 ...
C#语言基础——函数
函数一个较大的程序一般应分为若干个程序块,每一个模块用来实现一个特定的功能.所有的高级语言中都有子程序这个概念,用子程序实现模块的功能.在C#语言中,子程序的作用是由一个主函数和若干个函数构成.由主函 ...
MySQL函数
MySQL数据库提供了很多函数包括: 数学函数: 字符串函数: 日期和时间函数: 条件判断函数: 系统信息函数: 加密函数: 格式化函数: 一.数学函数数学函数主要用于处理数字,包括整型.浮点数等. ...
基于corosync+pacemaker+drbd+LNMP做web服务器的高可用集群
实验系统:CentOS 6.6_x86_64 实验前提: 1)提前准备好编译环境,防火墙和selinux都关闭: 2)本配置共有两个测试节点,分别coro1和coro2,对应的IP地址分别为192.1 ...
让div盒子相对父盒子垂直居中的几种方法
div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...
Android开发之延时执行
new Handler().postDelayed(new Runnable() { @Override public void run() { //两秒后执行 startMainActivity() ...
CentOS配置git和maven自动部署java
#安装Git yum install git #测试是否成功 git -version #正确 #git version 1.7.1 #配置git config --global user.name ...
内核控制Meta标签：让360浏览器默认使用极速模式打开网页(转)
为了让网站页面不那么臃肿,也懒的理IE了,同时兼顾更多的国内双核浏览器,在网页页头中添加了下面两行Meta控制标签. 1,网页头部加入 <meta name="renderer&quo ...

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