JQ练习题（同js版本一样的题哦）

最新推荐文章于 2022-11-11 19:58:14 发布

小小笛。

最新推荐文章于 2022-11-11 19:58:14 发布

阅读量198

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_43476381/article/details/126411922

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1，每次点击出现一行背景是红色的黑字“哈哈哈”

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="jquery.min.js"></script>
</head>
<body id="body">
<button>点击</button>
</body>
</html>
<script>
  $("button").click(function () {
            var div = "<div style='background-color: red'>哈哈</div>";
            $("#body").append(div);

          }
  )
</script>

二、输入用户名密码，鼠标移出后校检长度，不符合规则的展示红色提示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<div style="display: none;color: red">长度不够6位</div>
用户名：<input type="text"/>
密码：<input type="password">
</body>
</html>
<script>
    $("input:first").blur(function (){
        if ($("input:first").val().length<6){
        $("div").css({"display":"block"});
        }else {
            $("div").css({"display":"none"});
        }
    });
</script>

3、点击图片，图片之间切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<img src="../images/123.webp"/>
</body>
</html>
<script>
        var arr = ["../images/123.webp", "../images/1234.jpeg", "../images/3457.webp", "../images/女孩.jpeg", "../images/猫.jpg", "../images/西瓜，手.webp"];
        var i = 0;
        $("img").click(function () {
            $("img").attr({"src": arr[++i]});
            if (i == 4) {
                i = 0;
            }

        })
</script>

4、写一个table表格，有一个点击事件，全选全不选
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="jquery.min.js"></script>
</head>
<body>
<table id="t" border="2px,solid,black">
  <th>
  <td>
    <button>添加</button>
    <button>删除</button>
  </td>
  </th>
  <tr>
    <td id="qx" ></td>
    <td>编号</td>
    <td>姓名</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>
      <input class="u" type="checkbox">
    </td>
    <td>1</td>
    <td>张三</td>
    <td>22</td>
  </tr>
  <tr>
    <td>
      <input class="u" type="checkbox">
    </td>
    <td>2</td>
    <td>李四</td>
    <td>25</td>
  </tr>
  <tr>
    <td>
      <input class="u" type="checkbox">
    </td>
    <td>3</td>
    <td>王五</td>
    <td>27</td>
  </tr>
  <tr>
    <td>
      <input class="u" type="checkbox">
    </td>
    <td>4</td>
    <td>赵六</td>
    <td>29</td>
  </tr>
</table>
<!--<div>fasda</div>-->
</body>
</html>
<script>
  $("#qx").click(function (){
    //.css只有静态style静态生效
    //$(".u").css({"checked":"true"}); 不生效
    //$("div").css({"background-color":"red"}); 生效
    var $u=$(".u");
    if ($u.prop("checked")){
      $u.prop("checked",false);
    }else {
      $u.prop("checked",true)
    }
    //for (let i = 0; i <$u.length; i++) {
      // if ($u[i].checked) {
      //   $u[i].checked=false;
      // }else{
      //   $u[i].checked=true;
      // }
   // }

  })
</script>

5，框框联动

在这里插入图片描述

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

</head>
<body>
<!--框框联动-->
<select id="one">
  <option >--请选择--</option>
  <option value="0">北京</option>
  <option value="1">河北</option>
  <option value="2">上海</option>
</select>
<select id="two">
  <option>--请选择--</option>
</select>
</body>
</html>
<script>
  var ss=[["海淀","朝阳","昌平"],["石家庄","唐山","邯郸"],["浦东","浦西","浦南"]];
 var $o= $("#one");
  $o.change(function (){
   // $("#two").empty();
    //$("option:gt(0)");
    //
    for (let i = 0; i < ss.length; i++) {
      var option="<option>"+ss[$o.val()][i]+"</option>"
      $("#two").append(option);
    }
  })
</script>

7，空白页面，每隔几S自动弹出来图片，然后自动弹走，在弹出来，在弹走~~~~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="jquery.min.js"></script>
</head>
<body>
<!--空白页面，每隔几S自动弹出来图片，然后自动弹走，在弹出来，在弹走-->
<img style="display: none" src="../images/123.webp">
</body>
</html>
<script>
   // show必须用display:none修饰,否则不生效。隐藏生效
  $(document).ready(function (){
    //$("img").show(5000);-- 出来
    // 出来and消失；
    $("img").show(5000,function (){
      $("img").hide(2000)
    });

  });

</script>