前端jQuery炫酷效果
案例一：聊天窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.talk_con{
width:600px;
height:500px;
border:1px solid #666;
margin:50px auto 0;
background:#f9f9f9;
}
.talk_show{
width:580px;
height:420px;
border:1px solid #666;
background:#fff;
margin:10px auto 0;
overflow:auto;
}
.talk_input{
width:580px;
margin:10px auto 0;
}
.whotalk{
width:80px;
height:30px;
float:left;
outline:none;
}
.talk_word{
width:420px;
height:26px;
padding:0px;
float:left;
margin-left:10px;
outline:none;
text-indent:10px;
}
.talk_sub{
width:56px;
height:30px;
float:left;
margin-left:10px;
}
.atalk{
margin:10px;
}
.atalk span{
display:inline-block;
background:#0181cc;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
.btalk{
margin:10px;
text-align:right;
}
.btalk span{
display:inline-block;
background:#ef8201;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// 写出对应功能代码
$(function(){
// 发送按钮单击：1. 获取用户输入的数据 -- value属性值访问 2、看下拉菜单的选项 如果是a -- 获取下拉菜单的vlaue == 0，把用户的数据按照a的模板展示；如果是b --获取下拉菜单的vlaue == 1，把数据按照b的模板展示 -- if
$('#talksub').click(function(){
var vals = $('#talkwords').val()
// 如果是空报错提示
if(vals =='')
{
alert('请输入内容')
return
}
// alert(vals)
// 获取下拉菜单的value
var str = ''
var whoVal = $('#who').prop('value')
if(whoVal == 0)
{
// A
str = '<div class="atalk"><span>A说：'+vals+'</span></div>'
}
else
{
str = '<div class="btalk"><span>B说：'+vals+'</span></div>'
}
// 放内容 -- 设置words 的内容是 原来的内容$('#words').html() + str
$('#words').html( $('#words').html() + str )
// 设置vlaue属性为空
$('#talkwords').val('')
})
})
</script>
</head>
<body>
<div class="talk_con">
<div class="talk_show" id="words">
<div class="atalk"><span>A说：吃饭了吗？</span></div>
<div class="btalk"><span>B说：还没呢，你呢？</span></div>
</div>
<div class="talk_input">
<select class="whotalk" id="who">
<option value="0">A说：</option>
<option value="1">B说：</option>
</select>
<input type="text" class="talk_word" id="talkwords">
<input type="button" value="发送" class="talk_sub" id="talksub">
</div>
</div>
</body>
</html>
案例二：to do list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// 1、新增li节点 2、删除节点 3、上下箭头移动节点
// 1：增加按钮单击：获取用户输入的数据，数据放到li节点里面，追加li节点到页面
$('#btn1').click(function(){
var vals = $('#txt1').val()
if(vals == '')
{
alert('请输入内容')
return
}
var $li = $('<li><span>'+vals+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
$('#list').append( $li );
$('#txt1').val('')
})
// $('a').click(function(){
// alert(1)
// })
// 父
$('#list').delegate('a', 'click', function(){
// alert(2)
// 如果删除的a -- class == 'del'，执行节点remove;如果向上的a，执行向上移动一个位置
var classVal = $(this).prop('class')
// alert(classVal)
if(classVal == 'del')
{
// 删除这个a的父级
$(this).parent().remove()
}
else if(classVal == 'up')
{
// 如果是第一个提示
if($(this).parent().index() == 0)
{
alert('已经是第一个了')
return
}
// 向上移动：例如：单击js的up， 选中js这个li， 移动到 cssli 的前面
$(this).parent().insertBefore( $(this).parent().prev() )
// $(this).parent() -- js li
// $(this).parent().prev() -- js这个li的前一个li css
}
else if(classVal == 'down')
{
// 如果是最后一个提示 index == 长度(ul的子级)-1
if($(this).parent().index() == $('#list').children().length - 1 )
{
alert('已经是最后一个了')
return
}
// 向下移动：例如，单击html的down，选中html这个li， 移动到 css li的后面
$(this).parent().insertAfter( $(this).parent().next() )
}
})
})
</script>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt">
<input type="button" name="" value="增加" id="btn1" class="inputbtn">
<ul id="list" class="list">
<li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
</ul>
</div>
</body>
</html>
</html>
案例三：网站注册页面
由于此处代码实现过于复杂，css和js功能实现代码量较多，公众号文章字数有所限制，所以此处将两个重要的功能实现即可，有了这两个例子，其他的都可以做出来了，至于网页的美化这些到是简单许多。
$(function(){
var flag_user = false
var flag_allow = true // 默认是勾选状态
// alert(1)
// 验证发生在用户输入完成的时候 -- 失去焦点blur
// 框架：用户名密码。。同意协议都要做验证，当所有验证通过写submit提交
// 用户名：blur事件里面验证：获取用户输入的数据；列正则 ； if正则test用户输入的数据：合法true 不合法false -- 报错提示
// $('#user_name').blur()
// oBox.onclick = function(){}
// 验证用户名
var $user_name = $('#user_name')
$user_name.blur(function(){
fn_check_user()
})
function fn_check_user(){
var vals = $user_name.val()
var re = /^\w{6,20}$/;
if(vals == '')
{
$user_name.next().show().html('用户名不能为空')
flag_user = false
return
}
if(re.test(vals))
{
// 合法 -- 隐藏错误信息
$user_name.next().hide()
// flag_user = false
flag_user = true
}
else
{
// 不合法 -- 报错
$user_name.next().show().html('用户名是6-20位数字、字母和下划线！')
flag_user = false
}
}
// 验证同意协议的复选框
// 单击的时候改变勾选的状态 -- 验证click：if(勾选){合法}else{不合法}
var $allow = $('#allow')
// alert($allow.prop('checked') == 'checked')
// alert($allow.prop('checked'))
$allow.click(function(){
fn_check_allow()
})
function fn_check_allow(){
if($allow.prop('checked'))
{
// 合法
$allow.next().next().hide()
flag_allow = true
}
else
{
// 不合法 -- 报错
$allow.next().next().show().html('请同意协议')
flag_allow = false
}
}
// 验证注册
// 考虑的人：页面一刷新，没有执行失去焦点，正则没有生效 -- 不能注册不能提交
// 方法： 页面定义开关，默认不能提交，让开关关闭表示不能提交；正则验证通过打开开关表示可以提交 -- submit事件里面加条件判断：if(开关打开){提交}else{不能提交}
// 开关到底是什么？ 就是全局变量 -- 几个全局变量？
var $register = $('#register')
$register.submit(function(){
// return true
if(flag_user && flag_allow)
{
alert('提交')
return true
}
else
{
alert('不能提交')
return false
}
})
})
案例四：弹窗
要求：单击弹窗外部，弹窗消失；点击x弹窗消失；点击弹窗内部，弹窗不消失。
此处为js文件，由于字数限制，此处只提供重要功能的代码。
$(function(){
$('#btn01').click(function(){
$('#pop').show()
return false
})
$('#shutoff').click(function(){
$('#pop').hide()
})
$(document).click(function(){
$('#pop').hide()
})
$('.pop_con').click(function(){
// 不需要执行显示，也不能隐藏 -- 不能冒泡到document
return false
})
})
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2018-12-17，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
