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实现读取txt文档的脚本
Jul 20 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
vue实现折线图 可按时间查询
Aug 21 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 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
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python3字符串学习教程
2015/08/20 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python在每个字符后添加空格的实例
2018/05/07 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
python制作抽奖程序代码详解
2021/01/15 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
C语言编程题
2015/03/09 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
中药专业毕业自荐书范文
2014/02/08 职场文书
生产助理岗位职责
2014/06/18 职场文书
大学军训的体会
2014/11/08 职场文书
荒岛余生观后感
2015/06/09 职场文书
鸦片战争观后感
2015/06/09 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫