jquery自定义登录认证
登录验证是每个网站和系统必不可少的功能,而针对登录验证的方式有很多,现在将我做的登录验证的效果及代码思路写出来给大家参考。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<div>
用户名:<input type="text" id="username">
<span class="c1"></span>
</div>
<div>
密码:<input type="password" id="password">
<span class="c1"></span>
</div>
<button id="btn">提交</button>
<script src="jquery.js"></script>
<script>
$('#btn').click(function (){
var user = $('#username').val();
var pwd = $('#password').val();
if (user.length === 0){
$('#username').siblings('.c1').text('用户名不能为空');
}else{
$('#username').siblings('.c1').text();
}
if (pwd.length === 0){
$('#password').siblings('.c1').text('密码不能为空');
}else{
$('#username').siblings('.c1').text();
}
})
</script>
</body>
</html>
效果图展示
如果用户名为空点击提交时,会提示‘用户名不能为空’,密码为空,会提示‘密码不能为空’
如果用户名或者密码不为空,取消提示
jquery实现表格的全选反选和取消实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="choose_all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="2">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" >
</td>
<td>B哥</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>
$('#choose_all').click(function(){
$(':checkbox').prop('checked',true)
})
$('#cancel').click(function(){
$(':checkbox').prop('checked',false)
})
$('#reverse').click(function(){
var a = $(':checkbox');
for(var i = 0;i<a.length;i++){
var status=a.eq(i).prop('checked');
// if (status === true){
// a.eq(i).prop('checked',false);
// }else
// {
// a.eq(i).prop('checked',true);
// }
a.eq(i).prop('checked',!status)
}
})
</script>
</body>
</html>
效果图展示
当用户点击全选按钮时,全部选中,点击取消时,取消选中,点击反选时,给其赋相反的值实现反选
jquery实现表格的增删改
点击新增会弹出对话框同时把新增的内容添加到表格里面,点击编辑会 弹出对话框,同时改变后,覆盖原数据,点击开除会删除一行数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,0.3);
z-index:50;
}
.c2{
height: 200px;
width: 300px;
background-color: whitesmoke;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
z-index:100;
}
.hide{
display: none;
}
</style>
</head>
<body>
<button id="add1">新增</button>
<table border="2">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>mike</td>
<td>sing</td>
<td>
<button class="fire">开除</button>
<button class="edit">编辑</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>amy</td>
<td>玛卡巴卡</td>
<td>
<button class="fire">开除</button>
<button class="edit">编辑</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>dog brother</td>
<td>girl</td>
<td>
<button class="fire">开除</button>
<button class="edit">编辑</button>
</td>
</tr>
</tbody>
</table>
<div class="cc hide">
<div class="c1"></div>
<div class="c2">
<div>
姓名:<input type="text" id="username">
</div>
<div>
爱好:<input type="text" id="hobby">
</div>
<div>
<button id="sub">提交</button>
<button id="cancel">取消</button>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script>
var flag; //标识一下是新增动作
var editBtn;
//新增
//1 点击新增按钮弹出模态对话框
$('#add1').click(function (){
$('.cc').removeClass('hide');
$('#username').val('');
$('#hobby').val('');
flag=1;
});
//用户输入内容,点击确认按钮 生成一条记录添加到table标签后面
$('#sub').click(function (){
if(flag===1){
//2.1获取用户输入的内容(取变量名尽量不用name)
var username = $('#username').val();
var hobby = $('#hobby').val();
//2.2创建tr标签 然后将用户输入的数据放入到tr对应的td去
var newTr = '<tr><td><input type="checkbox"></td><td>'+username+'</td><td>'+hobby+'</td><td> <button class="fire">开除</button> <button class="edit">编辑</button></td></tr>'
//2.3将创建的标签添加到table标签后
$('tbody').append(newTr);
//2.4关闭对话框
}
else{//表示编辑的保存动作
//1.1获取该行的数据
var newUsername = $('#username').val();
var newHobby = $('#hobby').val();
var hobby = editBtn.parent().prev().text(newHobby);
var username = editBtn.parent().prev().prev().text(newUsername);
//1.2赋值给模态对话框中的input标签
$('#username').val(username);
$('#hobby').val(hobby);
}
$('.cc').addClass('hide');
})
$('#cancel').click(function (){
$('.cc').addClass('hide');
})
//开除
$('tbody').on('click','.fire',function (){
$(this).parent().parent().remove();
})
//编辑
$('tbody').on('click','.edit',function (){
//弹出模态对话框,并且赋值给输入框
flag=2
editBtn = $(this)
$('.cc').removeClass('hide');
var hobby = $(this).parent().prev().text();
var username = $(this).parent().prev().prev().text();
//1.2赋值给模态对话框中的input标签
$('#username').val(username);
$('#hobby').val(hobby);
})
</script>
</body>
</html>
效果图展示
使用事件委托,保证添加的数据有触发单击事件