JQuery初步

来源：互联网发布：ipad应用程序访问网络编辑：程序博客网时间：2024/05/24 15:40

今天遇到一个小问题关于JQuery的虽然老见到他但没怎么用过 so 赶紧扫盲一下

学习一门语言的最好方法就是使用它。在过去的一年里工作中一直在用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".