jquery功能列表

最新推荐文章于 2024-08-29 03:52:25 发布

Protagonists

最新推荐文章于 2024-08-29 03:52:25 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/owc1874/article/details/80777631

jquery 专栏收录该内容

1 篇文章

订阅专栏

这篇博客主要展示了jQuery的各种功能，通过一个精彩的效果图进行呈现，让读者能够一目了然地了解jQuery在网页交互和操作方面的强大能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .list_con{
            width: 600px;
            margin: 50px auto 0;
        }
        .inputtext{
            width: 550px;
            height: 30px;
            border: 1px solid #ccc;
            padding: 0px;
            text-indent: 10px;
        }
        .inputbtn{
            width: 40px;
            height: 32px;
            padding: 0px;
            border: 1px solid #ccc;
        }
        .list{
            margin: 0;
            padding: 0;
            list-style: none;
            margin-top: 20px;
        }
        .list li{
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }
        .list li span{
            float: left;
        }
        .list li a{
            float: right;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){

            var $contentInput = $('#text1');
            var $addBtn = $('#btn1');
            var $list = $('#list');
        
        
        $addBtn.click(function(){
            //判断是否为空
            if($contentInput.val()==''){
                alert('请输入内容!')
                return;
            }
            // 这是jquery的拼接
            var $sLi = $('<li><span>'+$contentInput.val()+'</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#" class="del">删除</a>')
            $list.append($sLi);

            //清空输入框
            $contentInput.val('');
        })
            //事件的委托,之所以会用事件的委托,是因为后面会有添加的li标签,也要对其有效果
            $list.delegate('a','click',function(){
                var sClass = $(this).prop('class');
                if(sClass=="del"){
                    // 点的是a标签,我们要删的是li标签
                    $(this).parent().remove();
                }else if(sClass=="up"){
                    //获取当前的li标签
                    var $currentLi = $(this).parent();
                    //获取当前li标签的上一个标签
                    var $upLi = $(this).parent().prev();

                    // console.log($currentLi.length);

                    if($upLi.length==0){
                        alert('到头了');
                        return;
                    }
                    //交换顺序
                    $upLi.insertAfter($currentLi);
                }
                else if(sClass=="down"){
                    //获取当前li标签
                    var $currentLi = $(this).parent();
                    //获取下面的li标签
                    var $downLi = $(this).parent().next();

                    if($downLi.length==0){
                        alert('到底了')
                        return;
                    }
                    //交换顺序
                    $downLi.insertBefore($currentLi);
                    // $currentLi.insertAfter($downLi);
               }
            })

        
        })


    
    </script>
</head>
<body>
    <div class="list_con">
    <h2>添加、删除、排序</h2>
        <input type="text" name="" id="text1" class="inputtext">
        <input type="button" name="" value="增加" id="btn1" class="inputbtn">

        <ul id="list" class="list">
            <li><span>你今天好不好</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#" class="del">删除</a>
            </li>
            <li>
                <span>学习,学习,学习</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#" class="del">删除</a>
            </li>
            <li class="third"><span>走到她身边去</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#" class="del">删除</a>
            </li> 
            
        </ul>


    </div>
</body>
</html>

jquery功能列表

效果图: