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 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
window.location和document.location的区别分析
Dec 23 Javascript
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 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
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
PHP代码优化的53个细节
2014/03/03 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
python字典排序的方法
2019/10/12 Python
python获取引用对象的个数方式
2019/12/20 Python
Python实现验证码识别
2020/06/15 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
Python如何实现单例模式
2016/06/03 面试题
博士生导师推荐信
2014/07/08 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
网聊搭讪开场白
2015/05/28 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书