求注释 jquery 每段大概执行的意思

爱许乐
  • 179
在学习jquery,需要一点点的注释即可。


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        header {
            height: 50px;
            line-height: 50px;
        }

            header * {
                float: left;
                cursor:pointer
            }

            header p {
                margin: 0 5px;
            }

        .ul-list {
            width: 1000px;
            margin: auto;
        }

            .ul-list li {
                width: 100px;
                color: #fff;
                line-height: 100px;
                text-align: center;
                height: 100px;
                float:left;
                background:#0094ff;
                margin:5px;
                position:relative;
            }
                .ul-list li i {
                    cursor:pointer;
                    display: none;
                    width: 30px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    right: 0;
                    top: 0;
                    position: absolute;
                    background: #ccc;
                }
                    .ul-list li i.del-yes {
                        background: red;
                    }
        .operation{
            display:none
        }
    </style>
</head>
<body>
    <header>
        <div class="operation">
            <p id="allCheck" data-value="0">全选</p>
            <p id="delete">删除</p>
        </div>
        <div id="batchManage" data-value="1">批量管理</div>
    </header>
    <ul class="ul-list">
        <li><i>√</i>1</li>
        <li><i>√</i>2</li>
        <li><i>√</i>3</li>
        <li><i>√</i>4</li>
        <li><i>√</i>5</li>
        <li><i>√</i>6</li>
        <li><i>√</i>7</li>
        <li><i>√</i>8</li>
    </ul>
    <script src='https://code.jquery.com/jquery-2.0.0.min.js'></script>
    <script>
        ; +function ($) {
            var $operation = $('.operation'),
                $ulList = $('.ul-list'),
                $i = $ulList.find('i');
            $('#batchManage').on('click', function () {
                var self = $(this),
                    val = self.data('value');
                if (~~val) {
                    self.text('取消管理').data('value', '0');
                } else {
                    self.text('批量管理').data('value', '1');
                }
                $operation.toggle();
                $i.toggle();
            })
            $('#allCheck').on('click', function () {
                var _this=$(this),
                    val = ~~_this.data('value');
                if (val) {
                    $i.removeClass('del-yes')
                    _this.data('value', 0)
                } else {
                    $i.addClass('del-yes');
                    _this.data('value', 1)
                }
            })
            $i.on('click', function () {
                $(this).toggleClass('del-yes')
            })
            $('#delete').on('click', function () {
                $i.each(function () {
                    if ($(this).hasClass('del-yes')) {
                        $(this).parent().remove();
                    }
                })
            })
        }(jQuery);
    </script>
</body>
</html>
回复
阅读 1.9k
2 个回答
✓ 已被采纳

这个查下 jQuery的api文档 不就好了?

年轻的程序员a
  • 1
新手上路,请多包涵

//页面加载执行的事件类似于js的window.onload
function ($) {

        var $operation = $('.operation'),
            $ulList = $('.ul-list'),//选择class等于ul.list的元素并将它赋给一个变量
            $i = $ulList.find('i');//在$ulList查找i标签
        $('#batchManage').on('click', function () {//给id为batchManage的元素绑定click事件
            var self = $(this),
                val = self.data('value');
            if (~~val) {
                self.text('取消管理').data('value', '0');
            } else {
                self.text('批量管理').data('value', '1');
            }
            $operation.toggle();
            $i.toggle();
        })
        $('#allCheck').on('click', function () {
            var _this=$(this),
                val = ~~_this.data('value');
            if (val) {
                $i.removeClass('del-yes')
                _this.data('value', 0)
            } else {
                $i.addClass('del-yes');
                _this.data('value', 1)
            }
        })
        $i.on('click', function () {
            $(this).toggleClass('del-yes')
        })
        $('#delete').on('click', function () {
            $i.each(function () {
                if ($(this).hasClass('del-yes')) {
                    $(this).parent().remove();
                }
            })
        })
    }(jQuery);function ($) {
        var $operation = $('.operation'),
            $ulList = $('.ul-list'),
            $i = $ulList.find('i');
        $('#batchManage').on('click', function () {
            var self = $(this),
                val = self.data('value');
            if (~~val) {
                self.text('取消管理').data('value', '0');
            } else {
                self.text('批量管理').data('value', '1');
            }
            $operation.toggle();
            $i.toggle();
        })
        $('#allCheck').on('click', function () {
            var _this=$(this),
                val = ~~_this.data('value');
            if (val) {
                $i.removeClass('del-yes')
                _this.data('value', 0)
            } else {
                $i.addClass('del-yes');
                _this.data('value', 1)
            }
        })
        $i.on('click', function () {
            $(this).toggleClass('del-yes')
        })
        $('#delete').on('click', function () {
            $i.each(function () {
                if ($(this).hasClass('del-yes')) {
                    $(this).parent().remove();
                }
            })
        })
    }(jQuery);
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏