<!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. 总结day6 ---- set集合,基本类型的相互转化,编码,数据类型总结,循环时候不要动列表或者字典,深浅copy

    python小数据池,代码块的最详细.深入剖析   一. id is == 二. 代码块 三. 小数据池 四. 总结 一,id,is,== 在Python中,id是什么?id是内存地址,比如你利用id ...

  2. C#-WebForm-Javascript、Jquery获取浏览器和屏幕各种高度宽度

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  3. python学习，day4：装饰器的使用示例2

    这个例子比较复杂 # coding=utf-8 # Author: RyAn Bi user,passwd = ' #输入用户名密码 def auth(auth_type): #装饰器第一层,确定鉴权 ...

  4. USACO The Lazy Cow

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

  5. PHP 中 strlen 获取中英 字符长度 以作以后对比使用

    ANSII编码: 1 长度是3 a 长度是3 ? 长度是3 我 长度是4 ?长度是2 ---------------------------- UTF-8编码: 1 长度是1 a长度是1 ? 长度是1 ...

  6. python-广播

    #!/usr/bin/python #coding=utf-8 #广播端 import sys,socket import time s=socket.socket(socket.AF_INET,so ...

  7. 向div添加圆角边框

    初级参数:border-radius: 4px;中级参数:border-radius: 4px 6px 6px 4px;终极参数:border-radius: 5px 5px 3px 2px / 5p ...

  8. 深度学习（二）BP求解过程和梯度下降

    一.原理 重点:明白偏导数含义,是该函数在该点的切线,就是变化率,一定要理解变化率. 1)什么是梯度 梯度本意是一个向量(矢量),当某一函数在某点处沿着该方向的方向导数取得该点处的最大值,即函数在该点 ...

  9. WPF UpdateSourceTrigger属性

    TextBox中的变化并不是立即传递到源,而是在TextBox失去焦点后,源才更新.这种表现由绑定中的UpdateSourceTrigger属性来控制.它的默认值是Default,源会根据你绑定的属性 ...

  10. [心平气和读经典]The TCP/IP Guide(003)

    The TCP/IP Guide [Page 43, 44] Scope of The TCP/IP Guide | 本书的讨论范围 The first step to dealing with a ...