JQuery--实例篇

鸣谢：张子秋博客 、baidu 、 google、wiki

Demo1

本节我们来编写一个JQuery的Hello World程序, 迈出JQuery的第一步. 

我们这里来编写一个显示/隐藏Hello World

在桌面上创建一个JQdemo文件夹, 里面创建一个HelloJQuery.html文件, 内容如下:

<!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" >
<head>
    <title>Hello JQuery</title>
    <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="helloId">Hello JQuery</div>
<input id="btn_show" type="button" value="显示" />
<input id="btn_hide" type="button" value="隐藏" />
<input id="btn_modi" type="button" value="修改" />
<script type="text/javascript">
    $("#btn_show").bind("click", function(event) { $("#helloId").show(); });
    $("#btn_hide").bind("click", function(event) { $("#helloId").hide(); });
    $("#btn_modi").bind("click", function(event) { $("#helloId").html("JQuery GOGO"); });   
</script>
</body>
</html>

对于没了解过js的同学, <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>里面的src是js路径.

创建好了html文件,接下来是放好引用的js, 即src里的文件.

在JQdemo文件夹里再创建一个scripts文件夹, 里面放一个下载来的jquery-1.3.2-vsdoc2.js文件.

这样,我们的第一个demo就完成了.\(^o^)/

在上面的例子中,我们使用了:

1.id选择器:$("btn_show")

2.事件绑定函数

3.show\hide\html 函数

 

Demo2

大家可以看到我的每篇文章下面有个转载声明下的快速留言,如图

 

下面,我们就来从这个实例入手.

在你的博客的管理--随笔--维护签名, 我们将维护签名的代码改成如下

<input type="button" name="article_support" value="支持一下、加油"/>

<input type="button" name="article_pass" value="我只看看、不说话"/>

<input type="button" name="article_bad" value="不行不行、太嫩了"/>

然后在进入管理--设置--页脚html, 把这里的代码改成如下

<script language="javascript">

$(function(){

$("input[name=article_support]").click(function(){

$("textarea[class=comment_textarea]").val("文章不错，支持一下！");

PostComment();

});

$("input[name=article_pass]").click(function(){

$("textarea[class=comment_textarea]").val("我只看看、不说话~");

PostComment();

});

$("input[name=article_bad]").click(function(){

$("textarea[class=comment_textarea]").val("不行不行、太嫩了");

PostComment();

});

看了demo1是不是觉得demo2 很简单. 这里不做更多的解释

在html中的我们定义了一个name为article_support的input,这样,我们在脚本中获取的时候采用$("input[name=article_support]")这样的方式. 当然你也可以采用获取id的方式(如上节中提到的),也就是在维护签名中改为

相应的在脚本中要改成$("#article_support") 的方式,其他都是相同的.

 

Dom对象和jQuery包装集

Dom对象:

在传统的javascript开发中，我们都是首先获取Dom对象，比如

var div = document.getElementById("testDiv");

var divs = document.getElementsByTagName("div");

我们经常使用 document.getElementById 方法根据id获取单个Dom对象，或者使用 document.getElementsByTagName 方法根据HTML标签名称获取Dom对象集合。

 JQuery包装集:

jQuery包装集可以说是Dom对象的扩充。在jQuery的世界中将所有的对象，无论是一个还是一组，都封装成一个jQuery包装集，比如获取包含一个元素的jQuery包装集:

var jQueryObject=$("#testDiv");

jQuery包装集都是作为一个对象一起调用的. jQuery包装集拥有丰富的属性和方法, 这些都是jQuery特有的.

  

Dom对象和jQuery包装集的转换:

1).Dom转jQuery包装集

如果要使用jQuery提供的函数， 就要首先构造jQuery包装集。我们可以使用本文即将介绍的jQuery选择器直接构造jQuery包装集，比如：$("#testDiv");

      2).jQuery包装集转Dom对象

jQuery包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素:

Var domObject=$("#testDiv")[0];

 

API文档

jQuery官方API: http://docs.jquery.com/

中文在线API: http://jquery.org.cn/visual/cn/index.xml

中文jQuery手册下载: https://files.cnblogs.com/zhangziqiu/jquery_api.rar

 

参考资料:

http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html

http://www.mzwu.com/article.asp?id=2113

<input id="article_support" type="button" value="支持一下、加油"/>
<input id="article_pass" type="button" value="我只看看、不说话"/>
<input id="article_bad" type="button" value="不行不行、太嫩了"/>