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.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
PHP 事务处理数据实现代码
2010/05/13 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
[08:40]Navi Vs Newbee
2018/06/07 DOTA
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
Python eval函数介绍及用法
2020/11/09 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
妇联主席先进事迹
2014/05/18 职场文书
岗位职责说明书模板
2014/07/30 职场文书
小学体育组工作总结
2015/08/13 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang