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. 任务调度Cron表达式及Quartz代码详解

    在线Cron表达式生成器 http://cron.qqe2.com/ cron表达式详解 http://www.cnblogs.com/linjiqin/archive/2013/07/08/3178 ...

  3. MYSQL手工注入某日本网站

    作者:ice   团队:www.anying.org 转载必须注明. E-mail:1c30day@gmail.com 经过一天的辛苦劳动下班了,实在无聊,QQ上的基友基本都挂机睡觉了.找点乐子打发时 ...

  4. Tokyo Tyrant（TTServer）系列（六）－数据丢失谁的错

    ,false,1,100);$mem->addServer ("127.9.9.1",1978,false,1,100);$start=microtime(true);for ...

  5. Garbage First(G1)垃圾收集器

    1. 概述 G1(Garbage First)垃圾收集器是当今垃圾回收技术最前沿的成果之一.早在JDK7就已加入JVM的收集器大家庭中,成为HotSpot重点发展的垃圾回收技术.同优秀的CMS垃圾回收 ...

  6. mybatis-config.xml文件详解

    1. 属性列表 Mybatis的配置文件中包含了影响mybatis行为的设置(settings)和属性(properties)信息.文档的顶层结构如下: ·configuration 根配置 ·pro ...

  7. 浅谈 Objective-C 下对象的初始化

    转自:http://www.oschina.net/question/54100_32468 众所周知,Objective-C是一门面向对象的语言,一般情况下,我们在Objective-C中定义一个类 ...

  8. Android CoordinatorLayout 入门介绍

    Android CoordinatorLayout 入门介绍 CoordinatorLayout View 知道如何表现 在 2015 年的 I/O 开发者大会上,Google 介绍了一个新的 And ...

  9. C++ STL标准模板库（queue）

    //queue的使用 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<queue> using name ...

  10. Kmeans原理与实现

    原理 http://www.cnblogs.com/jerrylead/archive/2011/04/06/2006910.html 实现 http://www.cnblogs.com/zjutzz ...