jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
更新时间：2011年11月30日 19:45:11 作者：
最近把jquery中的dom操作和jquery中的事件和动画的方法都大体测了一下。本来想细细的把每个方法都写出来介绍下
但感觉这样写很没意思。
jquery的优势就是简单的代码就能带来更好的用户体验。
所以就找几个我感觉实用的例子，拿出来介绍下。顺带把其中用到的操作和事件介绍下。
html代码：
<input type="text" id="address" value="请输入邮箱地址"/>
jquery代码：
$(document).ready(function(){
$('#address').focus(function(){
var add_value=$(this).val();
if(add_value=="请输入邮箱地址"){
$(this).val("");
}
})
$('#address').blur(function(){
var add_value=$(this).val();
if(add_value==""){
$(this).val("请输入邮箱地址");
}
})
});
实现的效果就是地址框获取鼠标焦点时，地址框中的值清空。失去鼠标焦点的时候，地址框恢复默认设置。
介绍下这里用到的jquery事件：
focus()是当jquery对象得到鼠标焦点时候触发，blur()是当jquery对象失去鼠标焦点时候触发
顺带介绍下其他鼠标的事件。mouseover()是鼠标移入对象触发。mouseout()鼠标移出对象触发。mousemove()是鼠标在对象中移动时触发。
用到的jquery的dom操作：
val()是获取元素value的值，也可以设置元素value的值。这个在一个函数内实现获取和设置的方法在jquery中是很常见的
类是的还有html(),text(),heigth(),width(),css(),attr()等等。
这里区分下html()和text()
html()是相对于对象中html代码，而text()只是对象中的文本内容
举个例子<p><strong>区别</strong></p>
$('p').html()。结果是<strong>区别</strong>
$('p').text().结果是 区别
这个实例的介绍和拓展就说到这了把
jquery的优势就是简单的代码就能带来更好的用户体验。
所以就找几个我感觉实用的例子，拿出来介绍下。顺带把其中用到的操作和事件介绍下。
html代码：
<input type="text" id="address" value="请输入邮箱地址"/>
jquery代码：
复制代码 代码如下:
$(document).ready(function(){
$('#address').focus(function(){
var add_value=$(this).val();
if(add_value=="请输入邮箱地址"){
$(this).val("");
}
})
$('#address').blur(function(){
var add_value=$(this).val();
if(add_value==""){
$(this).val("请输入邮箱地址");
}
})
});
实现的效果就是地址框获取鼠标焦点时，地址框中的值清空。失去鼠标焦点的时候，地址框恢复默认设置。
介绍下这里用到的jquery事件：
focus()是当jquery对象得到鼠标焦点时候触发，blur()是当jquery对象失去鼠标焦点时候触发
顺带介绍下其他鼠标的事件。mouseover()是鼠标移入对象触发。mouseout()鼠标移出对象触发。mousemove()是鼠标在对象中移动时触发。
用到的jquery的dom操作：
val()是获取元素value的值，也可以设置元素value的值。这个在一个函数内实现获取和设置的方法在jquery中是很常见的
类是的还有html(),text(),heigth(),width(),css(),attr()等等。
这里区分下html()和text()
html()是相对于对象中html代码，而text()只是对象中的文本内容
举个例子<p><strong>区别</strong></p>
$('p').html()。结果是<strong>区别</strong>
$('p').text().结果是 区别
这个实例的介绍和拓展就说到这了把
相关文章
setTimeout使用时会产生动画队列，有可能是在chrome浏览器中窗口不处于最前端时动画的队列产生积累，下面为大家介绍下详细的解决方法2013-10-10
最近项目开发中遇到这样的功能:1.点击按钮的时候，可以进行倒计时，倒计时自定义.2.当接收短信失败后，倒计时停止，可点击重新发送短信.3.点击的元素支持一般标签和input标签。看似很复杂其实实现代码很简单，下面小编给大家分享下实现代码，需要的朋友参考下吧2017-05-05
jquery同时选择两个id对象的时候，可以用add来实现。2010-10-10
这篇文章主要为大家详细介绍了jQuery实现弹幕特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要介绍了jQuery实现拖拽效果插件的方法,较为详细的分析了jQuery拖拽效果的实现技巧,需要的朋友可以参考下2015-03-03
写网页的时候，脚本循环的时候有很多时候都会循环出来同id的网页元素，下面贴出来代码，如何利用jQuery对这些元素进行逐一遍历并可响应消息2012-06-06
jquery 读取页面load get post ajax 四种方式代码写法
jquery 读取页面load get post ajax 四种方式代码写法，学习jquery的朋友可以参考下。2011-04-04
这篇文章主要介绍了jQuery自定义动画函数实现方法,形式实例分析了jQuery通过插件结合数学运算实现滑块动画运动的效果,并附完整demo源码供读者下载,需要的朋友可以参考下2015-12-12
网上关于JS实现贪吃蛇的文章有很多，最近闲来无事，想着利用jQury来实现贪吃蛇小游戏，下面实现这篇文章主要介绍了利用jQuery实现贪吃蛇小游戏的方法，文中给出的是吸纳思路和示例代码，需要的朋友可以参考下。2017-03-03
获取对象是比较常见的操作了，因为想要操作一个对象之前，一定要先获取，这是必须的，下面整理了常见对象的获取方法，希望对大家有所帮助2014-05-05
最新评论