jquery实现提示语淡入效果


Posted in jQuery onMay 05, 2017

效果图:

jquery实现提示语淡入效果

话不多说,请看代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> jquery 提示语淡入</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
.tishi-com{display:none;width:65px;height:20px;line-height:20px; background:#fff9c9; border:1px solid #c7bf93; color:#666;
position:relative;left:230px;top:-22px;}
</style>
<script type="text/javascript" src="jquery-3.0.0.js"></script>
</head>

<body>
 <div style="width:500px;height:200px;border:1px solid #E5E5E5;margin:0 auto;">
  <div style="height:50px;width:100%;">
   <label class="user-label">用户名:</label>
   <input type="text" class="username" name="username"/>
   <div class="tishi-com">
    <span class="tishi-font font-12"></span>
   </div>
  </div>

 <div style="height:50px;width:100%;">
  <label class="user-label">手机号:</label>
  <input type="text" class="phone" name="phone"/>
  <div class="tishi-com">
   <span class="tishi-font font-12"></span>
  </div> 
 </div>

  <div>
  <input type="submit" class="fade" value="提交" />
  </div>
 </div>

<script type="text/javascript">
 $(document).ready(function(){
  $(".fade").click(function(){
   var name=$.trim($(".username").val());
   var phone=$.trim($(".phone").val());
   if(name==""){
    $('input[name=username]').siblings('.tishi-com').fadeIn();
    $('input[name=username]').siblings('.tishi-com').find('.tishi-font').text('不能为空');
   }
   if(phone==""){
    $('input[name=phone]').siblings('.tishi-com').fadeIn();
    $('input[name=phone]').siblings('.tishi-com').find('.tishi-font').text('不能为空');
   }
  });
 });
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
简述jQuery Easyui一些用法
Aug 01 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery实现增删改查
Dec 22 jQuery
Jquery获取radio选中的值
May 05 #jQuery
jQuery实现简单的抽奖游戏
May 05 #jQuery
jquery中each循环的简单回滚操作
May 05 #jQuery
jquery dataTable 获取某行数据
May 05 #jQuery
js和jquery中获取非行间样式
May 05 #jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 #jQuery
jquery中封装函数传递当前元素的方法示例
May 05 #jQuery
You might like
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
用js解决数字不能换行问题
2010/08/10 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python中list循环语句用法实例
2014/11/10 Python
Python中字典和JSON互转操作实例
2015/01/19 Python
Python+django实现文件上传
2016/01/17 Python
tornado 多进程模式解析
2018/01/15 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
利用python汇总统计多张Excel
2020/09/22 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
2014年办公室个人工作总结
2014/11/12 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
机器人瓦力观后感
2015/06/12 职场文书
劳动模范获奖感言
2015/07/31 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
Vue全局事件总线你了解吗
2022/02/24 Vue.js
vue使用element-ui按需引入
2022/05/20 Vue.js
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers