jquery入门级简单案例

最新推荐文章于 2020-05-17 15:55:18 发布

天上人间一样愁

最新推荐文章于 2020-05-17 15:55:18 发布

阅读量607

点赞数 1

本文链接：https://blog.csdn.net/weixin_44392027/article/details/87904717

版权

城市选择案例
在这里插入图片描述
上面两个按钮会全部移动，下面则会移动已选中单位

在这里插入图片描述

    select {
        width: 200px;
        /*background-color: teal;*/
        height: 200px;
        font-size: 20px;
    }

    .btn-box {
        width: 30px;
        display: inline-block;
        vertical-align: top;
    }

<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="5">西红柿</option>
</select>
<div class="btn-box">
    <!--实体字符-->
    <button id="btn1"> &gt;&gt; </button>
    <button id="btn2"> &lt;&lt; </button>
    <button id="btn3"> &gt;</button>
    <button id="btn4"> &lt; </button>
</div>

$(function () {

    $('#btn1').click(function () {
        $('#src-city>option').appendTo($('#tar-city'));
    });
    $('#btn2').click(function () {
        $('#src-city').append($('#tar-city>option'));
    });
    //想要选中的过来
    $('#btn3').click(function () {
        console.log($('#src-city>option:selected'))
        $('#src-city>option:selected').appendTo('#tar-city');
    });

    $('#btn4').click(function () {
        $('#tar-city>option:selected').appendTo('#src-city');
    });

});

微博发布案例
在这里插入图片描述

发布后的效果
在这里插入图片描述

虽然案例样式有点敷衍，但便于理解就行，上源码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }

        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }

        ul {
            width: 450px;
            padding-left: 80px;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
        }

        input {
            float: right;
        }


    </style>
</head>
<body>
<div class="box" id="weibo">
    <span>微博发布</span>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
    <button id="btn">发布</button>
    <ul id="ul">

    </ul>
</div>

<script src="js/jquery-1.12.4.js"></script>
<script>
    $("#btn").click(function () {
        //解决添加空值
        if($("#txt").val().trim().length == 0) return;

      var val =   $("#txt").val();

      $("<li></li>").text(val).prependTo($("#ul"));
      $("#txt").val("");


    })


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

天上人间一样愁

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery入门级简单案例

城市选择案例上面两个按钮会全部移动，下面则会移动已选中单位 select { width: 200px; /*background-color: teal;*/ height: 200px; font-size: 20px; } .btn-box { width: 30px; ...
复制链接

扫一扫