一篇jQuery小教程
作者:Realazy 来源:Realazy 发布时间:2007-10-15 12:49:00
写个小教程,以期能让大家对jQuery有所了解,甚至喜欢上它(请不要怪我)。
不废话,先说明我们的目的。我们知道,当代浏览器(modern browsers)的文本框的聚焦(focus)样式可以通过CSS的伪类:focus
来设置。假设我们有这么一段代码:
<form>
<dl>
<dt>Name: <dt>
<dd><input type="text" /></dd>
<dt>Password: <dt>
<dd><input type="password" /></dd>
<dt>Textarea: <dt>
<dd><textarea></textarea></dd>
</dl>
</form>
则我们这样的CSS就可以搞定focus样式:
input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border: 1px solid #f00; background: #fcc; }
简单不过,对不?你可以拿任何一款当代浏览器来测试(Firefox, Safari, IE7): http://realazy.org/lab/jquery/tut/form_hover_step1.html。IE6? 呵呵,这就是本篇教程的目的所在,没错,既然IE不支持:focus
,我们只能Using DOM Scripting to Plug the Holes in CSS,不过我们用jQuery来实现。
先来看看jQuery的工作方式。jQuery使用美元符号$
来返回一个jQuery对象,然后我们就可以使用jQuery提供的API(接口。很多很多很实用,赶紧参考Visual JQuery)进行操作了。
我们都不懂程序,对,我假设你跟我这样,只是了解一些最基本的语法(对不起大虾了,高手不要自扁身份)。既然我们不懂,我们就用CSS的方式来思维。
首先我们要从DOM中获得type="text"
, type="password"
的input
和textarea
。对,我们伟大的美金出场了,哦,是美元符号。参考http://proj.jquery.com/docs/Base/Expression/CSS/,我们知道,我们可以这样选择到他们:
$("input[@type=’text’], input[@type=’password’], textarea")
选中它们以后呢?我们就要靠事件(event)来处理了。:focus
对应的的事件是onfocus
,然而jQuery讨厌on,于是就是focus
了,多好 (参考http://proj.jquery.com/docs/EventModule/)。于是我们知道我们该这么做:
$("input[@type='text'], input[@type='password'], textarea").focus();
嘿嘿,我们已经迈出一大步了!我们要继续告诉focus
该做些什么。在jQuery中,我们通常需要一些匿名函数来帮我们干些事情,不理解不打紧,让我们继续:
$("input[@type='text'], input[@type='password'], textarea").focus( function(){ } );
我们的目的是什么?对,是给聚焦的文本框加上样式。jQuery有一个css (prop)
的API,参考前面的CSS,我们可以这么写:
css({background:"#fcc", border:"1px solid #f00"})
bingo! 离成功仅一步之遥。我假设你知道,返回对象自身使用this
。在jQuery中,返回自身当然也是this, 但是,需要返回的对象还是jQuery对象,我们还必须使用美元符号。所以是$(this)
。那么:
$("input[@type='text'], input[@type='password'], textarea").focus( function(){ $(this). css({background:”#fcc”, border:”1px solid #f00″})} );
That’s it! 然后我们该怎么执行这段代码呢? 我们知道有一个body onload=""
可以用,也知道有一个window.onload
可以用,但jQuery提供了一个更佳的方案,让我们可以进一步分离结构与交互。
$(document).ready(function(){
// Your code here...
});
所以我们只需将我们的代码放到里面去:
$(document).ready(function(){
$("input[@type='text'], input[@type='password'], textarea").focus( function(){ $(this). css({background:"#fcc", border:"1px solid #f00"})} );
});
呵呵……貌似成功了。等等,我们要送佛送到西天,好人做到底……在上面的交互中,只有聚焦的情况,那么失焦的时候呢?嗯,我们不要想当然,失焦?那么聚焦的样式就自动清楚清除了嘛~不会的,除非我们明确告诉它。依瓢画葫芦:
$(this).blur(function(){$(this).css({background: "transparent", border: "1px solid #ccc"})})
猜你喜欢
- 编写思路:把本地文件在客户端通过base64编码以后发送目的地.测试过程中,上传文件过大,导致超时不成功,后来经过改善.把编码分
- 本文试图从iPhone的角度结合一些iPhone平台项目的设计经验提炼出iPhone平台的一些优秀设计思路,以供大家在做移动互联网设备设计时
- 首先要作出决策,你是否想要使用最新的开发版本或最终的稳定版本。在MySQL开发过程中,同时存在多个发布系列,每个发布处在成熟度的不同阶段:&
- 这个帖子在51js看到的,觉得很有学习意义,看看高手们是怎么做的吧!提问者:infinte急求:正则或算法,JS VBS均可。要求:[1]支
- 因为我们现在的前端框架做性能优化,为了找到各个组件及框架的具体解析耗时,需要在框架中嵌入一个耗时测试工具,性能测试跟不同的计算机硬件配置有很
- 从最基础的说起。本教程中,所有IE 均指 WindowXP + IE 6.0, 所有 FF 均指 FF 1.5。不用编程部分1.1 Form
- MySQL数据库配置技巧用root用户启动远程服务一直是安全大忌,因为如果服务程序出现问题,远程攻击者极有可能获得主机的完全控制权。MySQ
- 什么情况下用响应缓冲会提高运行速度?例1、脚本引擎与 HTML 之间的切换频繁,对响应流写操作太多,导致性能下降:<table>
- 要想在不宽裕的页面展现丰富的内容,现在通用的做法使用tab,在一块区域通过tab切换来更换该区域的内容。这篇文章分析了tab设计很在理,今天
- 阅读上一章:Chapter 14 图片替换Chapter 15 为<body>指定样式把内容与显示效果分开设定的好处之一就是灵活
- UPA2008于2008年10月24日在深圳举行,托哥、绿桔应邀主持了一场圆桌会和一场工作坊,以下是圆桌会议《商业价值与用户价值的平衡》的现
- 颜色的变化跟人类的智慧一样,是无穷的,每个阶段都会有流行的色彩,有属于一个时代的颜色!WEB2.0是一个概念,它宣扬,定位了一些东西,以用户
- 这个格式是我自创的,经常有人问我为什么,这里做个简单总结:1、分类,一个模块或者同类功能定义为一类定义,每类定义之间用段落隔开。2、分级,每
- 作为设计师,我们都知道,一个极简的设计可以实现漂亮的效果。然而,很多设计师在实现上有些麻烦:要么是没有时间让使用如此少的元素制作的页面看起来
- 以下为引用的内容:DROP PROCEDURE test_insert ;DELIMITER ;;CREATE PROCEDURE test
- 项目有时要用一些Ajax的效果,因为比较简单,也就没有去用什么Ajax.net之类的东西,手写代码也就实现了。、第二天,有人反馈错误;说是只
- 由于数据库中的每张表中的字段名不一样,所以在写后台程序的时候,通常会写多个页面,对应不同的表。这里介绍一个函数,适合所有的表,不需要再为每一
- 错误代码错误消息说 明ASP0100Out of memory内存不足(不能分配要求的内存)ASP0101Unexpected
- 决定数据类型的第一步是定义所存数数据的分类: 数值型, 字符串型还是临时型等;除了一些特别的并不是那么直观的外, 这通常是很直观的。接下来是
- 方法一1. 下载MySQL源码分发包,不用区分操作系统,我们需要的东西是一样的;2. 重命名自己的mysql的data目录下的mysql文件