选择器-新浪下拉菜单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="/新中地js/Jquery/jquery.min.js"></script>
  9.     <style>
  10.         .nav ul{
  11.             width: 200px;
  12.             height: 200px;
  13.             background-color: red;
  14.             display: none;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <ul class="nav">
  20.         <li>
  21.             <a href="">hello</a>
  22.             <ul>
  23.                 <li>my</li>
  24.                 <li>your</li>
  25.                 <li>her</li>
  26.             </ul>
  27.         </li>
  28.         <li>
  29.             <a href="">hello</a>
  30.             <ul>
  31.                 <li>my</li>
  32.                 <li>your</li>
  33.                 <li>her</li>
  34.             </ul>
  35.         </li>
  36.     </ul>
  38.     <script>
  39.         $(function(){
  40.             $('.nav>li').mouseover(function(){
  41.                 //1.鼠标经过
  42.                 //2.找到要添加事件的元素 nav下的li下所有的子标签（a）
  43.                 $(this).children('ul').show()//--this代表当前所代表的li元素
  44.             })
  46.                 //3.鼠标离开
  47.             $('.nav>li').mouseout(function(){
  48.                 $(this).children('ul').hide()//--光标移到哪this就代表那个li（dom）
  49.             })
  50.         })
  51.     </script>
  52. </body>
  53. </html>

运行结果

image.png

淘宝精品服饰

  1. <!DOCTYPE html>
  2. <html>
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  8.     <style type="text/css">
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             font-size: 12px;
  13.         }
  15.         ul {
  16.             list-style: none;
  17.         }
  19.         a {
  20.             text-decoration: none;
  21.         }
  23.         .wrapper {
  24.             width: 250px;
  25.             height: 248px;
  26.             margin: 100px auto 0;
  27.             border: 1px solid pink;
  28.             border-right: 0;
  29.             overflow: hidden;
  30.         }
  32.         #left,
  33.         #content {
  34.             float: left;
  35.         }
  37.         #left li {
  38.             background: url(images/lili.jpg) repeat-x;
  39.         }
  41.         #left li a {
  42.             display: block;
  43.             width: 48px;
  44.             height: 27px;
  45.             border-bottom: 1px solid pink;
  46.             line-height: 27px;
  47.             text-align: center;
  48.             color: black;
  49.         }
  51.         #left li a:hover {
  52.             background-image: url(images/abg.gif);
  53.         }
  55.         #content {
  56.             border-left: 1px solid pink;
  57.             border-right: 1px solid pink;
  58.         }
  59.     </style>
  60.     <script src="jquery.min.js"></script>
  61. </head>
  63. <body>
  64.     <div class="wrapper">
  65.         <ul id="left">
  66.             <li><a href="#">女靴</a></li>
  67.             <li><a href="#">雪地靴</a></li>
  68.             <li><a href="#">冬裙</a></li>
  69.             <li><a href="#">呢大衣</a></li>
  70.             <li><a href="#">毛衣</a></li>
  71.             <li><a href="#">棉服</a></li>
  72.             <li><a href="#">女裤</a></li>
  73.             <li><a href="#">羽绒服</a></li>
  74.             <li><a href="#">牛仔裤</a></li>
  75.         </ul>
  76.         <div id="content">
  77.             <div>
  78.                 <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
  79.             </div>
  80.             <div>
  81.                 <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
  82.             </div>
  83.             <div>
  84.                 <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
  85.             </div>
  86.             <div>
  87.                 <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
  88.             </div>
  89.             <div>
  90.                 <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
  91.             </div>
  92.             <div>
  93.                 <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
  94.             </div>
  95.             <div>
  96.                 <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
  97.             </div>
  98.             <div>
  99.                 <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
  100.             </div>
  101.             <div>
  102.                 <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
  103.             </div>
  104.         </div>
  105.     </div>
  107.     <script>
  108.         $(function(){
  109.             //1
  110.             $('#left li').mouseover(function(){
  111.                 var index = $(this).index()
  112.                 console.log(index);
  113.                 //2
  114.                 $('#content div').eq(index).show().siblings().hide()
  115.             })
  116.         })
  117.     </script>
  118. </body>
  120. </html>

运行结果

image.png

dom—qq表情选择

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>QQ表情选择</title>
  6.      <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  7.     <style type="text/css">
  8.     *{margin: 0;padding: 0;list-style: none;}
  10.     .emoji{margin:50px;}
  11.     ul{overflow: hidden;}
  12.     li{float: left;width: 48px;height: 48px;cursor: pointer;}
  13.     .emoji img{ cursor: pointer; }
  14.     </style>
  15.     <script>
  16.         //需求：点击qq表情，将其追加到发言框中
  17.          $(function (){
  18.               //给img标签添加点击事件
  19.               $('li img').click(function(){
  20.                   //将选中的图片追加到p后面
  21.                   $('.word').append($(this).clone()) //复制之后的元素添加到p后面
  22.               })
  23.          });
  24.     </script>
  26. </head>
  27. <body>
  28.     <div class="emoji">
  29.         <ul>
  30.             <li><img src="/新中地js/Jquery/QQ表情/01.gif" height="22" width="22" alt="" /></li>
  31.             <li><img src="/新中地js/Jquery/QQ表情/02.gif" height="22" width="22" alt="" /></li>
  32.             <li><img src="/新中地js/Jquery/QQ表情/03.gif" height="22" width="22" alt="" /></li>
  33.             <li><img src="/新中地js/Jquery/QQ表情/04.gif" height="22" width="22" alt="" /></li>
  34.             <li><img src="/新中地js/Jquery/QQ表情/05.gif" height="22" width="22" alt="" /></li>
  35.             <li><img src="/新中地js/Jquery/QQ表情/06.gif" height="22" width="22" alt="" /></li>
  36.             <li><img src="/新中地js/Jquery/QQ表情/07.gif" height="22" width="22" alt="" /></li>
  37.             <li><img src="/新中地js/Jquery/QQ表情/08.gif" height="22" width="22" alt="" /></li>
  38.             <li><img src="/新中地js/Jquery/QQ表情/09.gif" height="22" width="22" alt="" /></li>
  39.             <li><img src="/新中地js/Jquery/QQ表情/10.gif" height="22" width="22" alt="" /></li>
  40.             <li><img src="/新中地js/Jquery/QQ表情/11.gif" height="22" width="22" alt="" /></li>
  41.             <li><img src="/新中地js/Jquery/QQ表情/12.gif" height="22" width="22" alt="" /></li>
  42.         </ul>
  43.         <p class="word">
  44.             <strong>请发言：</strong>
  45.             <img src="/新中地js/Jquery/QQ表情/12.gif" height="22" width="22" alt="" />
  46.         </p>
  47.     </div>
  48. </body>
  49. </html>

运行结果

image.png

Todolist案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
  9.     <style>
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.       }
  14.       li {
  15.         list-style: none;
  16.       }
  17.       a {
  18.         text-decoration: none;
  19.       }
  21.       .todo {
  22.         width: 400px;
  23.         margin: 50px auto;
  24.       }
  25.       .todo .header {
  26.         height: 40px;
  27.         line-height: 40px;
  28.         padding: 0 20px;
  29.         color: #fff;
  30.         background: skyblue;
  31.       }
  32.       .todo .header input {
  33.         height: 30px;
  34.         padding-left: 10px;
  35.         color: #333;
  36.         border: none;
  37.         outline: none;
  38.       }
  39.       .todo .list {
  40.         min-height: 100px;
  41.         margin-top: 20px;
  42.         border: 1px solid #ccc;
  43.       }
  44.       .todo .list li {
  45.         margin: 10px 0;
  46.         padding: 5px 20px;
  47.         background-color: #eee;
  48.       }
  49.       .todo .list p {
  50.         display: inline-block;
  51.         width: 300px;
  52.       }
  53.       .todo .list a {
  54.         float: right;
  55.       }
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <div class="todo">
  60.       <div class="header">
  61.         添加待办: <input id="add" type="text" placeholder="按回车添加待办" />
  62.       </div>
  63.       <div class="list">
  64.         <ul>
  65.           <!-- 动态生成类似这样的标签 -->
  66.           <!-- <li><p>111</p><a href="#">删除</a></li>
  67.           <li>222 <a href="#">删除</a></li>
  68.           <li>333 <a href="#">删除</a></li> -->
  69.         </ul>
  70.       </div>
  71.     </div>
  72.     <script>
  73.       // 添加操作--给input绑定键盘松开事件
  74.          $('#add').keyup(function(e){
  75.            if(e.keyCode == 13){
  76.              //1--获取文本框内容
  77.              var value = $(this).val()
  78.              //判断，如果文本框没有内容，直接返回
  79.              if(value == ''){
  80.                return
  81.              }
  82.              //2--文本填充到p标签并封装成li标签
  83.              var li = `<li><p>${value}</p><a href="#">删除</a></li>`
  84.              //3--将生成的li内容插入ul前
  85.              $('ul').append(li)
  86.              //4--添加完成后清空文本框的内容
  87.              $(this).val('')
  88.            }
  89.          })
  91.       // 修改操作
  92.       // 通过on绑定DOM元素, 动态生成的DOM元素也可以绑定事件
  93.       $('ul').on('click','p',function(){
  94.         //1--获取li中的p标签
  95.         var p = $(this)
  96.         console.log(this);//this代表p标签
  97.         //2--获取p里的文本
  98.         var text = p.text()
  99.         //3--获取到的文本包裹在input中
  100.         var input = $(`<input type="text" style="width:100%" value="${text}"></input>`)
  101.         //4--重新添加到p里面
  102.         p.html(input)
  103.         //5--组织input冒泡
  104.         input.click(function(e){
  105.           e.stopPropagation()
  106.           return false //加上return false，进一步组织冒泡
  107.         })
  108.         //6==在input失去焦点的时候，将文本框中的值取出来赋给p
  109.         input.blur(function(){
  110.           p.html(this.value)//这里面的this代表文本框
  111.         })
  112.       })
  115.       // 删除操作
  116.       /* $('li a').click(function(){
  117.         //找到a标签的父类
  118.           $(this).parent().remove()
  119.       })
  120.        */
  122.        $('ul').on('click','a',function(){//一定要用静态的标签来调用
  123.         //找到a标签的父类
  124.           $(this).parent().remove()//this代表a标签
  125.       })
  126.     </script>
  127.   </body>
  128. </html>

运行结果

image.png