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 Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
vue-router的两种模式的区别
May 30 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 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和ACCESS写聊天室(七)
2006/10/09 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
javascript 自动填写表单的实现方法
2010/04/09 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python读取文件名称生成list的方法
2018/04/27 Python
python自动发送邮件脚本
2018/06/20 Python
python计算列表内各元素的个数实例
2018/06/29 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Python坐标线性插值应用实现
2019/11/13 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
技校毕业生自荐信范文
2014/03/07 职场文书
二十年同学聚会感言
2015/07/30 职场文书
Python中的嵌套循环详情
2022/03/23 Python