jQuery三分钟轻松快速入门

最新推荐文章于 2022-01-14 16:24:19 发布

iteye_13018

最新推荐文章于 2022-01-14 16:24:19 发布

阅读量79

点赞数

文章标签： jQuery CSS CMS GAE Django ViewUI

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

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