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>

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>

最新文章

  1. Couldn&#39;t open CUDA library cublas64_80.dll etc. tensorflow-gpu on windows
  2. Spring中集合类型属性注入
  3. Abstract Class与 Interface 的区别
  4. 2.常用快捷键.md
  5. Python学习笔记五--条件和循环
  6. hdu4861（游戏）
  7. linux c socket 并发 服务端
  8. Python CSV 超简明用法
  9. 史上最难的一道Java面试题 (分析篇)
  10. Java基础---Java---网络编程---TCP的传输、客户端和服务端的互访、建立一个文本转换器、编写一个聊天程序
  11. WebRTC MCU( Multipoint Conferencing Unit)服务器调研
  12. Python_mongoDB
  13. MVC开发模式简述
  14. 【bug小记】应用跳转白屏
  15. 水题系列二：PhoneNumbers
  16. 课程一(Neural Networks and Deep Learning)，第四周（Deep Neural Networks）——2.Programming Assignments: Building your Deep Neural Network: Step by Step
  17. git 添加review的相关操作
  18. Mina源码研究
  19. 玩转oracle学习第七天
  20. cowboy添加验证码

热门文章

  1. 【CODEFORCES】 B. Dreamoon and Sets
  2. 怎样高速编译mediatek\operator以下代码
  3. 实记处理mongodb的NUMA问题
  4. sql无限级树型查询
  5. UVA 12130 - Summits(BFS+贪心)
  6. Xcode 6 的新增特性
  7. ecshop属性排序
  8. gradle中的 settings.gradle
  9. TCP/IP-ICMP-Ping-Traceroute
  10. Codeforces Round #173 (Div. 2) E. Sausage Maximization —— 字典树 + 前缀和