jQuery三分钟轻松快速入门

ego008

浏览: 152676 次
性别:
来自: 上海

最近访客更多访客>>

ONEBOYS

realaction

love767580

g_man1990

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery CSS CMS GAE Django

某个东东无论多么好，自己想用时再学才是最好的。

下面跟着学习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

分享到：