Python 前端之JQuery

查找：
选择器
筛选器

操作:
CSS
属性
文本

事件：
优化

扩展：
Form表单验证

Ajax:
偷偷发请求

www.php100.com/manual/jquery

http://blog.jquery.com/category/jquery/

 

利用JQuery实现左侧菜单的隐藏与显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 600px;
            width: 200px;
            line-height: normal;
            border: 1px solid darkgray;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">标题一</div>
            <div class="body">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">标题二</div>
            <div class="body hide">
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">标题三</div>
            <div class="body hide">
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
            </div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //$(ths) DOM转化为JQuery
        //$(ths)[0] JQuery转化为DOM
        function ShowMenu(ths){
            $(ths).next().removeClass("hide");
            $(ths).parent().siblings().find('.body').addClass("hide");
        }
    </script>
</body>
</html>

JQuery实现多选框的多选和反选

    <script src="jquery-1.12.4.js"></script>
    <script>
        function CheckALL(){
            $('#tb input[type="checkbox"]').prop('checked',true);
           
        }

        function CancelALL(){
            $('#tb input[type="checkbox"]').prop('checked',false);
           
        }

        function ReverseALL(){
            $('#tb input[type="checkbox"]').each(function(i){
                if($(this).prop("checked")){
                    $(this).prop("checked",false);
                }else{
                    $(this).prop("checked",true);
                }
            })
    </script>

 JQuery实现复制删除标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <p>
            <a onclick="Add(this)"> + </a>
            <input type="text" />
        </p>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function Add(ths){
            var p = $(ths).parent().clone();
            p.find('a').text('-')
            p.find('a').attr('onclick','Remove(this)');
            $(ths).parent().parent().append(p);
        }

        function Remove(ths){
            $(ths).parent().remove();
        }
    </script>
</body>
</html>

JQuery实现的菜单展开与收起

        $('.item .title').bind('click',function(){
            $(this).next().removeClass("hide");
            $(this).parent().siblings().find('.body').addClass("hide");
            })

        $('.item .title').click(function(){
            $(this).next().removeClass("hide");
            $(this).parent().siblings().find('.body').addClass("hide");
            })

当文档树已经加载完毕了，但是加载的图片还没有出现的时候，后面的代码可以执行，写法如下：

$(function(){
   ....... 
    });

JQuery延迟绑定，delegate，什么时候用的时候绑定。

<body>
    <input type="button" onclick="Add()"/>
    <ul>
        <li>第一课</li>
        <li>第二课</li>
        <li>第三课</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $("ul").delegate("li","click", function (){
                alert($(this).text());
            })
        })

        function Add(){
            var tag = document.createElement('li');
            tag.innerText = '666';
            $('ul').append(tag);
        }
    </script>
</body>

 JQuery之表单验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .item{
            width: 200px;
            /*background-color: #2459a2;*/
            height: 60px;
            /*color: white;*/
            position: relative;
        }
        .item input{
            width: 196px;
        }
        .item span{
            /*width: 202px;*/
            /*color: red;*/
            position: absolute;
            background-color: red;
            color: white;
            /*display: inline-block;*/
            top: 20px;
            left: 0;
            width: 200px;
            height: 22px;
        }
    </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 .c1')
//            $('form input[type="text"],form input[type="password"]')

　　　　　　　$('form .item span').remove();  //如果第一次没有输入，那么下面会显示错误信息，第二次输入后，错误信息应该被清除，所以在添加span之前，首先把所有的span标签清除

            var flag = true;
            $('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 false;
                }
            })
            return flag;
        }
    </script>
</body>
</html>

 利用JQuery来实现绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .item{
            width: 200px;
            /*background-color: #2459a2;*/
            height: 60px;
            /*color: white;*/
            position: relative;
        }
        .item input{
            width: 196px;
        }
        .item span{
            /*width: 202px;*/
            /*color: red;*/
            position: absolute;
            background-color: red;
            color: white;
            /*display: inline-block;*/
            top: 20px;
            left: 0;
            width: 200px;
            height: 22px;
        }
    </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(){
            BindCheckValue();
        })

        function BindCheckValue(){
            $('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;
            })
        }
//        function CheckValid(){
////            $('form .c1')
////            $('form input[type="text"],form input[type="password"]')
//            $('form .item span').remove();
//            var flag = true;
//            $('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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function Test(){
            $.each([11,22,33,44],function(k,v){
                console.log(k,v)
                if (v == 22){
                    return;             //continue
                }
                if (v == 33){
                    return false;       //break
                }
            });
        }
        Test()
    </script>
</body>
</html>
执行结果：
0 11
1 22
2 33

 JQuery之扩展方法:

假设需要导入extend1.js和extend2.js,由于同时具有两个f1()函数，因此需要使用函数的闭包来处理。

//extend1.js
$.extend({
    'dalong1':function(arg){
        console.log(arg);
    }
});

function f1(){

}
===========================================
//extend2.js
$.extend({
    'dalong2':function(arg){
        console.log(arg);
    }
});

function f1(){

}

那么经过修改之后的函数为：

//extend1.js
a = function(){
    $.extend({
        'dalong1':function(arg){
            console.log(arg);
        }
    });

    function f1(){

    }
};

==================================
//extend2.js
b = function(){
    $.extend({
        'dalong2':function(arg){
            console.log(arg);
        }
    });

    function f1(){

    }
};

像上面那么书写了以后，函数只是被定义了但是不会执行，执行的时候报错：

Uncaught TypeError: $.dalong1 is not a function

因为函数默认不会执行，只能在后面添加a();和b(); ,既然如此，就可以写成自执行函数的方式：

extend1.js

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

    function f1(){

    }
})();
===============================
extend2.js

(function(){
    $.extend({
        'dalong2':function(arg){
            console.log(arg);
        }
    });

    function f1(){

    }
})();

在导入的JS里面，使用到了$，那么如果我们需要将JQuery以参数的形式传递到JS里面，代码可以做如下的修改：

//extend1.js

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

    function f1(){

    }
})($);

================================

//extend2.js

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

    function f1(){

    }
})(jQuery);

 

posted on 2016-10-16 20:35  Alex0425  阅读(254)  评论(0)  编辑  收藏  举报
Copyright © 2024 Alex0425
Powered by .NET 8.0 on Kubernetes Powered by: 博客园