JQuery练习题 - 爱码网

1.抽奖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.3.1.js"></script>
    <style>
        ul{ width:328px;}
        li {
            width: 100px;
            height: 100px;
            border: 1px #000 solid;
            float: left;
            margin-left: 5px;
            list-style: none;
        }
        .active{ background:red;}
    </style>
  <script>
      var timerId=0
      var index=0
      $(function () {
          $('input').click(function () {
              var step=25+(Math.floor(Math.random())*20)
              timerId=setInterval(function () {
                  $('li').addClass('active').eq(index%9).siblings().removeClass('active')
                  index++;
                  step--;
                  if(step==0){
                      clearInterval(timerId)
                      var text=$('.active').text()
                      $('div').text("恭喜您"+text)
                  }
              },200)
          })
      })


  </script>
</head>
<body>
<input type="button" value="抽奖">

<ul>
    <li>1等奖</li>
    <li>2等奖</li>
    <li>3等奖</li>
    <li>4等奖</li>
    <li>5等奖</li>
    <li>6等奖</li>
    <li>7等奖</li>
    <li>8等奖</li>
    <li>9等奖</li>
    <div></div>
</ul>
</body>
</html>

JQuery练习题

所用知识点：
随机数：Math.random()
计时器：setInterval()
添加类：addClass()
移除类：removeClass()
取带有指定 index 值的元素：eq()
点击事件：click()
停止计时器：clearInterval()
获得匹配集合中每个元素的同胞：siblings()
2.下移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.3.1.js"></script>
     <script>
         $(function () {
             $ ('input[value=上移]').click(function () {
                 var  currentLi=$(this).parent();
                 if (currentLi.prev().length==0){
                     alert("到头了")
                     return
                 }
                 currentLi.insertBefore(currentLi.prev())
             })
             $('input[value=下移]').click(function () {
                 var last=$(this).parent()
                 if(last.next().length==0){
                     alert('到尾了')
                     return
                 }
                 last.insertAfter(last.next())
             })
         })
     </script>
</head>
<body>
<ul>
    <li>1.<input type="button" value="上移"><input type="button" value="下移"></li>
    <li>2.<input type="button" value="上移"><input type="button" value="下移"></li>
    <li>3.<input type="button" value="上移"><input type="button" value="下移"></li>
    <li>4.<input type="button" value="上移"><input type="button" value="下移"></li>
    <li>5.<input type="button" value="上移"><input type="button" value="下移"></li>
</ul>
</body>
</html>

JQuery练习题
知识点：
prev() 方法返回被选元素的前一个同级元素
parent() 获得当前匹配元素集合中每个元素的父元素
next() 获得匹配元素集合中每个元素紧邻的同胞元素
insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素
insertAfter（）方法在被选元素之后插入 HTML 标记或已有的元素
3.选择颜色填充方块和清除方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.3.1.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            float: left;
            margin: 10px;
        }
    </style>
</head>
<body>
<span>red</span>
<span>yellow</span>
<span>green</span>
<span>blue</span>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<button id="box">清除红色</button>
<script>
    var color=' '
    $('span').click(function () {
        color=$(this).html();
    })
    $('div').click(function () {
        $(this).css('backgroundColor',color)
    })
    $('#box').click(function () {
        $('div[style*=red]').css('backgroundColor','')
    })
</script>
</body>
</html>

JQuery练习题

4.左右移动菜单

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        #ul1, #ul2 {
            width: 200px;
            height: 200px;
            border: 1px #000 solid;
            float: left;
        }
        li{ cursor:pointer;}
        .active{ background:red;}

        input {
            float: left;
            margin-top: 100px;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $('li').click(function () {
                $(this).toggleClass('active')
            })

            $('input').eq(0).click(function () {

                $('#ul1').find('.active').appendTo($('#ul2')).removeClass('active')
            })
            $('input').eq(1).click(function () {
                $('#ul2').find('.active').appendTo($('#ul1')).removeClass('active')
            })

        })


    </script>
</head>

<body>
<ul id="ul1">
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
</ul>
<input type="button" value="→">
<input type="button" value="←">
<ul id="ul2">
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
    <li>dddd</li>
    <li>eeee</li>
</ul>
</body>
</html>

JQuery练习题