jQuery的小例子 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册实现</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
<form action="">
    <p>
        <label for="username">用户名</label>
        <input type="text" id="username" name="username">
        <span class="error"></span>
    </p>
    <p>
        <label for="pwd">密码</label>
        <input type="password" id="pwd" name="pwd">
        <span class="error"></span>
    </p>
    <p>
        <input type="submit" id="b1" value="登陆">
    </p>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function () {
        var flag = true;
        $(".error").text("");

        var $username = $("#username");
        var $pwd = $("#pwd");
        if ($username.val().length === 0){
            $username.next().text("用户名不能为空！");
            flag = false;
        }
        if ($pwd.val().length === 0){
            $pwd.next().text("密码不能为空！");
            flag = false;
        }
        return flag;
    })
</script>
</body>
</html>
登陆注册小实例

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单作业</title>
  <style>
    .hide {
      display: none;
    }

    .title {
      height: 40px;
      width: 100px;
      background-color: #336699;
      color: white;
      border-bottom: 1px solid black;
      line-height: 40px;
      text-align: center;
    }
  </style>
</head>
<body>


<div class="menu">
  <div class="item">
    <div class="title">菜单一</div>
    <div class="body hide">
      <div>内容一</div>
      <div>内容一</div>
      <div>内容一</div>
      <div>内容一</div>
    </div>
  </div>
  <div class="item">
    <div class="title">菜单二</div>
    <div class="body hide">
      <div>内容二</div>
      <div>内容二</div>
      <div>内容二</div>
      <div>内容二</div>
    </div>
  </div>
  <div class="item">
    <div class="title">菜单三</div>
    <div class="body hide">
      <div>内容三</div>
      <div>内容三</div>
      <div>内容三</div>
      <div>内容三</div>
    </div>
  </div>
</div>

<script src="jquery-3.3.1.min.js"></script>
<script>
    var $titleEles = $(".title");
    $titleEles.click(function () {
//      console.log(this);
//      $(".body").addClass("hide");
//      $(this).next().removeClass("hide");


      $(this).next().removeClass("hide").parent().siblings().find(".body").addClass("hide");
    });

//  $titleEles.on("click", function () {
//
//  })
</script>
</body>
</html>
隐藏标签实例

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>位置相关示例之返回顶部</title>
  <style>
    .c1 {
      width: 100px;
      height: 200px;
      background-color: red;
    }

    .c2 {
      height: 50px;
      width: 50px;

      position: fixed;
      bottom: 15px;
      right: 15px;
      background-color: #2b669a;
    }
    .hide {
      display: none;
    }
    .c3 {
      height: 100px;
    }
  </style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.3.1.min.js"></script>
<script>


  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>
</body>
</html>
返回顶部

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选取消练习</title>
</head>
<body>

<button id="b1">全选</button>
<button id="b2">取消</button>
<button id="b3">反选</button>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>Egon</td>
        <td>喊麦</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Alex</td>
        <td>吹牛逼</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Yuan</td>
        <td>不洗头</td>
    </tr>
    </tbody>
</table>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 全选
    $("#b1").click(function () {
        // 让所有的checkbox选中
        $("table :checkbox").prop("checked", true)
    });
    // 取消
    $("#b2").click(function () {
        // 让所有的checkbox取消选中
        $("table :checkbox").prop("checked", false)
    });
    // 反选
    $("#b3").click(function () {
//        // 找到没有选中的让它们选中
//        $("table input:not(:checked)").prop("checked", true);
//        // 找到所有选中的让它们取消选中
//        $("table input:checked").prop("checked", false);

        // 方法1：循环
        var $checkboxs = $("table input:checkbox");
//        for (let i=0;i<$checkboxs.length;i++){
//            var $currentCheckbox = $($checkboxs[i]);
//            if ($currentCheckbox.prop("checked")){
//                // 如果之前是选中的
//                $currentCheckbox.prop("checked", false);
//            }else {
//                // 之前没有选中
//                $currentCheckbox.prop("checked", true);
//            }
//        }

        for (let i=0;i<$checkboxs.length;i++){
            var $currentCheckbox = $($checkboxs[i]);
            var flag = $currentCheckbox.prop("checked");
            $currentCheckbox.prop("checked", !flag)
        }

    });

</script>
</body>
</html>
全选，取消，反选

 

posted @ 2018-06-05 16:07  鲁之敬  阅读(171)  评论(0)  编辑  收藏  举报