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. .net4 dynamic parse xml

    using System.Collections.Generic; using System.Linq; using System.Xml.Linq; using System.Dynamic; na ...

  2. ubuntu彻底干净卸载MySQL、Apache2、Php的方法（各版本通用

    一.卸载删除 mysql   1 sudo apt-get autoremove --purge mysql-server-5.0 2 sudo apt-get remove mysql-server ...

  3. EularProject 32: 数字1-9排列构成乘法等式

    Pandigital products Problem 32 We shall say that an n-digit number is pandigital if it makes use of ...

  4. Java遍历包中所有类

    PackageUtil 类 import java.io.File; import java.net.URL; import java.net.URLClassLoader; import java. ...

  5. javascript构造函数的理解

    构造函数是在javascript文档的创建对象当中提到的,主要目的是为了解决代码复用,能够大量产生同类型而多作用的方法 在javascript中给出了几种创建对象的模式: 1.对象字面量 例: var ...

  6. DMA—直接存储区访问

    本章参考资料:< STM32F4xx 中文参考手册> DMA 控制器章节.学习本章时,配合< STM32F4xx 中文参考手册> DMA 控制器章节一起阅读,效果会更佳,特别是 ...

  7. LeetCode 145 Binary Tree Postorder Traversal（二叉树的兴许遍历）+（二叉树、迭代）

    翻译 给定一个二叉树.返回其兴许遍历的节点的值. 比如: 给定二叉树为 {1. #, 2, 3} 1 \ 2 / 3 返回 [3, 2, 1] 备注:用递归是微不足道的,你能够用迭代来完毕它吗? 原文 ...

  8. 使用command对象添加删除查询记录

    private void button1_Click(object sender, EventArgs e) { //实例化数据库连接对象 SqlConnection sqlcon = new Sql ...

  9. 延迟队列DelayQueue

    应用场景:有一批广告需要不定时上下架,有可能上下架的时间间隔很长,就没必要用定时器轮询,用延迟队列进行任务执行. public class Test2 { public static void mai ...

  10. vhost in nodejs

    关于vhost 个人理解为vhost是一种可以在一个ip下同时部署多个不同域名站点的的概念. 其好处就是对一些小型的网站不必每个网站都占用一个ip,或者说一个服务,举个例子,vhost的概念就相当于打 ...