浏览 6138 次
|
锁定老帖子 主题：jQuery三分钟轻松快速入门
该帖已经被评为新手帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-11-19
某个东东无论多么好，自己想用时再学才是最好的。
下面跟着学习jQuery这个很强的js库的使用 1）引用google <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 注：这个jquery.min.js为53k，你也可以下载，放到自己网站域名下，现在都用宽带也不愁这点带宽、流量，但当流量较大、还有其它大量的数据下载时，下载整个js却只调用两三个函数，这样得不偿失。浏览器有缓存功能，相信google的这个服务有很多人调用，这样别人或许不用再次下载这个js文件就能直接调用函数。 2）下载之后测试调用函数 <script> $(function(){ alert("test"); }) </script> 3）接下来要选择document中的某个ID，类似以前我们经常用的： document.getElementById('id_name'); 而在jQuery中可以这样方便选择： <div id="id_name">内容...</div> <script> $('#id_name'); </script> 这样就可以选中id为id_name的div了； 有另一种选择方法可以筛选一批类似的元素，如： <div class="comment">留言1</div> <div class="comment">留言2</div> <div class="comment">留言3</div> 可以通过下面的js选中class为comment的div <script> $('.comment'); </script> 选中之后干嘛呢？根据以前学到的js知识，选中后就获得对象的信息，就可以获取、设置对象的属性。 例如设置选中对象的属性： <script> //设置样式 $('#id_name').css({border:'5px dotted #f00'}); $('.comment').css({border:'5px dotted #f00'}); //设置文本 $('#id_name').text(Date()); //也可以连起来 $('.comment').text("这里是留言的内容").css({background:'#369',color:'#fff'}); </script> 这样，基本了解jQuery的使用方法及方便性了吧，如果有兴趣可以更深入了解更多更强的功能。 可以参考jQuery在线中文手册，有更多的代码示例 注意：网页要用utf-8编码，否则可能出现乱码。 －－－－－－－附本入门完整代码：－－－－－－－－－－－－－－－ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery三分钟轻松快速入门</title>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
<body>
<div id="id_name">内容...</div>
<div class="comment">留言1</div>
<div class="comment">留言2</div>
<div class="comment">留言3</div>
<script>
//设置样式
$('#id_name').css({border:'5px dotted #f00'});
$('.comment').css({border:'5px dotted #f00'});
//设置文本
$('#id_name').text(Date());
//也可以连起来
$('.comment').text("这里是留言的内容").css({background:'#369',color:'#fff'});
</script>
</body>
</html>
原文http://gae-django-cms.appspot.com/cms/show_article/32075.html 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-11-20
最后修改：2009-11-20
这就入门了吗
 ，是看到门了吧，也许门怎么开都没学会 ，至少我没太懂
|
| 返回顶楼 | |
|
发表时间：2009-11-20
jquery入门直接上jquery.com更好
另外：这是转载的吗？ |
| 返回顶楼 | |
|
发表时间：2009-11-20
ruijiang.zhang 写道 这就入门了吗
，是看到门了吧，也许门怎么开都没学会 ，至少我没太懂 是看到门了，而且看到门里一片光芒，有想进去的欲望……^_^ |
| 返回顶楼 | |
|
发表时间：2009-11-20
入门至少要学会$.each,不然怎么能入门呢?
|
| 返回顶楼 | |
|
发表时间：2009-11-21
这样的帖子还有人投“良好贴”，到目前为止还是4票，真是看不懂啊！！ |
| 返回顶楼 | |
|
发表时间：2009-11-21
记得JQuery为我毕业设计带来的精彩。
突然怀念起我的程序来 |
| 返回顶楼 | |
|
发表时间：2009-11-21
果然只要三分钟。楼主你个大忽悠。。。
|
| 返回顶楼 | |
|
发表时间：2009-11-21
很类似Java的Hello Wrold！
不错，至少回忆起一些Jquery的基本语法。 |
| 返回顶楼 | |
|
发表时间：2009-11-22
要想JQUERY入门还是好好看看 jquery in action或是Learning jquery 1.3 这两本书吧。jquery用的时间越长，你会慢慢爱上JQUERY。相比之下还是老婆更可爱。呵呵。。。
|
| 返回顶楼 | |
