<!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. [iOS笔试600题]一、语法篇（共有147题）

    [A]1. @property 的作用是申明属性及真特性?［判断题］ A.正确 B.错误 [A]2. @synthesize的作用是自动笠成属性的访问器(getter/setter)方法?［判断题］ ...

  2. 线索二叉树的理解和实现(Java)

    线索二叉树的基本概念 我们按某种方式对二叉树进行遍历,将二叉树中所有节点排序为一个线性序列,在该序列中,除第一个结点外每个结点有且仅有一个直接前驱结点:除最后一个结点外每一个结点有且仅有一个直接后继结 ...

  3. iOS 本地时间 / UTC时间 / 时间戳等操作 / 获取当前年月日

    //获得当前时间并且转为字符串 - (NSString *)dateTransformToTimeString { NSDate *currentDate = [NSDate date];//获得当前 ...

  4. C#-WinForm-TextBox中只能输入数字的几种常用方法(C#)

    方法一: private void tBox_KeyPress(object sender, KeyPressEventArgs e) { if (e.KeyChar == 0x20) e.KeyCh ...

  5. 何在不联网的情况下ping通主机与虚拟机

    选择NAT模式,VM对windows选择ping操作时选择VMnet8的IP地址.

  6. 关于nginx的一个错误操作记录

    今天在弄前后端同步的测试的时候,前端用Nginx代理访问后端接口,由于启动了多次nginx软件,没有将前几次启动的nginx进程关闭,导致在访问后端接口的request被挂起,过了半天也没有结果返回, ...

  7. CentOS7 安装 Visual Code

    官网下载 rpm 安装文件 运行 rpm -ivh 试一下 sudo rpm -ivh xxx.rpm 有可能弹出提出:libxx.so() need by xxxrpm ,反正意思是缺组件,去下载安 ...

  8. p1164 小A点菜 题解——背包初步

    传送门 除去花里胡哨的表层题干,其实可以简化为: 若有m个东西,每取一个要K个代价,问若要求取出数据的代价为n的方案数是多少 其实是01背包的一种变式(反正我就是这么认为的,不对又怎样,打我啊). 我 ...

  9. python实现数据库增删改查

    column_dic = {"id": 0, "name": 1, "age": 2, "phone": 3, &quo ...

  10. Q221 最大正方形

    在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 0 0 1 0 输出: 4 cla ...