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 ...
随机推荐
- XML - 十分钟了解XML结构以及DOM和SAX解析方式
引言 NOKIA 有句著名的广告语:"科技以人为本".不论什么技术都是为了满足人的生产生活须要而产生的.详细到小小的一个手机.里面蕴含的技术也是浩如烟海.是几千年来人类科技的结晶, ...
- 在linux下运行jmeter
之前在用JMeter做性能测试时基本都用自己的笔记本电脑. 考虑到网络传输和占用系统资源情况时进行了以下分析: 1 在笔记本上,开始-cmd "ping 服务器",得到传输时间.在 ...
- atitit.图片相似度与图片查找的设计 获取图片指纹
atitit.图片相似度与图片查找的设计. 1. 两张图片相似算法 1 2. DCT(离散余弦变换(DiscreteCosineTransform))编辑 2 3. 编辑距离编辑 3 4. Java ...
- redis源码学习_字典
redis中字典有以下要点: (1)它就是一个键值对,对于hash冲突的处理采用了头插法的链式存储来解决. (2)对rehash,扩展就是取第一个大于等于used * 2的2 ^ n的数作为新的has ...
- 基于libmemcached，php扩展memcached的安装
基于libmemcached,php扩展memcached的安装 张映 发表于 -- 分类目录: php 标签:libmemcached, memcached, php, 安装 一,为什么要装memc ...
- PLINK pca
#coding:utf-8 __author__ = 'similarface' import os import pandas as pd import matplotlib.pyplot as p ...
- 当一个线程进入一个对象的synchronized方法A之后,其他线程是否可进入此对象的synchronized方法B?
给出答案: 是不能的,其他线程只能访问该对象的非同步方法,同步方法则不能进入; 因为非静态方法上的synchronized修饰符要求执行方法时要获得对象的锁,如果已经进入A方法,说明对象锁已经被取
- 浅谈HTTPS协议和SSL、TLS之间的区别与关系
HTTP可能是我们见到过最多的一个字符串了,应该没有之一,而对于HTTPS到来和趋势,我们又开始看到SSL/TLS,所以对于一般不只做技术的人来说这或许还是一个疑问,那么子凡就趁最近在折腾这方面来给大 ...
- 跟着百度学PHP[14]-PDO之Mysql的事务处理1
事务处理:在实际案例当中干一件事的mysql语句(好比转账,小一同学转账100,小二同学收账,在mysql当中小一就要减去转账的钱,小二就要增加100快)倘若该语句执行过程中有任何一条的sql语句出错 ...
- The Definitive Guide To Django 2 学习笔记(二） 第二个View 动态内容
“Hello World”只是简单的展现了Django 基本的工作机制,但它不是动态的网页.第二个View我们将创建一个动态的网页,该页面上将展现当前的时间和日期. 该View需要做两件事,第一,计算 ...