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

但感觉这样写很没意思。

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

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

赞 (0)

相关推荐

  • jQuery随手笔记之常用的jQuery操作DOM事件

    Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件. DOM操作可以分为三个方面即DOM Core(核心).HTM-DOM和CSS-DOM. jQuery DOM 元素方法 函数 描述 .get() 获得由选择器指定的 DOM 元素. .index() 返回指定元素相对于其他指定元素的 index 位置. .size() 返回被 jQuery 选择器匹配的元素的数量. .toArra

  • jquery中dom操作和事件的实例学习 下拉框应用

    今天这个demo是有关下拉框的. 复制代码 代码如下: <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <option value="1">选项1</option> <option value="2

  • jQuery 选择器、DOM操作、事件、动画

    Jquery选择器 $(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象 选择器 1, 判断页面是否存在某元素:if($("#tt").length>0){} 或者if($("#tt")[0]){}; 2, 基本选择器 $("#test") 选择id为test的元素 $(".test

  • jquery中dom操作和事件的实例学习-表单验证

    很显然,这样做能提升更好的用户体验. html代码: 复制代码 代码如下: <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="r

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

    但感觉这样写很没意思. jquery的优势就是简单的代码就能带来更好的用户体验. 所以就找几个我感觉实用的例子,拿出来介绍下.顺带把其中用到的操作和事件介绍下. html代码: <input type="text" id="address" value="请输入邮箱地址"/> jquery代码: 复制代码 代码如下: $(document).ready(function(){ $('#address').focus(function(

  • jQuery中DOM操作实例分析

    本文实例讲述了jQuery中DOM操作的方法.分享给大家供大家参考.具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式).属性的修改.样式的修改.动态绑定事件 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.

  • jQuery中DOM操作原则实例分析

    本文实例讲述了jQuery中DOM操作原则.分享给大家供大家参考,具体如下: 一丶Get and Set in One(读写一体) 原则 为了更加易于使用,jQuery提供了简洁的DOM操作API,其方法往往是读写一体的.也就是说,某个方法既可用于读取操作,也可用于设置操作.如果没有为其传入表示值的参数,则表示获取操作,将返回获取到的数据:如果为其传入了表示值的参数,则表示设置操作,它将设置DOM元素指定属性的值. 示例代码 // 没有传入value参数,返回第一个匹配元素的value元素 va

  • JavaScript中DOM操作常用事件总结

    JavaScript中DOM操作常用事件总结

    目录 常用事件 演示得到焦点和失去焦点 演示 鼠标划过和离开 点击事件 load加载页面事件 onkeyup 键盘弹起事件 内容变化事件 选中时触发 上一篇聊了如何同JavaScript获得页面元素,而获得页面元素的的目的就是操作这个元素的一行为,而这个行为是通过某个条件进行触发的.而这个一系列在JavaScript中称之为事件. 由此可以看出事件分三个部分: 事件源头: 也就是要操作的元素是谁. 事件类型: 也就是事件触发条件,比如鼠标点击以及鼠标滑过等. 事件处理: 如果触发了这个行为,如何

  • jQuery 中DOM 操作详解

    jQuery 中DOM 操作详解

    jQuery 中的 DOM 操作 DOM(Document Object Model-文档对象模型):一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML HTML DOM: 使用 JavaScript和 DOM 为 HTML文

  • JQuery中DOM事件绑定用法详解

    本文实例讲述了JQuery中DOM事件绑定用法.分享给大家供大家参考.具体分析如下: 在文档加载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的调用格式为: bind( type [, data] , fn); bind()方法有3个参数,说明如下. 第1个参数是事件类型,类型包括:blur.focus.load.resize.scroll.unload.click.dblclick.mousedown.mouseup.m

  • JQuery中DOM加载与事件执行实例分析

    本文实例讲述了JQuery中DOM加载与事件执行原理.分享给大家供大家参考.具体分析如下: JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件:当用户单击某个按钮时,也会生成事件.虽然利用传统的JavaScript事件能完成这些交互,但jQuery增加并扩展了基本的事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能

  • jQuery中DOM树操作之复制元素的方法

    jQuery中DOM树操作之复制元素的方法

    本文实例讲述了jQuery中DOM树操作之复制元素的方法.分享给大家供大家参考.具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素.将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素.可是,有时候也会用到复制元素的操作.例如,可以复制出现在页面顶部的导航菜单,并把副本放到页脚上.实际上,无论何时,只要能通过复制元素增强页面的视觉效果,都是以重用代码来实现的好机会.毕竟,如果能够只编写一次代码并让jQuery替我们完成复制,何必要重写两遍同时又增加双倍的出错机会

随机推荐