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实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
js实现二级导航功能
2017/03/03 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
详解vuejs之v-for列表渲染
2017/06/22 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
Python重新引入被覆盖的自带function
2014/07/16 Python
Python内置函数的用法实例教程
2014/09/08 Python
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
python交互界面的退出方法
2019/02/16 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Python字符串及文本模式方法详解
2020/09/10 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
美丽的现代设计家具:2Modern
2018/07/26 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
闪闪红星观后感
2015/06/08 职场文书
让子弹飞观后感
2015/06/11 职场文书
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS