jQuery常用编程案例

最新推荐文章于 2024-05-08 02:39:14 发布

Charles-Su

最新推荐文章于 2024-05-08 02:39:14 发布

阅读量339

点赞数 1

分类专栏： web前端文章标签： jquery

本文链接：https://blog.csdn.net/happygjcd/article/details/104227243

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

jQuery实现全选，反选和取消按钮

以下是要操控的HTML代码

<input type="button" value="全选" onclick="selectAll()"/>
    <input type="button" value="取消" onclick="cancelAll()"/>
    <input type="button" value="反选" onclick="reverse()"/>
    <table border="1" id="tb">
        <tr>
            <th>IP地址</th>
            <th>端口号</th>
            <th>选择</th>
        </tr>
        <tr>
            <td>10</td>
            <td>10</td>
            <td><input type="checkbox"/></td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td><input type="checkbox"/></td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td><input type="checkbox"/></td>
        </tr>

基于DOM来实现反选

JavaScript代码

<script src="../jquery-3.4.1.min.js"></script>
    <script>
        function selectAll() {
            $(':checkbox').prop('checked', true);
            // tag.checked = true;
        }
        function cancelAll() {
            // $(":checkbox").prop('checked', true);
            $(':checkbox').prop('checked', false);
        }
        
        function reverse() {
            $(':checkbox').each(function () {
                /* this代表当前循环的元素,这个this是DOM对象
                    所以这是基于DOM的写法，下面还有基于jQuery的写法*/
                if(this.checked){
                    this.checked = false;
                }
                else {
                    this.checked = true;
                }
            })
        }
	 <script/>

基于jQuery的写法

<script src="../jquery-3.4.1.min.js"></script>
    <script>
        function selectAll() {
            $(':checkbox').prop('checked', true);
            // tag.checked = true;
        }
        function cancelAll() {
            // $(":checkbox").prop('checked', true);
            $(':checkbox').prop('checked', false);
        }
		function reverse() {
		            $(':checkbox').each(function () {
		                if ($(this).prop('checked')){
		                    $(this).prop('checked', false);
		                }
		                else{
		                    $(this).prop('checked', true)
		                }
		            })
		        }
    <script/>

基于jQuery（使用三元运算符）

function reverse() {
          $(":checkbox").each(function () {
              var result = $(this).prop('checked')?false:true;
              $(this).prop('checked' , result);
          })
      }

jQuery实现模态对话框

点击编辑弹出对话框，对话框上的文本框上显示内容
点击添加弹出对话框，对话框的文本框上内容为空
点击对话框上的取消或者确定，对话框消失

JavaScript代码

	<script src="../jquery-3.4.1.min.js"></script>
    <script>
        $('.edit').click(function () {
            $(".modal,.shadow").removeClass('hide');
            var tds = $(this).parent().prevAll();
            var ip = $(tds[0]).text();
            var port = $(tds[1]).text();
            var hostname = $(tds[2]).text();
            $("[name='ip']").val(ip);
            $("[name='port']").val(port);
            $("[name='hostname']").val(hostname);
        });
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
        }
        function confirmModal() {
            $(".modal,.shadow").addClass('hide');
        }
        function addElement() {
            $(".modal,.shadow").removeClass('hide');
            $('[type="text"]').val('');
        }
    </script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>
<a onclick="addElement();">添加</a>

    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.14</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
    </table>
    <!-- 模态对话框 -->
    <div class="modal hide">
        <div>
            <input name="hostname" type="text"  />
            <input name="port" type="text" />
            <input name="ip" type="text" />
        </div>
        <div>
            <input type="button" value="取消" onclick="cancelModal();" />
            <input type="button" value="确定" onclick="confirmModal();" />
        </div>
    </div>
    <!-- 遮罩层开始 -->
    <div class="shadow hide"></div>

    <script src="../jquery-3.4.1.min.js"></script>
    <script>
        $('.edit').click(function () {
            $(".modal,.shadow").removeClass('hide');
            var tds = $(this).parent().prevAll();
            var ip = $(tds[0]).text();
            var port = $(tds[1]).text();
            var hostname = $(tds[2]).text();
            $("[name='ip']").val(ip);
            $("[name='port']").val(port);
            $("[name='hostname']").val(hostname);
        });
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
        }
        function confirmModal() {
            $(".modal,.shadow").addClass('hide');
        }
        function addElement() {
            $(".modal,.shadow").removeClass('hide');
            $('[type="text"]').val('');
        }
    </script>
</body>
</html>

代码改进

这种写法有点问题，比如我们的资产管理里边，如果有很多列的话就不方便了，所以下面用属性来实现，武sir的完整HTML代码

    <script src="jquery-1.12.4.js"></script>
    <script>

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

        function  confirmModal() {

            var tr = document.createElement('tr');
            var td1 = document.createElement('td');
            td1.innerHTML = "11.11.11.11";
            var td2 = document.createElement('td');
            td2.innerHTML = "8001";

            $(tr).append(td1);
            $(tr).append(td2);

            $('#tb').append(tr);

            $(".modal,.shadow").addClass('hide');
//            $('.modal input[type="text"]').each(function () {
//                // var temp = "<td>..."
//
//
//
//            })
        }

        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);
            });


//            var port = $(tds[0]).text();
//            var host = $(tds[1]).text();
//
//            $('.modal input[name="hostname"]').val(host);
//            $('.modal input[name="port"]').val(port);
            // 循环获取tds中内容
            // 获取 <td>内容</td> 获取中间的内容
            // 赋值给input标签中的value

        });
    </script>

我的JavaScript代码

<script>
        $('.edit').click(function () {
            $(".modal,.shadow").removeClass('hide');
            var tds = $(this).parent().prevAll();
            var ip = $(tds[0]).text();
            var port = $(tds[1]).text();
            var hostname = $(tds[2]).text();
            $("[name='ip']").val(ip);
            $("[name='port']").val(port);
            $("[name='hostname']").val(hostname);
        });
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
        }
        function confirmModal() {
            $(".modal,.shadow").addClass('hide');
        }
        function addElement() {
            $(".modal,.shadow").removeClass('hide');
            $('[type="text"]').val('');
        }
    </script>

jQuery实现tab菜单

HTML代码

       <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>

操作属性来实现

$('.menu-item').click(function () {
           $(this).addClass('active').siblings().removeClass('active');
           var a = $(this).attr('a');
           $('.content').children("[b='"+a+"']").removeClass('hide').siblings().addClass('hide');
           // $('div[b="'+text+'"]').removeClass('hide').addClass('hide');
       })

使用索引,index()来实现

$('.menu-item').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            i = $(this).index();
            $('.content').children().eq(i).removeClass('hide').siblings().addClass('hide');
        })

效果：
点击相应的菜单，显示相应的内容，颜色也跟着变化
在这里插入图片描述

jQuery实现添加删除文本标签

<script>
    $('#addText').click(function () {
        var text = $('#t1').val();
        var tmp = '<li>' + text + '<li/>';
        $('#u1').prepend(tmp);
    });
    $('#deleteText').click(function () {
        var index = $('#t1').val();
        // $('#u1').children().eq(index).remove();
        // remove是把整个标签去掉，empty是把标签里的内容去掉
        $('#u1').children().eq(index).empty();
    })
</script>

jQuery实现开关按钮

 <script>
        // 如果有这个属性就把他去掉，没有就加上
        $('.hide').click(function () {
            $('.hide').toggleClass('.hide');
        });
    </script>

jQuery实现点赞+1动态效果

    <script>
        $('span').click(function () {
            addFavor(this);
        });
        function addFavor(self) {
            var top = 0;
            var right = 0;
            var fontSize = 15;
            var opacity = 1;
            var t = document.createElement('span');
            $(t).text('+1');
            $(t).css('position', 'absolute');
            $(t).css('color', 'green');
            $(t).css('top', top + 'px' );
            $(t).css('right', right + 'px');
            $(t).css('fontSize', fontSize + 'px');
            $(t).css('opacity', opacity);
            $(self).append(t);
            setInterval(function () {
                top = top - 10;
                right = right - 10;
                fontSize = fontSize + 5;
                opacity = opacity - 0.2;
                $(t).text('+1');
                $(t).css('position', 'absolute');
                $(t).css('color', 'green');
                $(t).css('top', top + 'px' );
                $(t).css('right', right + 'px');
                $(t).css('fontSize', fontSize + 'px');
                $(t).css('opacity', opacity);
            }, 100);
        }
    </script>

jQuery的delegate（委托）绑定

当我们想添加某些标签，而且又想让这些刚刚添加的标签拥有原先添加那些标签的功能的时候，就要用delegate，它有委托的作用当我们点哪个标签，它就绑定到哪个标签上，而其他绑定方式是不行的。
例子：

<!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-3.4.1.min.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>

实验发现，只有delegate可以在我们添加了新的元素后，把alert(v)这个事件绑定到delegate上

Charles-Su

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery常用编程案例

文章目录jQuery实现全选，反选和取消按钮基于DOM来实现反选基于jQuery的写法基于jQuery（使用三元运算符）jQuery实现全选，反选和取消按钮以下是要操控的HTML代码<input type="button" value="全选" onclick="selectAll()"/> <input type="button" value="取消" oncli...
复制链接

扫一扫