jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果


Posted in Javascript onNovember 30, 2011

但感觉这样写很没意思。

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().结果是 区别

这个实例的介绍和拓展就说到这了把

Javascript 相关文章推荐
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
jquery中dom操作和事件的实例学习-表单验证
Nov 30 #Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 #Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 #Javascript
基于jquery的拖动布局插件
Nov 25 #Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 #Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 #Javascript
JQuery1.6 使用方法三
Nov 23 #Javascript
You might like
多重?l件?合查?(一)
2006/10/09 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
用js遍历 table的脚本
2008/07/23 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
vue实现顶部菜单栏
2020/11/08 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
python logging日志模块的详解
2017/10/29 Python
python机器学习实战之树回归详解
2017/12/20 Python
python flask框架实现重定向功能示例
2019/07/02 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
python如何查看安装了的模块
2020/06/23 Python
Python实现弹球小游戏
2020/08/01 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
家庭教育先进个人事迹材料
2014/01/24 职场文书
无传销社区工作方案
2014/05/13 职场文书
小学校长汇报材料
2014/08/20 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2015年技术员工作总结
2015/04/10 职场文书
goland 设置project gopath的操作
2021/05/06 Golang