jquery练习题
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练习题的更多相关文章
- （day48作业）jQuery+Bootstrap练习题
目录 一.图书管理系统页面搭建 二.jQuery练习题 一.图书管理系统页面搭建 <!DOCTYPE html> <html lang="en"> < ...
- 8.27 jQuery
2018-8-27 19:38:06 jQuery 参考http://www.cnblogs.com/liwenzhou/p/8178806.html jQuery练习题和 .js文件在Github ...
- JQuery课堂学习笔记
第1课 JQuery技术简介 <%@ page language="java" import="java.util.*" pageEncoding=&qu ...
- 09：jQuery（02）
内容概要 jQuery操作标签 jQuery绑定事件 jQuery补充知识点 jQuery动画效果(了解) 零散补充 内容详细 jQuery练习题 $('#i1') r.fn.init [div#i1 ...
- Python巨蟒全栈开发目录
巨蟒python全栈开发-第一阶段 基础数据类型&基础 1.什么是计算机&&python的简介(待补充) 2.while循环&&格式化输出&&运 ...
- javaScript基础练习题-下拉框制作(JQuery)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- jQuery入门学习贴
先引一下阮一峰大牛翻译的书<软件随想录>中的一句话: “ joel认为,软件开发,最缺的是天才.而我认为,最缺的是全才.什么“全”:全面.全局.全心全意.全力以赴. ” 最近再学习jQue ...
- 59、jQuery初识
jQuery是由原生js写的所以说所有jQuery制作出来的效果都可以使用js做出来,jQuery出现的目的是为了优化代码,提高码代码的效率它将很多功能封装. 一.jQuery的认识 1.何为jque ...
随机推荐
- MongoDB GridFS最佳应用概述
<MongoDB GridFS最佳应用概述> 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs GridFS是MongoDB数据库之上的一个简单 ...
- [获取行数]php读取大文件提供性能的方法，PHP的stream_get_line函数读取大文件获取文件的行数的方...
背景: 下面是获取文件的行数的方法: 一个文件如果知道有几行的话,就可以控制获取一定的行数的数据,然后放入数据库.这样不管的读取大文件的性能,还是写入数据库的性能,都能得到很大的提高了. 下面是获取文 ...
- 【转载】使用Exp和Expdp导出数据的性能对比与优化
转自:http://blog.itpub.net/117319/viewspace-1410931/ 序:这方面的文章虽然很多人写过,但是结合实际进行详细的对比分析的不多,这里,结合所在公司的行业,进 ...
- Java编程介绍
原文地址:http://happyshome.cn/blog/java/introduction.html 本文介绍的编程基础知识很Java适合刚開始学习的人. 要学习编程,你须要了解编程语言的语法和 ...
- 多线程-wait/notify/notifyAll
引言 在Java中,可以通过配合调用Object对象的wait,notify和notifyAll来实现线程间的通信. 在线程中调用wait方法,将阻塞带带其他线程的通知(其他线程调用notify或no ...
- 李洪强详细介绍SDWebImage
SDWebImage是一个开源的第三方库,它提供了UIImageView的一个分类,以支持从远程服务器下载并缓存图片的功能.它具有以下功能: 提供UIImageView的一个分类,以支持网络图片的加载 ...
- tensolrflow之基础变量
#优化一个乘法算子 #coding:utf- __author__ = 'similarface' import tensorflow as tf sess=tf.Session() #创建一个常量张 ...
- [转]C++ error C2011: “XXX”:“class”类型重定义
http://blog.csdn.net/m_leonwang/article/details/27678219 尝试修复这个程序的错误: 点击下载源代码文件夹
- UITextField/UITextView限制字数
一,UITextFild限制字数(三步) 1,给textfild添加响应事件,类型为:UIControlEventEditingChanged [self.nickNameFild addTarget ...
- SAML2.0 协议初识（三）——IDP
IDP,即提供身份认证服务的一端,通常,当 IDP 接收到 SP 发送的 SAML 认证请求后,解析 SAMLRequest 参数,包括 acs 地址.SP EntityId.绑定方式.是否加密等信息 ...