开始使用jQuery(一) - 立即开始使用

学习一门语言的最好方法就是使用它。在过去的一年里工作中一直在用WPF开发应用,现在终于要写点Web方面的东西了,那就借这个机会也用用JQuery。

先声明,JQuery很久之前就听说过,但从没用过,所以下面如果有些描述不正确还请见谅。关于jQuery大概知道这是个轻量级的但很牛X的js libarary,从2005年8月22号诞生到目前的1.3.1版本。官网地址:http://www.jquery.com

从美元符号($)写起吧,不知从何时起$符号开始在js代码里流行开了,但$并不是js中的一个特殊的关键字,他其实是因为某个懒人(聪明的程序员都很懒^_^)的写了一段类似下面的代码而产生的:

function $(id)  
{  
  return document.getElementById(id);  

是的,就这么简单,从此你就可以用$('id')来获取和使用HTMLElement 对象了,是不是少些了很多代码。

JQuery 的核心代码其实也是围绕着一个类似这样的函数展开的

function $(params)  
{  
  //parse params...

  //some code ...

  return a JQuery object;  

注意无论我们输入什么参数,最后我们得到的都是一个JQuery对象,而不是一个HTML Element对象。(我猜的,没完全验证是不是所有的params对应的返回值:)

好了,不废话了,为了能尽快的能开始使用JQuery,我们就从让$(params)帮我们完成document.getElementById(id)的功能开始,上例子:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
    
<script type="text/javascript" src="/r/j/jquery.js"></script>
    
<script>
       
function changeInnerHTML() {
          $(
"#adiv")[0].innerHTML = "你已经可以开始使用JQuery了";
       }
    
</script>
</head>
<body>
    
<div id="adiv" onmouseover ="changeInnerHTML();">点我是没用的</div>
</body>
</html>

 

参数$("#id")的功能是获取与id匹配的单个元素对象。参数为什么是#id而不能直接是id呢,原因很简单,jQuery的开发者比上面那个懒人更懒,他想用这一个美元干很多很多事情,所以只能在参数中加一些辅助符号进行区别。

在上面的例子为什么加个[0]呢,而不是直接$("#adiv").innerHTML="...",原因也很简单,上面也提到了,jQuery的$函数,最后返回的是一个JQuery Object,而不是HTML Element,那么这个jQuery object包含点什么呢?如下:

1.一个Element数组集合索引器,包含所有相关的HTML Element,在上面例子中只有一个Element,所以$("#adiv")[0]就相当于document.getElementById("adiv")

2.context对象。

3.一组方法,可以进一步简化我们的代码输入量,比如:

 $("#adiv").html("你已经可以开始使用JQuery了")  完成了 $("#adiv")[0].innerHTML = "你已经可以开始使用JQuery了" 的功能

4.jquery。 当前jquery函数库的版本号,目前这个值是“1.3.1"

5.length。 应该是element集合的数量,在上面例子中,这个值是1

6.selector。 当前选中的对象,在这个例子中,这个属性的值是"#adiv".

 好了,今天就学这么多,至少已经可以用JQuery来帮我完成最简单也是最常见的document.getElementById()工作了。

posted @ 2009-02-09 15:33  盒子  阅读(2820)  评论(13编辑  收藏  举报