<!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 提示语淡入效果的更多相关文章

  1. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

  2. jQuery实现鼠标移到元素上动态提示消息框效果

    当光标移动到某些元素上时,会弹出像tips的提示框,这种效果想必大家都有见到过吧,下面有个不错的示例,大家可以感受下 当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码代码如下: < ...

  3. Jquery hover鼠标经过时弹出div动态提示语

    一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...

  4. 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  5. 【五】jquery之事件（focus事件与blur事件）[提示语的出现及消失时机]

    例题:当鼠标移动到某个文本框时,提示语消失. 当失去焦点时,如果该文本框有内容,保存内容.没有内容,则恢复最初的提示语句 <!DOCTYPE html> <html> < ...

  6. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  7. python 全栈开发，Day129(玩具开机提示语,为多个玩具发送点播,聊天界面,app录音,app与服务器端文件传输,简单的对话)

    一.玩具开机提示语 先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.2.zi ...

  8. 应该掌握的JQuery的7个效果

    一: 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); 实例 //点击隐藏 $("#hide&q ...

  9. JQuery学习之各种效果演示

    1.隐藏与显示:hide()和show(),toggle() **隐藏: $("#hide").click(function(){ $("p").hide(); ...

随机推荐

  1. 用css做出来一个三角形

    用css做出来一个三角形      <!--不设置宽高  转换行内块  边线设置成宽度-->       <div class="triangle"> 三角 ...

  2. extjs Tree中避免连续单击会连续请求服务器

    应用场景:在项目中我要做一个左边是tree,右边是panel的界面.当我单击tree中的一条记录时,发送请求,并将结果显示在右边的panel中.做完之后发现,如果连续单击就会连续请求两次服务器,毕竟用 ...

  3. 关于android分辨率兼容问题

    关于手机分辨率相关术语和概念 屏幕尺寸:实际的物理尺寸,屏幕的对角线测量.为了方便,android把所有的屏幕尺寸分为了4个广义的大小:小,正常,大,特大. 屏幕密度:屏幕的物理面积内像素的数量,通常 ...

  4. SHELL脚本扩展

    使用SED命令 sed称为流编辑器,命令格式如下: sed option script file -e script #指定多个命令 -f script_file #指定命令文件 -n #不需要为每个 ...

  5. FlowPortal-BPM——管理员、功能的权限设置

    一.管理员设置 管理工具→安全组→安全组名称→管理授权→[添加管理人员]→[设置管理人员权限] 二.访问功能权限设置 (1)模块访问权限 (2)访问控制→[在需要的文件夹下]新建子资源→[资源名称]. ...

  6. HTML03--表单、input、框架、URL

    接上一篇“HTML02随笔”,在这里单独说一下HTML中最重要的标签--表单<form> 1.表单form:用于收集用户输入 <form action="" me ...

  7. Linux磁盘分区、挂在

    分区基础知识分区的方式:1) mbr分区:1.最多支持四个主分区2.系统只能安装在主分区3.扩展分区要占一个主分区4.MBR最大只支持2TB,但拥有最好的兼容性2) gtp分区:1.支持无限多个主分区 ...

  8. c/c++ int,float,short 大小端转换函数

    unsigned int(uint32_t)大小端转换函数 unsigned int BLEndianUint32(unsigned int value) { return ((value & ...

  9. USACO The Lazy Cow

    题目描述 这是一个炎热的夏天,奶牛贝茜感觉到相当的疲倦而且她也特别懒惰.她要在她的领域中找到一个合适的位置吃草,让她能吃到尽可能多的美味草并且尽量只在很短的距离.奶牛贝茜居住的领域是一个 N×N 的矩 ...

  10. springcloud(四)-Eureka Server集群

    Eureka Server的高可用 这一节我们接着上一节说. 有分布式应用开发经验的朋友应该发现,前文编写的单节点Eureka Server并不适合线上生产环境.Eureka Client会定时连接E ...