<!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. Jmeter之线程组详解

    hello,更新几天的分享,线程数现在才分享,感觉怪怪的,原谅我没有考虑到一个顺序问题哈,那里总结好了,我就发那里,先把组件都写完,再来项目实战,希望大家不要责怪哈,内容有写的不详细的,或者我说错了, ...

  2. TeamView 连接2、3事

    问题1: 客户通过本地远程上服务器开TeamView让我们连,我们连上后发现开户一把她的远程关掉就卡住了. 如图,原来TeamView会启动多用户增强支持. 原来用的是用户ID连的,用户断掉远程后就不 ...

  3. linux下启动tomcat服务的命令是什么

    Linux下tomcat服务的启动.关闭与错误跟踪,使用PuTTy远程连接到服务器以后,通常通过以下几种方式启动关闭tomcat服务:切换到tomcat主目录下的bin目录(cd usr/local/ ...

  4. python全栈开发_day17_时间，系统模板和序列化

    一:时间模板 1)time 常用功能: time.sleep() time.time() time.strftime() import time print(time.strftime("% ...

  5. PHP获取时间比实际时间少8小时的问题

    有两方法 1.我们写PHP程序在获取时间时,人为加上8小时(这种方法是最实用也是最土的方法) 2.如果直接获取正确时间,也可修改PHP的配置文件,即查找php.ini文件 修改方法:在php.ini文 ...

  6. Scala 中使用 akka system 的 scheduler 的例子

    这是在scala控制台直接执行的例子.   import akka.actor._ import scala.concurrent.duration._ import scala.concurrent ...

  7. 工具软件推荐——GifCam

    博文里面的动态gif图片都是使用这款软件录制的,可以选择帧率,清晰度,并且编辑每一帧的图片,非常好用,特此推荐~ 注意: GifCam 是一款免费绿色的软件. 大家尽量在官方下载 下载地址. 最新的版 ...

  8. Linux网络编程服务器模型选择之循环服务器

    在网络程序里面,通常都是一个服务器处理多个客户机,为了出个多个客户机的请求,服务器端的程序有不同的处理方式.本节开始介绍Linux下套接字编程的服务器模型选择,主要包括循环服务器模型.并发服务器模型. ...

  9. MFRC522开发笔记

    一.了解基本概念 ①ISO-14443A协议:( 国际标准化组织:International Organization for Standardization)RFID协议的一种;   PICC:临近 ...

  10. exe4j生成的exe反编译成java代码

    很早以前写了一个java串口小程序,现在只有exe4j打包后的源程序了,最近又要用,折腾了一下发现其实要找回来也很简单,这里记录一下,以免以后忘记. exe4j只是将java程序,使用自己的方式打包了 ...