我的Python之路-day15

一、jQuery

　　本节主要讲解jQuery里面的详细用法，里面具体的方法请参考链接：http://www.php100.com/manual/jquery/

　　jQuery语言主要是找、操作，根据找的结果筛选出合适的来应用方法，具体详见以上链接

二、关于jQuery的各种例子

　　1、左侧菜单　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div>
    <div>
        <div id="m1"  onclick="Change(1);">菜单一</div>
        <div class="hide">
            <div>11</div>
            <div>11</div>
            <div>11</div>
        </div>
    </div>
    <div>
        <div id="m2"  onclick="Change(2);">菜二</div>
        <div class="hide">
            <div>22</div>
            <div>22</div>
            <div>22</div>
        </div>
    </div>
    <div>
        <div id="m3"  onclick="Change(3);">菜单三</div>
        <div class="hide">
            <div>33</div>
            <div>33</div>
            <div>33</div>
        </div>
    </div>
</div>

<script src="jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function Change(arg){
        //找到，到底点击哪一个？
        if(arg == 1){
            var menu = $('#m1')
        }else if(arg == 2){
            var menu = $('#m2')
        }else{
            var menu = $('#m3')
        }
        console.log(menu.text());
    }
</script>
</body>
</html>

运行效果：把菜单下面的内容全部隐藏

　　2、但是我们需求是当点击菜单一或者下面的会显示点击下面的内容隐藏其他的内容，所以升级版来了：

　　　　注意：设置默认第一个菜单内容会显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .content{
            font-size: larger;
        }
    </style>
</head>
<body>
<div>
    <div>
        <div onclick="Change(this);">菜单一</div>
        <div class="content">
            <div>11</div>
            <div>11</div>
            <div>11</div>
        </div>
    </div>
    <div>
        <div  onclick="Change(this);">菜单二</div>
        <div class="content hide">
            <div>22</div>
            <div>22</div>
            <div>22</div>
        </div>
    </div>
    <div>
        <div   onclick="Change(this);">菜单三</div>
        <div class="content hide">
            <div>33</div>
            <div>33</div>
            <div>33</div>
        </div>
    </div>
</div>

<script src="jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function Change(arg){
//        找到，到底点击哪一个？
//        var t = $(arg).text();
//        $(arg)当前点击的标签
//        console.log(t);
        //一、找到下一个标签，移除hide
            //$(arg).next() 下一个标签
            //removeClass('')
        $(arg).next().removeClass('hide');
        //二、找到其他菜单，内容隐藏，添加hide
            //当前标签的父亲标签$(arg).parent()
            //所有父亲标签的兄弟标签 $(arg).parent().siblings()
        $(arg).parent().siblings().find('.content').addClass('hide');



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

效果图：

　　3、多选、全选、取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" onclick="CheckAll();" value="全选">
    <input type="button" onclick="CheckReverse();" value="反选">
    <input type="button" onclick="CheckCancel();" value="取消">
    <table border="1">
        <thead></thead>
        <tbody id="tb1">
            <tr>
                <td><input type="checkbox"></td>
                <td>11111</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>22222</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>33333</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>44444</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.8.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        function CheckAll(){
            //$('#tb1').find(':checkbox').attr('checked','checked');
            $('#tb1').find(':checkbox').prop('checked',true);
        }
        function CheckReverse(){
            //找，如果选中，取消；未选中，选中
            $('#tb1').find(':checkbox').each(function(){
                //$(this) = 每一个复选框
                //$(this).prop()如果选中，true；否则false
                //attr 如果选中，checked，checked=checked
                if ($(this).prop('checked')){
                    $(this).prop('checked',false);
                }else{
                    $(this).prop('checked',true);
                }
            });
        }
        function CheckCancel(){
            //$('#tb1').find(':checkbox').removeAttr('checked');
            $('#tb1').find(':checkbox').prop('checked',false);
        }
    </script>
</body>
</html>

效果图：

　　4、弹出框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .modal{
        position: fixed;
        left: 50%;
        top: 50%;
        width: 500px;
        height: 400px;
        background-color: #ddd;
        margin-left: -250px;
        margin-top: -200px;
    }
    .hide{
        display: none;
    }
</style>
<body>
    <table border="1">
        <thead>
        <th>主机名</th>
        <th>IP</th>
        <th>端口</th>
        <th>操作</th>
        </thead>
        <tbody>
            <tr>
                <td>hehe.com</td>
                <td>1.1.1.1</td>
                <td>3389</td>
                <td onclick="GetPrve(this);">编辑</td>
            </tr>
            <tr>
                <td>hehe.com</td>
                <td>2.2.2.2</td>
                <td>3389</td>
                <td onclick="GetPrve(this);">编辑</td>
            </tr><tr>
                <td>hehe.com</td>
                <td>3.3.3.3</td>
                <td>3389</td>
                <td onclick="GetPrve(this);">编辑</td>
            </tr>
        </tbody>
    </table>
    <div id="dialog" class="modal hide">
        <form action="" method="get">
            <p>主机名：<input type="text" id="hostname"/></p>
            <p>IP：<input type="text" id="ip"/></p>
            <p>端口：<input type="text" id="port"/></p>
            <input type="submit" onclick="return  SubmitForm();" value="提交">
            <input type="button" onclick="Cancle();" value="取消">
        </form>
    </div>
    <script src="jquery-1.8.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        function GetPrve(ths){
            var list = [];
            $.each($(ths).prevAll(),function(i){
                //$(ths).prevAll() 查找调用此方法的上面的所有内容即 <td>hehe.com</td>  <td>1.1.1.1</td> <td>3389</td>
                var item = $(ths).prevAll()[i];
                var text = $(item).text();
                list.push(text);
            });
            var New_list = list.reverse();
            $('#hostname').val(New_list[0]);
            $('#ip').val(New_list[1]);
            $('#port').val(New_list[2]);

            $('#dialog').removeClass('hide')
        }
        function Cancle(){
            $('#dialog').addClass('hide')
        }
        function SubmitForm(){
            //获取form表单中input值
            //判断值是否为空
            var ret = true;
            //遍历所有的inpu，只要有空值，就将ret设置为false
            //$('input[type="text"]')
            $(':text').each(function(){
                //$(this)=要循环的每一个元素
                var value = $(this).val();
                if (value.trim().length == 0 ){
                    $(this).css('border-color','red');
                    ret = false
                }else{
                    $(this).css('border-color','green');
                }
            });
            return ret;
        }
    </script>
</body>
</html>

效果图：

　　5、循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script src="jquery-1.8.2.js" type="text/javascript"></script>
    <script type="text/javascript">
//        循环列表
        var a = [11,22,33,44,55,66];
        $.each(a,function(item){
            console.log(a[item]);
        });
//        循环字典
        var b = {"k1":"v1","k2":"v2"}
        $.each(b,function(key,value){
            console.log(key,value);
        });
    </script>
</body>
</html>

执行效果图：

　　6、筛选之-map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table>
        <thead></thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td onclick="get_prve(this);">编辑</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.8.2.js" type="text/javascript"></script>
    <script type="text/javascript">
       function get_prve(arg){
           //$(arg).siblings(),所有兄弟
           //循环多个标签中的每一个标签
           //每一个标签被循环时，都会执行map内部的函数并获取其返回值
           //将所有的返回值封装打一个数组（列表）中
           //返回列表
           var list = $(arg).siblings().map(function(){
              //当前循环的标签
               return $(this).text();
           });
           console.log(list[0],list[1],list[2]);
       }
    </script>
</body>
</html>

 

效果图

：

 持续更新中......

posted @ 2016-02-23 20:17  Mr_三石  阅读(43)  评论(0)    收藏  举报