你为什么不用jQuery系列[2]——试用jQuery

lzyy 楼主

今天来到jQuery的系列二，来看看jQuery到底怎么使用，到底方便在哪里

这里只能是粗略的讲一讲，想要获取更多的信息，请访问官方网站http://jquery.com

jQuery里含金量最高的一个函数估计就是$()函数了，jQuery使用美元符号$来返回一个jQuery对象，得到对象后，那事情就好办了，有一堆函数等着你调用

怎么样，看出jQuery的优势了吧，不用再写那么长的document.getElementByElement()，一个$就搞定了，而且还兼容各种浏览器，太方便了

1、通过ID定位
假设有这么一个DIV，<div id="test"></div>，那么jQuery就可以这么定位这个DOM，$("#test")，相当于document.getElementByElement("test")

2、通过属性定位
假设有一个按钮<input type="text">，那么jQuery就可以这么找到这个按钮，当然前提是只有一个text，$("input[@type='text']");
从这个例子中可以看出
如果直接$("input")将得到所有tagName为input的元素，所以可以通过这个方法来取得tagName相同的元素，比如$("p");
如果有属性的话，像数组一样包含在方括号里面，前面加一个@(感觉这个像是从php那借鉴的)
那如果要定位多个元素呢，很简单用","
比如要定位包含class为new和old的两类link，用$("a[@class='new'],a[@class='old']")就可以了

3、通过name定位
很简单，假如要找到页面中所有class为test的DOM，则只要一句话就可以了$(".test")

最基本的应用就是以上这些了，当然了，上面这些都是最简单的，关键还是在实践

另外$还有一个比较方便的功能
$(function(){})
这个和window.onLoad类似，但写法上又简洁了些，而且，与此相区别的是前者只需要页面的DOM载入完毕就执行该函数，而后者则需要页面中的元素及内容都加载完毕后才执行

下面这段代码要实现的功能是当鼠标移到文字上时，背景变色，移走恢复
由于要远程下载js文件，所以可能稍微有点慢，本地测试不存在这种状况

<script type="text/javascript" src="http://interface.eyecon.ro/jquery/jquery.js"></script> <script> $(function(){ $("#test li").mouseover(function(){ $(this).addClass("red"); }) .mouseout(function(){ $(this).removeClass("red"); }); }) </script> <style> .red{ background:#ff0000; } </style> <div id="test"> <ul> <li>秋水共长天一色</li> <li>落霞与孤鹜齐飞</li> </ul> </div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

[ 本帖最后由 lzyy 于 2007-4-13 12:21 编辑 ]

jxdawei

建议楼主看这个帖子：
http://bbs.blueidea.com/thread-2724848-1-1.html

lzyy 楼主

恩，看了，但没有看出，为什么要看这个帖子

我只是喜欢jQuery，我只是希望更多的人通过jQuery来方便地解决实际问题

colinivy

貌似IE下没有效果啊

lzyy 楼主

肯定有效果，但是由于要远程下载js，所以可能会有点慢，可以刷新一下

[ 本帖最后由 lzyy 于 2007-4-13 12:20 编辑 ]