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实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 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
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP可变函数学习小结
2015/11/29 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
几种响应式文字详解
2017/05/19 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
JavaScript获取某一天所在的星期
2019/09/05 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
学习Python爬虫的几点建议
2020/08/05 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
中软国际Java程序员笔试题
2014/07/19 面试题
医药个人求职信范文
2014/01/29 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书