1.自定义登录校验

　　用户输入用户名和密码

　　输入的用户名和密码不能为空

　　如果用户输入的用户名或者密码为空,你就提示它用户名不能为空或者密码不能为空.

知识点:文本操作相关

<!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>

    .error {

      color: red;

    }

  </style>

</head>

<body>

<form action="">

  <div>

    <label for="input-name">用户名</label>

    <input type="text" id="input-name" name="name">

    <span class="error"></span>

  </div>

  <div>

    <label for="input-password">密码</label>

    <input type="password" id="input-password" name="password">

    <span class="error"></span>

  </div>

  <div>

    <input type="button" id="btn" value="提交">

  </div>

</form>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

  $("#btn").click(function () {

    var username = $("#input-name").val();

    var password = $("#input-password").val();

    if (username.length === 0) {

      $("#input-name").siblings(".error").text("用户名不能为空");

    }

    if (password.length === 0) {

      $("#input-password").siblings(".error").text("密码不能为空");

    }

  })

</script>

</body>

</html>

2.全选反选取消

知识点:属性操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button id="all">全选</button>

<button id="reverse">反选</button>

<button id="cancel">取消</button>

<table border="1">

   <thead>

    <tr>

        <th>#</th>

        <th>姓名</th>

        <th>爱好</th>

    </tr>

   </thead>

    <tbody>

    <tr>

        <td><input type="checkbox"></td>

        <td>金老板</td>

        <td>开车</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>景女神</td>

        <td>茶道</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>苑昊（苑局）</td>

        <td>不洗头、不翻车、不要脸</td>

    </tr>

    </tbody>

</table>

<script src="jquery.js"></script>

<script>

    // 点击全选按钮 选中所有的checkbox

    // DOM绑定事件方法

    // $("#all")[0].onclick = function(){}

    // jQuery绑定事件方法

    $("#all").click(function () {

        $(":checkbox").prop('checked', true);

    });

    // 取消

    $("#cancel").on("click", function () {

         $(":checkbox").prop('checked', false);

    });

    // 反选

    $("#reverse").click(function () {

        // 1. 找到所有选中的checkbox取消选中

        // $("input:checked").prop('checked', false);

        // // 2. 找到没有选中的checkbox选中

        // $("input:not(:checked)").prop('checked', true);

        //你会发现上面这么写，不行，为什么呢？因为你做了第一步操作之后，再做第二步操作的时候，所有标签就已经全部取消选中了，所以第二步就把所有标签选中了

        // 方法1. for循环所有的checkbox,挨个判断原来选中就取消选中，原来没选中就选中

        var $checkbox = $(":checkbox");

        for (var i=0;i<$checkbox.length;i++){

            // 获取原来的选中与否的状态

            var status = $($checkbox[i]).prop('checked');

            $($checkbox[i]).prop('checked', !status);

        }

        // 方法2. 先用变量把标签原来的状态保存下来

    //     var $unchecked =  $("input:not(:checked)");

    //     var $checked = $("input:checked");

    //

    //     $unchecked.prop('checked', true);

    //     $checked.prop('checked', false);

    })

</script>

</body>

</html>

3.左侧菜单示例(点击一个,其余的关闭)

<!DOCTYPE html>

<html lang="en">

<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>

    .left {

      position: fixed;

      left: 0;

      top: 0;

      width: 20%;

      height: 100%;

      background-color: rgb(47, 53, 61);

    }

    .right {

      width: 80%;

      height: 100%;

    }

    .menu {

      color: white;

    }

    .title {

      text-align: center;

      padding: 10px 15px;

      border-bottom: 1px solid #23282e;

    }

    .items {

      background-color: #181c20;

    }

    .item {

      padding: 5px 10px;

      border-bottom: 1px solid #23282e;

    }

    .hide {

      display: none;

    }

  </style>

</head>

<body>

<div class="left">

  <div class="menu">

    <div class="title">菜单一</div>

    <div class="items">

      <div class="item">111</div>

      <div class="item">222</div>

      <div class="item">333</div>

    </div>

    <div class="title">菜单二</div>

    <div class="items hide">

      <div class="item">111</div>

      <div class="item">222</div>

      <div class="item">333</div>

    </div>

    <div class="title">菜单三</div>

    <div class="items hide">

      <div class="item">111</div>

      <div class="item">222</div>

      <div class="item">333</div>

    </div>

  </div>

</div>

<div class="right"></div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

  $(".title").click(function (){  // jQuery绑定事件

    // 隐藏所有class里有.items的标签

    $(".items").addClass("hide");  //批量操作

    $(this).next().removeClass("hide");

  });

</script>

4.模态对话框,点击按钮弹出对话框,对话框里面有个按钮,一点击就关闭对话框(注册或者登陆)

　　第一步:手写弹出框代码

jquery练习题的更多相关文章

  1. （day48作业）jQuery+Bootstrap练习题

    目录 一.图书管理系统页面搭建 二.jQuery练习题 一.图书管理系统页面搭建 <!DOCTYPE html> <html lang="en"> < ...

  2. 8.27 jQuery

    2018-8-27 19:38:06 jQuery 参考http://www.cnblogs.com/liwenzhou/p/8178806.html jQuery练习题和 .js文件在Github  ...

  3. JQuery课堂学习笔记

    第1课 JQuery技术简介 <%@ page language="java" import="java.util.*" pageEncoding=&qu ...

  4. 09：jQuery（02）

    内容概要 jQuery操作标签 jQuery绑定事件 jQuery补充知识点 jQuery动画效果(了解) 零散补充 内容详细 jQuery练习题 $('#i1') r.fn.init [div#i1 ...

  5. Python巨蟒全栈开发目录

    巨蟒python全栈开发-第一阶段 基础数据类型&基础 1.什么是计算机&&python的简介(待补充) 2.while循环&&格式化输出&&运 ...

  6. javaScript基础练习题-下拉框制作(JQuery)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  8. jQuery入门学习贴

    先引一下阮一峰大牛翻译的书<软件随想录>中的一句话: “ joel认为,软件开发,最缺的是天才.而我认为,最缺的是全才.什么“全”:全面.全局.全心全意.全力以赴. ” 最近再学习jQue ...

  9. 59、jQuery初识

    jQuery是由原生js写的所以说所有jQuery制作出来的效果都可以使用js做出来,jQuery出现的目的是为了优化代码,提高码代码的效率它将很多功能封装. 一.jQuery的认识 1.何为jque ...

随机推荐

  1. 使用Apache Jmeter进行并发压力测试

    http://blog.jassassin.com/2014/04/17/tools/jmeter/

  2. 修改System.Web.Mvc.WebViewPage创建自己的pageBase

    <system.web.webPages.razor> <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, ...

  3. makefile之命令包&多行变量

    define&endef 1. 命令包(canned recipes)&多行变量(muti-line variables) The define directive is follow ...

  4. linux时间同步-NTP服务

    作者:曹世军链接:https://www.zhihu.com/question/30252609/answer/108840850来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  5. emblog后台拿shell

    emlog版本:5.3.1 先本地弄好shell 新建一个文件夹,里面放shell,shell名称和文件名要一致.压缩为zip 然后在安装插件处上传. 成功后的路径content/plugins/te ...

  6. CSS border-style 属性查询

    border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式.只有当这个值不是 none 时边框才可能出现. none solid dotted dashed double ...

  7. ubuntu下SVN使用

    一. ubuntu下SVN(命令行客户端)安装:sudo apt-get install subversion 二. 常用命令2. 文件检出:svn checkout 服务器目录 [本地目录] [-- ...

  8. 页面表单里的图片上传ENCTYPE="multipart/form-data"

    ENCTYPE="multipart/form-data"用于表单里有图片上传. <form action="<%=basePath %>asyUplo ...

  9. C0304 备份最后一天所有修改的文件

    #! /bin/bash backupfile=backup-$(date +%m-%d-%Y) archive=${1:-$backupfile} # 上边内容, 参数替换 ${} echo $ar ...

  10. 第二百二十五节，jQuery EasyUI，PropertyGird(属性表格)组件

    jQuery EasyUI,PropertyGird(属性表格)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 PropertyGird(属性表格)组件的 ...