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初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
jquery ajax执行后台方法
2010/03/18 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
python中使用psutil查看内存占用的情况
2018/06/11 Python
Python3 合并二叉树的实现
2019/09/30 Python
应届大学生求职信
2013/12/01 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
大学四年个人自我小结
2014/03/05 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
中等生评语大全
2014/05/04 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
顶岗实习计划书
2015/01/16 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Redis入门教程详解
2021/08/30 Redis