前端知识——jQuery、前端插件、web框架、Django

jQuery示例：

　　表单验证，jQuery扩展

　　　　浏览器可以关闭js，所以验证不一定是百分百发生的，所以后端需要有验证，前端也有的话减少服务端的访问

　　　　通过DOM绑定进行表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <style>
        .item{
             250px;
            height: 60px;
            position: relative;
        }
        .item input{
             200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
             200px;
        }
    </style>

</head>
<body>
    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
                <!--<span>密码不能为空</span>-->
            </div>
            <input type="submit" value="提交" onclick="return CheckValid();" />
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function CheckValid() {
            //通过dom进行绑定
            var flag=true;

            $('form .item span').remove();
            $('form .c1').each(function () {
                var val=$(this).val();
                if(val.length<=0){
                    var label=$(this).attr('label');
                    var tag=document.createElement("span");
                    tag.innerText=label+"不能为空";
                    $(this).after(tag);
                    flag=false;
                }
            });
            return flag;
        }
    </script>
</body>
</html>

 jQuery

　　滚动菜单事件绑定

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <style>
        .item{
             250px;
            height: 60px;
            position: relative;
        }
        .item input{
             200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
             200px;
        }
    </style>

</head>
<body>
    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
                <!--<span>密码不能为空</span>-->
            </div>
            <input type="submit" value="提交"/>
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            Bindcheckvalid();
        });
        
        function Bindcheckvalid() {
            $('form input[type="submit"]').click(function () {
                var flag=true;
                $('form .item span').remove();
                $('form .c1').each(function () {
                    var val=$(this).val();
                    if(val.length<=0){
                        var label=$(this).attr('label');
                        var tag=document.createElement("span");
                        tag.innerText=label+"不能为空";
                        $(this).after(tag);
                        flag=false;
                    }
                });
                return flag;
            });
        }
        

    </script>
</body>
</html>

 在jQuery里面使用each的时候，如果要返回return fales的话就是表示为break，不在继续执行了，但是如果使用return的话，相当于continue。

这样这个页面里面先判断第一个，如果第一个判断成功才会判断第二个。

滚动菜单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        body{
            margin: 0px;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .wrap{
             980px;
            margin: 0 auto;
        }

        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
             110px;
            height: 40px;

        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{

        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
             200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }

        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }

        .pg-body .content{
            position: absolute;
            top:60px;
             700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
        }
    </style>
</head>
<body>

    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>

	<div class="pg-body">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
            </div>

			<div class="content">
                <div menu="function1" class="section" style='background-color:green;'>
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section" style='background-color:yellow;'>
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section" style='background-color:red;'>
                    <h1>第三章</h1>
                </div>
            </div>
        </div>

    </div>

    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script type="text/javascript">

		$(function(){
			// 自动执行
            Init();
        });


        function Init(){


            $(window).scroll(function() {
				// 监听窗口滚动事件


                // 获取滚动条高度
                var scrollTop = $(window).scrollTop();


				// 当滚动到50像素时，左侧带菜单固定
                if(scrollTop > 50){
                    $('.catalog').addClass('fixed');
                }else{
                    //$('.catalog').children().removeClass('active');
                    $('.catalog').removeClass('fixed');
                }

                // 循环所有的内容
                $('.content').children().each(function(){
                    // 当前标签距离顶部高度
                    var offSet = $(this).offset(); // 高度，左边有多远
					offSet.top
					offSet.left


					// 自身高度
                    var height = $(this).height();

					//offSet<滚动高度<offSet+height


                    // 当前内容高度 - 滚动高度，如果滚动到内容一时，此值为0；
                    var offTop = offSet.top - scrollTop;


                    // 当前内容位于用户阅览区
                    if(scrollTop>offSet.top && scrollTop< offSet.top + height){
						// $(this) 当前内容标签
						var target = $(this).attr('menu');
						$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');

						/*
                        var docHeight = $(document).height();
                        var winHeight = $(window).height();
                        // 如果，滚轮到达底部，则显示最后一个菜单
                        if(docHeight == winHeight+scrollTop)
                        {
                            $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
                        }else{
                            var target = $(this).attr('menu');
                            $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
                        }
                        return false;
						*/
                    }
                });

            });


        }

    </script>
</body>
</html>

前端插件

　　fontawsome

　　easyui

　　jQueryUI

     Bxslider

     bootstrap

　　　　需要注意这个在引入jQuery是有版本要求的

　　jquery.lazyloiad

　　　　

$(function(){
    $('img.lazy').lazyload({
        //container: $('.product-list'),   // 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片）
        threshold: 120,                    //当图片顶部距离显示区域还有100像素时，就开始加载
        placeholder : "www/grey.gif",      // 图片未加载时，占位
        effect: "slideDown",               // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉)
        effect_speed: 1500,                // 效果出现的时间
        event: 'scroll',                   // 滚动滚轮时触发，可以是：click、mouseover等
        data_attribute: 'original',        // img标签中保存url的自定义属性，默认：data-original
        skip_invisible: true,              // 是否跳过已经隐藏的图片（display:none）
        failure_limit: 3,                  // 由于延迟加载是根据Dom从上到下执行
                                           // 如果遇到Dom位置在上，但是图片定位在下导致看不到，那么会以为之后的图片不在应用延迟加载
                                           // 此处的failure_limit用于限制如果出现N个【Dom位置在上，但是图片定位在下】才终止
        appear: function(){                // 当图片位置刚出现在视图时，触发此事件
            $(this).attr('src');
        },
        load: function(){                  // 当图片路径加载之后，触发此事件
            $(this).attr('src');
        }
 
    });
})

 web框架

　　自己实现socket

　　　　Tornado

　　基于wsgi

　　　　Django

　　MVC/MTV

　　　　mvc框架：

　　　　　　controllers:处理用户请求

　　　　　　views：放置html模板

　　　　　　modals：操作数据库

　　　　mtv框架：

　　　　　　views：处理用户请求

　　　　　　template：放置html模板

　　　　　　modals：操作数据库

Django：

　　　基于wsgi框架来实现的

　　　安装：

　　　　　　使用pip来进行安装

　　　创建：

　　　　     可以通过软件直接进行启动，也可以使用命令行进行安装

　　　　　　django-admin startproject 项目名称

　　　　　　创建完以后

　　　　　　项目名

　　　　　　　　项目名

　　　　　　　　　　-settings.py 配置文件

　　　　　　　　　　-urls.py 路由映射

　　　　　　　　　　-wsgi.py 

　　　　　　　　manage.py   django程序的启动文件

　　　　　　创建app：

　　　　　　　　监控

　　　　　　　　cmdb等等，都可以进行创建

　　　　　　　　python manage.py startapp cmdb

　　　　　　使用模板

　　　　　　　　settings配置

　　　　　　　　render（request,'路径'）

　　　　　　静态文件配置

　　　　　　　　static_url='/wzc/'

　　　　　　　　staticfiles_dir=(os.path.join(BASE_DIR,'statices'),) 这里面需要添加逗号

　　　　　　　　statics目录放置静态文件

    <script src="/fff/jquery-1.12.4.js"></script>

 　　　　　　连接数据库、操作数据

　　　　　　　　ORM是可以通过Django里面提供的功能

　　　　　　　　执行命令：

　　　　　　　　　　python manage.py makemigrations

　　　　　　　　　　python manage.py migrate

　　　　　　　　　　数据库和相应的表已经创建完毕

　　　　　　操作数据库

　　　　　　　　检测：

　　　　　　　　　　models.类.objects.filter(user="wzc")

　　　　　　　　　　models.类.objects.filter(user="wzc").count()

　　　　　　　　　　wzc这个用户是否存在

　　　　　　　　　　通过return redirect来进行跳转

　　　　　　　　生产数据

　　　　　　　　　　models.类.objects.create(user='数据',passwd='数据')

　　　　　　　　获取数据：

　　　　　　　　　　models.类.objects.all()

　　　　　　　　　　

　　　　　　　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wlzhc/p/5836579.html