时间戳

首页 > 技术文章 > py-day17-jquery

py-day17-jquery

liuyansheng 2016-12-01 15:38 原文

jquery实现案例

案例：

1、点赞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item').click(function () {
            AddFavor(this);
        });

        function AddFavor(self) {
            // DOM对象
            var fontSize = 15;
            var top = 0;
            var right = 0;
            var opacity = 1;

            var tag = document.createElement('span');
            $(tag).text('+1');
            $(tag).css('color','green');
            $(tag).css('position','absolute');
            $(tag).css('fontSize',fontSize + "px");
            $(tag).css('right',right + "px");
            $(tag).css('top',top + 'px');
            $(tag).css('opacity',opacity);
            $(self).append(tag);

            var obj = setInterval(function () {
                fontSize = fontSize + 10;
                top = top - 10;
                right = right - 10;
                opacity = opacity - 0.1;

                $(tag).css('fontSize',fontSize + "px");
                $(tag).css('right',right + "px");
                $(tag).css('top',top + 'px');
                $(tag).css('opacity',opacity);
                if(opacity < 0){
                    clearInterval(obj);
                    $(tag).remove();
                }
            }, 40);

        }
    </script>

</body>
</html>

2、多选、反选、取消、编辑、删除

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 700px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 500px;">
            <div class="ziti" style="float: left;margin-left: 200px">
                <p><b>运维主机如下：</b></p>
                <input type="button" value="添加" onclick="addElement();"  class="ziti shou " onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" />
                <input type="button" value="全选" onclick="chooseAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" />
                <input type="button" value="取消" onclick="cancleAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" />
                <input type="button" value="反选" onclick="reverseAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" />
                <input type="button" value="编辑模式"  class="ziti shou edit" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" />

                <table border="1" id="zs">
                    <thead>
                        <tr>
                            <th>选择</th>
                            <th>主机名</th>
                            <th>IP</th>
                            <th>端口</th>
                            <th>操作</th>
                        </tr>
                    </thead >
                    <tbody id="tb">

                        <tr>
                            <td>
                                <input type="checkbox" />
                            </td>
                            <td target="hostname">aa</td>
                            <td target="ip">192.168.1.1</td>
                            <td target="port">22</td>
                            <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" id="test" /></td>
                            <td target="hostname">aa</td>
                            <td target="ip">192.168.2.2</td>
                            <td target="port">80</td>
                            <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td target="hostname">aa</td>
                            <td target="ip">192.168.3.3</td>
                            <td target="port">8080</td>
                            <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td target="hostname">aa</td>
                            <td target="ip">192.168.4.4</td>
                            <td target="port">8080</td>
                            <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td target="hostname">aa</td>
                            <td target="ip">192.168.5.5</td>
                            <td target="port">88</td>
                            <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td target="hostname">aa</td>
                            <td target="ip">192.168.6.6</td>
                            <td target="port">66</td>
                            <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td target="hostname">aa</td>
                            <td target="ip">192.168.8.8</td>
                            <td target="port">111</td>
                            <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td target="hostname">aa</td>
                            <td target="ip">192.168.9.9</td>
                            <td target="port">23</td>
                            <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td target="hostname">aa</td>
                            <td target="ip">192.168.10.10</td>
                            <td target="port">99</td>
                            <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td target="hostname">aa</td>
                            <td target="ip">192.168.11.11</td>
                            <td target="port">000</td>
                            <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td target="hostname">aa</td>
                            <td target="ip">192.168.12.12</td>
                            <td target="port">66</td>
                            <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td>
                        </tr>
                    </tbody>
                </table>
                <div class="modal hide">
                    <div>
                        <input name="hostname" type="text"  />
                        <input name="ip" type="text" />
                        <input name="port" type="text" />
                    </div>

                    <div>
                        <input type="button" value="取消" onclick="cancelModal();" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '"/>
                        <input type="button" value="确定" onclick="confirmModal();" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '"/>
                    </div>
                </div>

                <div class="shadow hide"></div>
            </div>
        </div>
    </div>


<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        });
        $("#title").mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $('#title').on('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        });
        $("#title").mouseup(function(){
            $("#title").off('mousemove');
        });
    })
</script>

<script>
    function chooseAll(){
        $('#tb :checkbox').prop('checked',true);
    }
     function cancleAll(){
        $('#tb :checkbox').prop('checked',false);
    }
    function reverseAll(){
        $(':checkbox').each(function(){
            var v = $(this).prop('checked')?false:true;
        $(this).prop('checked',v);
        })
    }

</script>

<script>

        $('.del').click(function () {
            $(this).parent().parent().remove();
        });

        function  confirmModal() {
            var liu = '<tr> <td><input type="checkbox" /></td> <td>aa</td> <td>192.168.10.10</td> <td>99</td> <td><input class="edit" type="button" value="编辑"  /> | <input class="del" type="button" value="删除"  /></td> </tr>';
            $("#tb").append(liu)

            $(".modal,.shadow").addClass('hide');

        }

        function  addElement() {
            $(".modal,.shadow").removeClass('hide');
        }
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
            $('.modal input[type="text"]').val("");
        }

        $('.edit').click(function(){
            $(".modal,.shadow").removeClass('hide');
            // this
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                // 获取td的target属性值
                var n = $(this).attr('target');
                // 获取td中的内容
                var text = $(this).text();
                var a1 = '.modal input[name="';
                var a2 = '"]';
                var temp = a1 + n + a2;
                $(temp).val(text);
            });
        });
    </script>
</body>
</html>
View Code

3、菜单1 | 2 | 3 |

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>

    <div style="width: 700px;margin:0 auto">

        <div class="menu">
            <div  class="menu-item active" a="1">菜单一</div>
            <div  class="menu-item" a="2">菜单二</div>
            <div  class="menu-item" a="3">菜单三</div>
        </div>
        <div class="content">
            <div b="1">内容一</div>
            <div class="hide"  b="2">内容二</div>
            <div class="hide" b="3">内容三</div>
        </div>

    </div>

<script src="jquery-1.12.4.js"></script>
<script>
    $('.menu-item').click(function(){
       $(this).addClass('active').siblings().removeClass('active');
        var target = $(this).attr('a');
        $('.content').children("[b='"+ target + "']").removeClass('hide').siblings().addClass('hide');
    });
</script>
</body>
</html>

4、标题

　　　　内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: black;
            color: wheat;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height:400px;width: 200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">标题一</div>
            <div id="i1" class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容</div>
        </div>

        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function(){
            // 当前点击的标签 $(this)
            // 获取某个标签的下一个标签
            // 获取某个标签的父标签
            // 获取所有的兄弟标签
            // 添加样式和移除样式
            // $('.i1').addClass('hide')
            // $('#i1').removeClass('hide')
            // var v = $("this + div");
            // $("label + input")
            // console.log(v);
            //
            // $("afsldkfja;skjdf;aksdjf")

            // 筛选器
            /*
            $(this).next()      下一个
            $(this).prev()      上一个
            $(this).parent()    父
            $(this).children()  孩子
            $('#i1').siblings() 兄弟
            $('#i1').find('#i1') 子子孙孙中查找
            // . . .
            //
            $('#i1').addClass(..)
            $('#i1').removeClass(..)
            */

            // 链式编程
            // $(...).click(function(){
            //     this..
            // })


//            $(this).next().removeClass('hide');
//            $(this).parent().siblings().find('.content').addClass('hide')

            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

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

5、jquery超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a>

    <a id="i1" href="http://www.oldboyedu.com">走你2</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ClickOn() {
            alert(123);
            return true;
        }
        $('#i1').click(function () {
            alert(456);
            return false;
        })
    </script>
</body>
</html>

6、有规则添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="t1" type="text" />
    <input id="a1" type="button" value="添加" />

    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
<script src="jquery-1.12.4.js"></script>
    <script>
        $('#a1').click(function () {
            var v = $('#t1').val();
            var temp = "<li>" + v + "</li>";
            $('#u1').append(temp);
        });

//        $('ul li').click(function () {
//            var v = $(this).text();
//            alert(v);
//        })

//        $('ul li').bind('click',function () {
//            var v = $(this).text();
//            alert(v);
//        })

//        $('ul li').on('click', function () {
//            var v = $(this).text();
//            alert(v);
//        })

        $('ul').delegate('li','click',function () {
            var v = $(this).text();
            alert(v);
        })

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

7、<div></div>鼠标可随意拖动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div style="border: 1px solid #ddd;width: 700px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 500px;">
            <div class="ziti" style="float: left;margin-left: 200px"></div>
        </div>
 </div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        });
        $("#title").mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $('#title').on('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        });
        $("#title").mouseup(function(){
            $("#title").off('mousemove');
        });
    })
</script>
</body>
</html>

 

推荐阅读