jQuery学习总结【第二篇】： jQuery应用

jQuery表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证v1.0</title>
     <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 42px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 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() {
            // 找到form标签下的所有需要验证的标签
            // $('form .cl') 查找form标签下的cl类
            // $('form input[type="text"],form input[type="text"]') 查找form标签下的input标签type等于text或者password的标签

            $('form .item span').remove();
            var flag = true;

            $('form .c1').each(function () {
                // 每个元素执行一次匿名函数
                // this
                // console.log(this,$(this))
                var val = $(this).val();
                if(val.length<=0){
                    var lable = $(this).attr('label');
                    var tag = document.createElement('span');
                    tag.innerText = lable + "不能为空";
                    $(this).after(tag);  // 将添加的span标签通过after的方式添加到input的下面
                    flag = false;
                }
            });
            return flag;
        }
    </script>
</body>
</html>
表单验证（DOM事件绑定）v1.0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证(jQuery绑定推荐)v1.0</title>
     <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 42px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 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:submit').click(function () {  // 当input标签被点击时就显示提示
                var flag = true;
                $('form .item span').remove();


                $('form .c1').each(function () {
                // 每个元素执行一次匿名函数
                // this
                // console.log(this,$(this))
                var val = $(this).val();
                if(val.length<=0){
                    var lable = $(this).attr('label');
                    var tag = document.createElement('span');
                    tag.innerText = lable + "不能为空";
                    $(this).after(tag);  // 将添加的span标签通过after的方式添加到input的下面
                    flag = false;
                    return false;  // 添加此句，验证有一条不符合要求就退出，不再继续向下执行
                }
                });
                return flag;
            });

        }
    </script>
</body>
</html>
表单验证（jQuery事件绑定推荐）v2.0
 

jQuery补充知识点

$.each     return false 表示break;

 

JQuery扩展(插件机制)

1、jQuery.fn.extend(object)

功能：扩展 jQuery 元素集来提供新的方法（通常用来制作插件）

2、jQuery.extend(object)

功能：扩展jQuery对象本身

 

自定义jQuery扩展要点

  • 自执行
  • 闭包
# extend1.js
/**
 * Created by alex on 2016/8/28.
 */

(function(jq){
    jq.extend({
        'dalong1': function(arg){
            console.log(arg);
        }
    });

    function f1(){

    }
})(jQuery);
定义一个jQuery扩展
    <script src="jquery-1.12.4.js"></script>
    <script src="extend1.js"></script>
    <script>
        $.dalong1('123');
    </script>
调用自定义扩展

 

jQuery扩展实现基本验证

1、是否支持为空

2、长度判断

3、正则表达式（详见：http://www.cnblogs.com/madsnotes/articles/5656043.html之正则）

案例：基本验证

# 自定义扩展 commons.js
/**
 * Created by alex on 2016/8/28.
 */
(function(jq){

    function ErrorMessage(inp,message){
        var tag = document.createElement('span');
        tag.innerText = message;
        inp.after(tag);
    }

    jq.extend({
        valid:function(form){
            // #form1 $('#form1')
            jq(form).find(':submit').click(function(){

                jq(form).find('.item span').remove();

                var flag = true;
                jq(form).find(':text,:password').each(function(){

                    var require = $(this).attr('require');
                    if(require){
                        var val = $(this).val();

                        if(val.length<=0){
                            var label = $(this).attr('label');
                            ErrorMessage($(this),label + "不能为空");
                            flag = false;
                            return false;
                        }

                        var minLen = $(this).attr('min-len');
                        if(minLen){
                            var minLenInt = parseInt(minLen);
                            if(val.length<minLenInt){
                                var label = $(this).attr('label');
                                ErrorMessage($(this),label + "长度最小为"+ minLen);
                                flag = false;
                                return false;
                            }
                            //json.stringify()
                            //JSON.parse()
                        }

                        var phone = $(this).attr('phone');
                        if(phone){
                            // 用户输入内容是否是手机格式
                            var phoneReg = /^1[3|5|8]\d{9}$/;
                            if(!phoneReg.test(val)){
                                var label = $(this).attr('label');
                                ErrorMessage($(this),label + "格式错误");
                                flag = false;
                                return false;
                            }
                        }

                        // 1、html自定义标签属性
                        // 增加验证规则+错误提示

                    }
                });

                return flag;
            });
        }
    });
})(jQuery);
扩展
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 42px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>

    <div>
        <form id="form1">
            <div class="item">
                用户名：<input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/>
            </div>
            <div class="item">
                密 码：<input  class="c1" type="password" name="pwd" label="密码"/>
            </div>
            <div class="item">
                手 机：<input  class="c1" type="text" name="phone" label="手机" require="true" phone="true"/>
            </div>
            <input type="submit" value="提交" />
        </form>

    </div>

    <script src="jquery-1.12.4.js"></script>
    <script src="commons.js"></script>
    <script>
        $(function(){
            $.valid('#form1');
        });


    </script>
</body>
</html>
调用扩展js，实现基本验证

 

滚动菜单实现案例

<!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{
            width: 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;
            width: 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;
            width: 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;
            width: 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.8.2.min.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
                    

                    // 当前内容位于用户阅览区
                    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');
                        return false;
                        */
                        
                        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>
案例

 

posted @ 2016-08-29 21:34  每天进步一点点！！！  阅读(215)  评论(0)  编辑  收藏  举报