jq案例练习

最新推荐文章于 2022-10-13 09:14:07 发布

黑暗中的鬼

最新推荐文章于 2022-10-13 09:14:07 发布

阅读量1.1k

点赞数

本文链接：https://blog.youkuaiyun.com/Mrzhaoplus/article/details/78511747

版权

这篇博客展示了使用jQuery实现多选下拉菜单的交互功能，包括将选中或全部选项从一个下拉菜单移动到另一个，以及创建和删除DOM节点的方法。同时，还演示了如何通过hover和click事件改变元素的样式，例如鼠标悬停时改变颜色和点击切换元素的class。

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

//多显示下拉菜单两布局跳转案例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   select{
    width: 100px;
    height: 200px;
   }
  </style>

  <script src="js/jquery-1.11.1.min.js"></script>
  <script type="text/javascript">
   /*
   *首先布局，其次开始jq添加事件，，点击多的按钮右边布局获取所有左边布局的内容
   * option:selected 获取某个选中的内容
   *
   */
   $(function(){
    //点击按钮右边布局获取左边布局全部的option
    $("button").eq(0).click(function(){
     $("#you").append($("#zuo option"))
    })
    $("button").eq(3).click(function(){
     $("#zuo").append($("#you option"))
    })
    //点击按钮右边布局获取左边布局选中的元素
    $("button").eq(1).click(function(){
     $("#you").append($("#zuo option:selected"))
    })
    $("button").eq(2).click(function(){
     $("#zuo").append($("#you option:selected"))
    })



   })
  </script>
</head>
<body>
  
  <select id="zuo" multiple="">
   <option>西瓜</option>
   <option>哈密瓜</option>
   <option>柚子</option>
   <option>葡萄</option>
   <option>橘子</option>
  </select>
     <button>>>>>>></button>
  <button>></button>
  <button><</button>
  <button><<<<<</button>

  <select id="you" multiple="">

  </select>
</body>
</html>

//jq中四种创建节点添加内容方法

$(function(){
      //添加li第一种方法
      var li1=$("<li style='color:red;'>我是老大</li>");
      $("ul").append(li1);
        var li2=$("<li>");
        //添加li第二种方法
        li2.text("我是老二");
      $("ul").append(li2);
      //添加li第仨种方法，追加带第一位
      var li3=$("<li style='color:blue;'>我是老三</li>");
      $("ul").prepend(li3);
      //子追加到父
      var li4=$("<li style='color:blue;'>我是老四</li>");
      li4.prependTo($("ul"));
    })

//jq中删除所有方法——empty

$(function(){
      var btn=$("<button>删除所有</button>");
      $("body").prepend(btn);
      $(btn).click(function(){
       $("ul").empty();
      })
    })

//鼠标画上去改变颜色案例

$(function(){
     $("li").hover(function(){
      $(this).addClass("shang")
     },function(){
      $(this).removeClass("shang");
     });
   })

//点击切换颜色toggleClass改变class样式属性 toggle 改变样式--改变为对立样式，加入为默认显示，它将调用隐藏

$(function(){
    var btn=$("<button>切换颜色</button>");
   $("body").prepend(btn);
    $(btn).click(function(){
     //样式转换
     $("div").toggleClass("gai");
    })
   })