JQuery--实例篇
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="不行不行、太嫩了"/>