开始使用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 的核心代码其实也是围绕着一个类似这样的函数展开的
{
//parse params...
//some code ...
return a JQuery object;
}
注意无论我们输入什么参数,最后我们得到的都是一个JQuery对象,而不是一个HTML Element对象。(我猜的,没完全验证是不是所有的params对应的返回值:)
好了,不废话了,为了能尽快的能开始使用JQuery,我们就从让$(params)帮我们完成document.getElementById(id)的功能开始,上例子:
<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()工作了。