JQuery_案例_qq表情选择与JQuery_案例_下拉列表选中条目左右移动

JQuery_案例_qq表情选择

　　

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>QQ表情选择</title>
     <script  src="../../js/jquery-3.6.3.min.js"></script>
    <style type="text/css">
    *{margin: 0;padding: 0;list-style: none;}

    .emoji{margin:50px;}
    ul{overflow: hidden;}
    li{float: left;width: 48px;height: 48px;cursor: pointer;}
    .emoji img{ cursor: pointer; }
    </style>
    <script>
        //需求：点击qq表情，将其追加到发言框中
        $(function () {
            //1.给img图片添加onclick事件
            $("ul img").click(function(){
                //2.追加到p标签中即可。
                $(".word").append($(this).clone());
            });

        });

        
    </script>
    
</head>
<body>
    <div class="emoji">
        <ul>
            <li><img src="img/01.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/02.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/03.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/04.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/05.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/06.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/07.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/08.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/09.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/10.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/11.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/12.gif" height="22" width="22" alt="" /></li>
        </ul>
        <p class="word">
            <strong>请发言：</strong>
            <img src="img/12.gif" height="22" width="22" alt="" />
        </p>
    </div>
</body>
</html>

 

JQuery_案例_下拉列表选中条目左右移动

　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script  src="../../js/jquery-3.6.3.min.js"></script>


        <style>
            #leftName , #btn,#rightName{
                float: left;
                width: 100px;
                height: 300px;
            }
            #toRight,#toLeft{
                margin-top:100px ;
                margin-left:30px;
                width: 50px;
            }

            .border{
                height: 500px;
                padding: 100px;
            }
        </style>

        <script>

            //需求：实现下拉列表选中条目左右选择功能
            
            $(function () {
                //toRight
                $("#toRight").click(function () {
                    //获取右边的下拉列表对象，append(左边下拉列表选中的option)
                    $("#rightName").append($("#leftName > option:selected"));
                });

                //toLeft
                $("#toLeft").click(function () {
                    //appendTo   获取右边选中的option，将其移动到左边下拉列表中
                    $("#rightName > option:selected").appendTo($("#leftName"));

                });
            });
            

        </script>



    </head>
    <body>
        <div class="border">
            <select id="leftName" multiple="multiple">
                <option>张三</option>
                <option>李四</option>
                <option>王五</option>
                <option>赵六</option>
            </select>
            <div id="btn">
                <input type="button" id="toRight" value="-->"><br>
                <input type="button" id="toLeft" value="<--">

            </div>

            <select id="rightName" multiple="multiple">
                <option>钱七</option>
            </select>

        </div>


    </body>
</html>

 

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script  src="../../js/jquery-3.6.3.min.js"></script>


      <style>
#leftName , #btn,#rightName{
            float: left;
            width: 100px;
            height: 300px;
         }
         #toRight,#toLeft{
            margin-top:100px ;
            margin-left:30px;
            width: 50px;
         }

         .border{
            height: 500px;
            padding: 100px;
         }
      </style>

      <script>

//需求：实现下拉列表选中条目左右选择功能
         
$(function () {
            //toRight
$("#toRight").click(function () {
               //获取右边的下拉列表对象，append(左边下拉列表选中的option)
$("#rightName").append($("#leftName > option:selected"));
                });

                //toLeft
$("#toLeft").click(function () {
                    //appendTo   获取右边选中的option，将其移动到左边下拉列表中
$("#rightName > option:selected").appendTo($("#leftName"));

                });
            });
         

      </script>



   </head>
   <body>
      <div class="border">
         <select id="leftName" multiple="multiple">
            <option>张三</option>
            <option>李四</option>
            <option>王五</option>
            <option>赵六</option>
         </select>
         <div id="btn">
            <input type="button" id="toRight" value="-->"><br>
            <input type="button" id="toLeft" value="<--">

         </div>

         <select id="rightName" multiple="multiple">
            <option>钱七</option>
         </select>

      </div>


   </body>
</html>
posted @ 2023-02-22 10:47  zj勇敢飞，xx永相随  阅读(12)  评论(0)  编辑  收藏  举报