JavaScript-补充

js正则表达式

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

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

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

> 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 。然后可以继续再次执行,又从头开始。还是紧接上面的例子:

> 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),测试一下:

<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 也是一般的情况,先执行自定义事件。

表单验证

结合上面的正则表达式来判断进行验证。然后结合上面的阻止事件发生,在验证不通过的时候,中断操作。
为什么要进行表单验证?可以减少服务器收到的请求。通过客户端上的验证,拦截掉一部分不合规的请求。不过服务器端不能完全依赖客户端的验证,因为客户端可以禁用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,写上条件。比如在宽度变化的时候来改变一下背景色:

<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/
首先下载插件,存放在本地。
Python自动化开发学习18-Web前端补充内容

接着在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项目的时候,提到过这个插件。可以做成向导式的(就是有上一步、下一步的)表单提交。