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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 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
global.php
2006/12/09 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
Python常用随机数与随机字符串方法实例
2015/04/09 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python实现Windows电脑定时关机
2018/06/20 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
英国假发网站:Hothair
2018/02/23 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
数组越界问题
2015/10/21 面试题
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
行政经理的岗位职责
2013/11/23 职场文书
服务承诺书范文
2014/05/19 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS