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 相关文章推荐
js实现倒计时时钟的示例代码
Dec 17 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
分类解析jQuery选择器
Nov 23 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 Javascript
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
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
工艺工程师工作职责
2013/11/23 职场文书
2015入党自传格式范文
2015/06/26 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
Python基于百度API识别并提取图片中文字
2021/06/27 Python
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP