Python自动化开发学习18-Web前端补充内容

时间 2021-01-19

标签 css html 前端 jquery git github 正则表达式 bootstrap 数组服务器栏目 Python 繁體版

原文原文链接

JavaScript-补充

js正则表达式

在使用以前，首先要建立正则表达式对象，建立对象有两种方式：
/pattern/attributes ：这个简单，推荐用这个。并且不用写引号
new RegExp(pattern, attributes); ：和上面的效果同样，这里是经过参数把值传入的，因此必须写上引号。另外还要注意转义字符。
参数 pattern 是一个字符串，就是正则表达式。
参数 attributes 是一个可选的字符串，包含属性 "g"（全局匹配）、"i"（对大小写不敏感）和 "m"（多行匹配模式）。
分别用上面2中方法建立正则表达式对象，忽略可选的 attributes 参数，两种方法建立出的结果彻底同样：css

> reg1 = /^\d$/;
< [regex] /^\d$/: 
> reg2 = new RegExp("^\\d$");  // 注意字符串了的\要转义
< [regex] /^\d$/:

而后就是用正则表达式对象匹配咱们的字符串，这里也学习2个方法：
RegExpObject.test(string) ：检索字符串是否匹配，返回布尔值（true 或 false）
RegExpObject.exec(string) ：获取匹配的结果，匹配不到则返回 null。返回一个数组，能够对返回的结果再次匹配。这个方法比较复杂，后面一步一步展开。html

> reg1 = /^\d+$/;  // 匹配纯数字字符串
< [regex] /^\d+$/: 
> reg1.test('123')
< true
> reg1.test('1a23')
< false
> reg2 = /\bJava\w*\b/;  // 匹配以Java开头的单词
< [regex] /\bJava\w*\b/: 
> text = "JavaScript is more fun than Java or JavaBeans!"
< "JavaScript is more fun than Java or JavaBeans!"
> reg2.exec(text);  // 只匹配到了第一个，并且返回的是数组
< [object Array]: ["JavaScript"]

若是在正则表达式中使用()把表达式分组，那么返回的数组会有第2个元素。紧接上面的例子：前端

> reg3 = /\b(Ja(va))(\w*)\b/;  // 匹配以Java开头的单词，这里用括号加了3个分组
< [regex] /\b(Ja(va))(\w*)\b/: 
> reg3.exec(text);
< [object Array]: ["JavaScript", "Java", "va", "Script"]

若是要匹配全部，那么就须要加上 attributes 参数 g ，可是一次只返回一个结果。再次执行，会返回下一个结果。匹配完了返回 null 。而后能够继续再次执行，又从头开始。仍是紧接上面的例子：jquery

> reg4 = /\bJava\w*\b/g;  // 匹配以Java开头的单词，最后加了g全局匹配
< [regex] /\bJava\w*\b/g: 
> reg4.exec(text)
< [object Array]: ["JavaScript"]
> reg4.exec(text)
< [object Array]: ["Java"]
> reg4.exec(text)
< [object Array]: ["JavaBeans"]
> reg4.exec(text)
< null
> reg4.exec(text)
< [object Array]: ["JavaScript"]

阻止事件发生2

自定义事件先执行
上节课讲过 a 标签默认有个事件，咱们能够再绑定一个自定义事件，而且会先执行自定义事件。而后若是事件返回 false，将中断操做（阻止后面的事件）。submit 是提交表单，也是同样的，一样能够经过 return false 来阻止提交表单。大多数状况都是这种自定义事件先执行。
默认事件先执行
这种状况比较少，好比复选框（checkbox），测试一下：git

<body>
<label id="l1" for="i1">测试复选框</label>
<input id="i1" type="checkbox">
<script>
    document.getElementById('l1').onclick = function () {
        alert("我是label")
    };
    document.getElementById('i1').onclick = function () {
        alert("我是input");
    };
</script>
</body>

以前a标签测试的时候，是先弹出alert，点掉以后才会页面跳转。而这里是弹出alert的时候页面里的复选框已经变化好了。因此是先执行默认的事件。顺便看到 label 也是通常的状况，先执行自定义事件。github

表单验证

结合上面的正则表达式来判断进行验证。而后结合上面的阻止事件发生，在验证不经过的时候，中断操做。
为何要进行表单验证？能够减小服务器收到的请求。经过客户端上的验证，拦截掉一部分不合规的请求。不过服务器端不能彻底依赖客户端的验证，由于客户端能够禁用js，或者修改客户端，甚至直接经过其余方式把请求发送到服务器端，服务端仍是必须有一套完整的验证。这里先学习客户端经过js实现的验证。
老师的作法：循环的时候经过自定义属性来判断哪些标签须要验证。仍是经过自定义属性来判断这个标签具体要验证什么。并非写死的方法。好比
require = true ：判断这个标签是否须要作验证
field = ‘string’ ：这个标签须要填入的是字符串
mobile = tue ：这个标签须要验证是不是电话号码
min-len = 6 ：这个标签里的内容的最小长度是6
name = ‘pwd’ confirm-to = 'pwd' ：前一个是注册密码标签里的属性。后一个是确认密码标签里的自定义属性，去找 name 属性值和它同样的标签验证内容是否一致。
验证的触发写在 submit 标签的 onclick 事件里。若是验证失败，返回 false，阻止提交表单。
另外还能够作的更加高级，为每一个须要验证的标签（require = true）添加一个失去焦点的事件（onblur），触发当前标签的验证。这里仅须要显示验证错误的提示信息便可。
记个思路，没有示例。正则表达式

响应式布局

针对不一样的媒体类型定义不一样的样式。把你的css样式连同选择器一块儿，外面再包一层@media，写上条件。好比在宽度变化的时候来改变一下背景色：bootstrap

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 80px;
            background-color: red;
        }
        /*下面的样式生效的要求是，宽度最小是800px*/
        @media (min-width: 800px){
            .c1{
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
<div class="c1"></div>
</body>

应用场景，好比顶部的菜单一字排开，当页面宽度变小致使宽度不够的时候，咱们固然能够选择设置一个最小宽度，让底部出现滚动条。或者也能够经过响应式布局，让这部分的样式变成另一种。好比原来是一字排开的菜单，如今所有收到一个下拉列表里，点击以后能够竖着展开。不够仅仅只是css样式的改变貌似实现不了。其实就是把两种菜单都写好，同时只显示其中一个。设置另外一个的display的值为none就能够隐藏掉了。数组

样式优先级2

css样式的优先级，已经学习过了，通常都是后加载的生效。另外还能够在样式后面加上 !important ，保证这个样式必定生效：服务器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red !important;  /*这个样式下面改不掉*/
            height: 80px;
            border: 1px solid green;  /*这个样式会被覆盖*/
        }
    </style>
</head>
<body>
<div class="c1" style="background-color: yellow;border: 8px solid blue;"></div>
</body>

下面就要讲插件，在使用别人的组件的时候，就有可能须要用到。由于你可能没法保证你的样式必定是写在最后的，好比你的插件在js了修改了样式。这时候就须要用这个方法强制使本身的样式生效，没法被改变。
这个效果很厉害，因此不能乱用。important只应该被容许用来覆盖掉js添加的样式，好比那些本身没法控制的js组件加上的样式，并且使用的时候必须限定css范围。

前端组件介绍

EasyUI

去Demo里找你须要的样式，直接把它的源码复制过来就可使用了。样式上侧重于后台管理的场景。
不过页面里引用的 css 和 js 文件的链接还要改一下。去Download里把EasyUI下载下来，存放到本地。再把页面中的地址修改为本地文件的地址。
优势：功能齐全。
缺点：学习代价大，不太容易修改。由于，js代码中可能会修改html标签，即你写的html和你页面最终显示的html会不太同样，被js修改过了。还有，存在不少Ajax操做，这个还没学，等学习了Ajax以后再来考虑使用这个。

jQuery UI

使用起来和上面的EasyUI差很少。先下载下来，看中的样式你的本身找到源码复制下来使用。样式一样是侧重于后台管理的场景。
优势：没啥优势，各方面看和EasyUI都差很少。相对简单一下，目前的水平尚能掌握，这个能够先用着。
缺点：功能没有上面的EasyUI齐全。并且只是js丰富一些，基本没有css，作的很朴素。

BootStrap

上面2个基本都是针对后台管理页面的场景，这个组件对于其余场景的样式也一样有支持（大概是所有场景），好比你的Web主站。另外，这里面用有不少响应式布局，包括它本身的页面里也是，知道一下。
优势：应用场景更多。
缺点：没说。总之如今都用它

使用模板

上面提供的都是各类组件，咱们还得本身组合。那么来试试看模板。
模板能够网上找免费的，固然好的模板也有收费的。
课上演示了 nifty-v2.2.2 这个模板。先去 template 文件夹里找你须要的示例，都是完整的一个页面。先基于一个模板把页面画出来，而后按照实际的需求改为本身须要的。

示例-轮播图（bxSlider）

这里再介绍一个组件：bxSlider。官网：https://bxslider.com/
首先下载插件，存放在本地。

接着在html中引入他的css文件和js文件，还有jQuery。注意jQuery得在js文件以前引入。
而后复制它的script代码，再复制它的body里的代码。
最后填入你的图片就行了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="bxslider-4-4.2.12/dist/jquery.bxslider.min.css">
    <script src="bxslider-4-4.2.12/dist/jquery.bxslider.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.slider').bxSlider();
        });
    </script>
</head>
<body>
<div class="slider">
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo1.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo2.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo3.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo4.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo5.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo6.jpeg" /></div>
</div>
</body>
</html>

上面只是默认的效果，还能够设置参数，只须要修改script，在里面加上参数：

<script>
        $(document).ready(function(){
            $('.slider').bxSlider({
                mode: 'fade',  // 切换模式设为淡出
                auto: true,  // 自动切换
                pause: 2000  // 自动切换间隔（ms）
            });
        });
    </script>

更多的参数设置就去网上查吧。

补充各类前端插件

这部份内容是这个模块的学习内容学完以后，在以后的项目学习甚至是之后本身用过碰到过的全段插件，都补充到下面。

Bootstrap Wizard

文档：http://vinceg.github.io/twitter-bootstrap-wizard/是在讲CRM项目的时候，提到过这个插件。能够作成向导式的（就是有上一步、下一步的）表单提交。