<!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. nginx的几种负载均衡策略

    转自https://www.cnblogs.com/1214804270hacker/p/9325150.html 一.关于Nginx的负载均衡 在服务器集群中,Nginx起到一个代理服务器的角色(即 ...

  2. Spring 事务相关点整理

    Spring和事务的关系 关系型数据库.某些消息队列等产品或中间件称为事务性资源,因为它们本身支持事务,也能够处理事务. Spring很显然不是事务性资源,但是它可以管理事务性资源,所以Spring和 ...

  3. ubuntu apt update时W: GPG error http://ppa.launchpad.net lucid Release没有公钥无法验证NO_PUBKEY签名问题解决

    在安装更新时,即在运行命令行sudo apt-get update 或者运行更新管理器的时候,出现W: GPG 错误: W: GPG error: http://ppa.launchpad.net/o ...

  4. 深入理解map系列--HashMap（一）

    Map系列之HashMap(源码基于java8) HashMap是我们最常用的map实现之一,这篇文章将会介绍HashMap内部是如何工作的,以及内部的数据结构是怎样的 一.数据结构简图 二.源码解析 ...

  5. SBC应用

    在VoIP呼叫中主要使用会话发起协议(SIP),H.323和MGCP呼叫信令协议,Sbc 在主叫和被叫的信令/媒体路径之间引入. 通常,SBC隐藏网络拓扑,接管呼入并生成到新的请求分支到被叫.技术上叫 ...

  6. Visual Studio 跨平台開發實戰(2) - Xamarin.iOS 基本控制項介紹 (转帖)

    前言 在上一篇文章中, 我們介紹了Xamarin 以及簡單的HelloWorld範例, 這次我們針對iOS的專案目錄架構以及基本控制項進行說明. 包含UIButton,, UISlider, UISw ...

  7. solr集群的搭建教程和使用入门

    1 什么是SolrCloud? SolrCloud(solr 云)是Solr提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud. 当一个系统的索引数据量少的时候 ...

  8. C 扩展库 - mysql API CRUD

    CRUD table create table if not exists `student` ( `id` int auto_increment, `name` varchar(16) not nu ...

  9. WPF在XAML中使用MultiBinding的两个例子

    使用MultiBinding的原则:数据源有一个以上: 1. 需求:在一个需要显示的内容中,不同的部分要进行的处理不一样,这时可以使用MultiBinding <TextBlock> &l ...

  10. bootstrap中对dropdown使用hover代替click

    bootstrap的下拉组件需要点击click才能展示下拉列表,这在使用导航的时候很不方便因此有一个扩展的组件来解决这个问题. 在VS的Nuget中查询bootstrap-hover-dropdown ...