[翻译]jQuery 简介

最新推荐文章于 2025-08-09 20:51:19 发布

kogo2005

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量748

点赞数

文章标签： jquery prototype javascript html css 文档

本文介绍了一个新的JavaScript类库——jQuery。该库支持XPath表达式和CSS1-3选择器，允许开发者轻松地查找并操作DOM元素。文章通过示例展示了如何使用jQuery选择元素、修改样式及内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

又一个高效的javascript 类库发布了，这次它的名字叫“ jQuery”。一些代码，并非全部是受到moo.fx的启发，moo.fx是基于prototype, 而prototype又是基于一些其它的类库等。jQuery是一个轻量级的框架，能让你在10分钟之内就可以使用。这就是一个10分钟之内的教程，现在让我们开始。

我们的jQuery例子会用到下面的HTML代码：

<HTML>
<BODY>
<DIV style="border: 1px solid Green;">
<A href="http://google.com/">Google</a>
</DIV>
<P id="mypara">this is one paragraph</p>
<P>This is another paragraph</p>
</BODY>
</HTML>

jQuery支持XPath表达式和CSS 1-3，也就是说你可以通过tag name, element id, CSS类, 或者XPath 表达式来获得代表一个或多个元素和jQuery对象。要获得一个元素的jQuery引用，我们可以使用美元符号，像下面的代码：

// Find element by it's id
var mypara = $("#mypara");
// Find elements by it tag name
var allpara = $("p");
// Fine element using XPath
$("a[@src='google.com']");

就像注释里所写的那样，变量mypara将会代表一个id为“mypara”的段落。变量allpara将会代表本文档中的所有段落。一旦你获得了一个或者多个元素的jQuery对象，你就可以更改它的样式。下面的例子将会改变我的文档中所有段落中的文本颜色。

$( "p").css("color", "yellow");

如果你想要一次性更新多个样式属性，你可以使用下面的代码：

$( "p").css( {color: "yellow", background: "green"} );

如果你现在正在使用一些Ajax类库，你可能不仅要更新元素的样式，你还要更新元素内的HTML。通过下面的代码来更新内含的HTML：

$( "p").html("replace inner <b>HTML</b>");

其它一些有用的方法，它们的功能就像它们的名字一样，包括：append(), prepend(), before(), and after()。jQuery也提供了hide(), show(), and toggle()方法来表现一些特效。jQuery是一个高效的JavaScript类库，在理念上与moo.fx 和 Prototype相似。jQuery应该是非常容易上手，并在你的下一个web 2.0项目中得到使用，因为它简化了你以前做的事。

我已经提到了moo.fx 在 JavaScript FX中。

技术标签: jquery, javascript, css, html, webdevelopment, moo.fx, moofx, prototype

原文地址: http://www.juixe.com/techknow/index.php/2006/01/29/jquery-library/

译文地址: http://blog.youkuaiyun.com/kogo2005/archive/2008/04/22/2316368.aspx