Jquery怎样实现文本输入框鼠标定位时弹出提示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery怎样实现文本输入框鼠标定位时弹出提示相关的知识，希望对你有一定的参考价值。
参考技术A下面是html实现鼠标悬停时显示提示信息：
<input type="text" title="日期格式为：yyyy/MM或yyyy/MM/dd" />jquery实现：
$(input).addAttr('title','日期格式为：yyyy/MM或yyyy/MM/dd');<input type="text" />本回答被提问者采纳 参考技术B <input id="text" type="text" />
<script>
$(function()
$('#text').focus(function()
alert(0);
);
);
</script>追问
谢谢你
参考技术C 鼠标定位是什么意思，是不是鼠标点中文本框？追问对，是鼠标点中文本框的意思
追答用户名：<input id="userName" name="userName" type="text"><span style="display:none;">请输入用户名</span>$('#userName').click(function()
var msg = $(this).next('span').html();
$(this).attr('title', msg);
).blur(function()
$(this).removeAttr('title');
);
常见的JQuery应用举例
在学习JS之后，JQuery(以下简称JQ)为我们提供了一种更加便捷和简单的操作模式，利用它开发人员将更为高效的进行工作，下面将一些常见的问题进行举例。
1.点击某处弹出提醒，例如某些游戏在注册时会弹出“过渡游戏有害健康”的提示语，利用JQuery可以解决这一问题。
首先运行效果如下，鼠标点击勾选框时弹出“适度游戏的提示框”。
要解决这个问题，其实H5的hover事件和JS都可以解决，但是利用JQ代码更加方便快捷，主要是鼠标事件的应用：mouseover和mouseout。
其运行代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type=text/css>
#div1{
width: 300px;height: 80px;background-color: bisque;
display: none;
}
</style>
<script language="JavaScript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
$("input").mouseover(function(){
$("#div1").css("display","block");
});
$("input").mouseout(function(){
$("#div1").css("display","none");
});
});
</script>
</head>
<body>
<input type="checkbox" />XX游戏协议
<div id="div1">
为了您的身体健康，请适度游戏。
</div>
</body>
</html>
相同的，我们可以按照这个思路解决类似的问题，如导航栏点击背景色改变等。
2.利用JQuery实现动画
jQuery animate() 方法允许您创建自定义的动画
下面是一些常用的动画显示效果：
.show()：让隐藏元素显示，同时修改元素的宽度、高度、opacity属性
.hide():让显示元素隐藏，与show()相反；
.slideDown(): 让隐藏元素显示，效果为从上往下，增加高度
.slideUp(): 让显示的元素隐藏，效果从下往上，减小高度
.slideToggle():让显示的隐藏，让隐藏的显示
.fadeOut(): 让显示元素隐藏，淡出
.fadeIn()： 让隐藏元素显示，淡入
.fadeToggle(): 让显示的隐藏，让隐藏的显示。淡入淡出
.fadeTo(时间，透明度，函数):同fadeToggle，但是多了透明度参数，可以指定显示的最终透明度
.animate({最终的样式属性键值对},动画时间,动画效果("linear" "swing"),回调函数)： 自定义动画
应用举例：让动画往右移动，拉伸并且透明度降低。效果如下图
其运行代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script language="JavaScript" src="js/jquery-1.10.2.js"></script>
<style type="text/css">
div{
position: absolute;
}
</style>
<script type="text/javascript">
$(function(){
$("div").animate({
left:"350px",
width:"100px",
height:"200px",
opacity:"0.1"
},3000,function(){
alert("动画完成")
});
});
</script>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div>动画</div>
</body>
</html>
除此之外，JQ还有更强大的地方，总而言之，JQ是非常利于提高开发者工作效率的。
以上是关于Jquery怎样实现文本输入框鼠标定位时弹出提示的主要内容，如果未能解决你的问题，请参考以下文章