(本文作者的微博地址:http://weibo.com/free529 )
(本文为原创,可以转载,但是必须注明原创地址,原创地址为如下:
http://avajava.iteye.com/blog/1558890
http://blog.digitalforest.cn/jquery-10min )
首先说明一下适合本文的读者应该满足的条件:
1. 你是否是一个程序员或者是想成为一个程序员,不管是.net的,java的,web前端的,数据库的等等,不管是有证的还是无证的,只要你认为自己是程序员的。
2. 你是否有html,javascript的基础,无论是了解过,还是熟悉的,精通的,甚至是资深的,只要是你觉得你懂html,javascript的。
3. 你是否还没有接触过jQuery,不知jQuery为所云的,而且你觉得有心情了解jQuery的,或者是无所谓,10分钟而已的?
以上3个问题,如果你有一个问题回答是否,我劝你绕道,因为这篇文章不适合你,免得让我浪费你的时间,哪怕只有10分钟,时间就是生命。
如果你的答案都是:【是】,恭喜你,这篇文章适合你,以下的10分钟你将有所收获。
现在请你放下手中忙的所有的事情,开始咱们的10分钟洗脑。Ready Go!
第一分钟:先做热身运动,磨镰不误砍柴工
什么是jQuery?
jQuery是一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
jQuery的宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 极大地简化了 JavaScript 编程。它使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
非常简练的代码,非常遍历的操作,非常炫的效果,越来越受到程序员的追捧。
加载jQuery
使用之前,必须把jQuery的js引入到自己的html中。
下载地址:http://code.jquery.com/jquery-1.7.2.min.js (官方地址,压缩版,截止到本文:最新版本时1.7.2)
可以通过下面的标记把 jQuery 添加到网页中:
<head> <script type="text/javascript" src="jquery.js"></script> </head>
如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从jQuery , Google 或 Microsoft 加载 CDN jQuery 核心文件。
Google Ajax API CDN (Also supports SSL via HTTPS)
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head>
Microsoft CDN (Also supports SSL via HTTPS)
<head> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> </head>
jQuery CDN (via Media Temple)
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head>
“$”美元符号的使用
无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作。jQuery也这样做了
你慢慢会习惯如下的代码,并且你会喜欢上它。
$(document) $("#id") $("div p") $("div.container")
(本文作者的微博地址:http://weibo.com/free529 )
第二分钟:HelloWorld
貌似所有讲相关技术的书籍,都是先HelloWorld开场。以下就是jQuery的HelloWorld的代码示例。
<html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert("Hello World!"); }); </script> </head> <body> <p>Hello Word ! jQuery !</p> </body> </html>
$(document).ready() 的优点是:
1.可以把此方法写在文档的任意地方。
2.可以随时随地添加多个onload方法。
以下代码都可以很好的运行:
<html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert("Hello World1!"); }); $(document).ready(function(){ alert("Hello World2!"); }); $(document).ready(function(){ alert("Hello World3!"); }); </script> </head> <body> <p>Hello Word ! jQuery !</p> </body> </html>
<html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert("Hello World1!"); }); </script> </head> <body> <p>Hello Word ! jQuery !</p> <script type="text/javascript"> $(document).ready(function(){ alert("Hello World2!"); }); </script> </body> <script type="text/javascript"> $(document).ready(function(){ alert("Hello World3!"); }); </script> </html>
当然,虽然jQuery给我们提供了便利,但是我们还是要有良好的编程习惯,不要在js的混乱的骂名上再添一笔。
对待编程的态度也就是对待生活的态度。切记!切记!
是不是觉得这没有什么值得骄傲的。确实这不是jQuery值得骄傲的地方。如果你还没有犯困的话,请继续往下看,你会发现jQuery的简洁和便利,
你会体现到WRITE LESS,DO MORE的真是含义。
在第三分钟讲解之前,我先给大家设定一个目标。以下几分钟的讲解,将围绕一个常见的html页面上的一个基本操作作为例子来讲解。
例子的效果如下:
大家先自己试试这个例子的效果,以下是例子的代码,除了加粗字体的js代码之外,都是普通的html代码,我会在如下的几分钟一一解释此功能代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>10分钟搞定jQuery</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //+号按钮添加toggle事件 $("#btn").toggle( function(){ $("div.box").slideDown(); $(this).html("-"); }, function(){ $("div.box").slideUp(); $(this).html("+"); } );//end toggle //【改变背景颜色】的链接添加click事件 $("a[name=bgColor]").click(function(){ $(this).parents("tr").css("background-color","red"); }); //【删除】的链接添加click事件 $("a[name=del]").click(function(){ $(this).parents("tr").remove(); }); //【增加】的链接添加click事件 $("a[name=add]").click(function(){ var $tr = $("<tr><td></td><td></td><td></td><td></td></tr>"); $("table.tstyle").append($tr); var $btn = $('<a name="del" href="#">删除x</a></td>').click(function(){ $(this).parents("tr").remove(); }); $tr.find("td").last().append($btn); }); }); </script> </head> <body> <div class="content"> <strong id="btn" class="btn">+</strong> 10分钟搞定jQuery <div class="box"> <table cellpadding="0" cellspacing="0" class="tstyle"> <tr> <th>Title1</th><th>Title2</th><th>Title3</th><th>Title4</th> </tr> <tr> <td></td><td></td><td></td><td><a name="bgColor" href="#">改变背景颜色</a></td> </tr> <tr> <td></td><td></td><td></td><td><a name="del" href="#">删除1</a></td> </tr> <tr> <td></td><td></td><td></td><td><a name="del" href="#">删除2</a></td> </tr> <tr><td></td><td></td><td></td><td><a name="add" href="#">增加</a></td> </tr> </table> </div> </div> </body> </html>
(本文为原创,可以转载,但是必须注明原创地址,原创地址为如下:http://avajava.iteye.com/blog/1558890 )
第三分钟: 选择你的操作对象
例子中的html很简单,而且所有的元素都没有显式的添加事件。例子中是在页面文档ready时,给页面上的元素添加事件。
这样可以做到页面的结构和页面的行为完全分离。
要给页面上的元素添加事件,必须要在js脚本中选择你的操作对象。jQuery提供了多种选择方式,我们称之为选择器。
例如:
我们常用document.getElementById("eid")来获取id="eid"的页面元素,在jQuery里用$("#eid")就可以获取。
我们常用document.getElementsByTagName("table")来获取页面上所有的table元素,在jQuery里用$("table")就可以获取。
我们常用document.getElementsByName("del")来获取页面上所有的name="del"的元素,在jQuery里用$("[name=del]")就可以获取。
jQuery不只是对js原有方法的重复,他有自己的多种选择方式,虽然其中的原理跟js操作html的dom对象一致,但是它去大大的方便了js程序员。
以下是更多的选择器实例
$(this) 当前 HTML 元素 $("div") 所有 <div> 元素 $("div.box") 所有 class="box" 的 <div> 元素 $(".box") 所有 class="box" 的元素 $("#btn") id="btn" 的第一个元素 $("td:last") 最后一个 <td> 元素 $("[name='del']") 所有带有name="del"的元素属性 $("div#desc .box") id="desc" 的 <div> 元素中的所有 class="box" 的元素
所以例子中采用如下的方式获取我要操作的元素:
元素 | HTML源 码 | jQuery选择方式 | |||||||||||||||||||||||||||||||
【+】 | <strong id="btn" class="btn">+</strong> | $("#btn") | |||||||||||||||||||||||||||||||
承载 table 的 div | <div class="box">… …</div> | $("div.box") | |||||||||||||||||||||||||||||||
table | <table cellpadding="0" cellspacing="0" class="tstyle">… … </table> | $("table.tstyle") | |||||||||||||||||||||||||||||||
【改变 背景 颜 色】的 链接 | <a name="bgColor" href="#">改 变 背景 颜 色 </a> | $("a[name=bgColor]") | |||||||||||||||||||||||||||||||
【删除 1】的 链接 | <a name="del" href="#">删 除 1</a> | $("a[name=del]") | |||||||||||||||||||||||||||||||
【删除 2】的 链接 | <a name="del" href="#">删 除 2</a> | $("a[name=del]") | |||||||||||||||||||||||||||||||
【增加】的链接 | <a name="add" href="#">增加 </a> | $("a[name=add]") |
(本文为原创,可以转载,但是必须注明原创地址,原创地址为如下:http://blog.digitalforest.cn/jquery-10min )
第四分钟:给你的选择对象添加事件
选择完你的操作对象后,就可以给你的选择对象绑定事件了。
普通的js绑定onclick事件:
document.getElementById("btn").onclick = function(event){alert("!!!");};
jQuery提供的绑定事件:
$("#btn").bind("click", function(event) {alert("!!!");});
所以jQuery对于绑定事件,使用bind方法。比如要绑定mourseover,mourseout,blur,change等
$("#btn").bind("mourseover", function(event) {alert("!!!");}); $("#btn").bind("mourseout", function(event) {alert("!!!");}); $("#btn").bind("blur", function(event) {alert("!!!");}); $("#btn").bind("change", function(event) {alert("!!!");});
jQuery对于这样的常用方法,提供了更简便的写法:
$("#btn").click(function(event) {alert("!!!");}); $("#btn").mourseover(function(event) {alert("!!!");}); $("#btn").mourseover(function(event) {alert("!!!");}); $("#btn").blur(function(event) {alert("!!!");}); $("#btn").change(function(event) {alert("!!!");});
所以在咱们的例子中,在ready方法中,给相关的页面元素都添加了相关的事件:
//+号按钮添加toggle事件 $("#btn").toggle( //....... );//end toggle //【改变背景颜色】的链接添加click事件 $("a[name=bgColor]").click(function(){ //....... }); //【删除】的链接添加click事件 $("a[name=del]").click(function(){ //....... }); //【增加】的链接添加click事件 $("a[name=add]").click(function(){ //....... });
toggle事件是什么呢?
在示例中,我们要实现的效果是,点击【+】按钮,表格显示,再点击一下,表格隐藏。
所以要调用表格显示和隐藏的方法。
toggle是click事件的一个变种,实现多次点击,每次点击执行的不同的方法,这些方法可以组成一个循环队列,每次执行一个。
所以给【+】添加了toggle的事件:
//+号按钮添加toggle事件 $("#btn").toggle( function(){ //表格显示 $("div.box").show(); }, function(){ //表格隐藏 $("div.box").hide(); }
(本文作者的微博地址:http://weibo.com/free529 )
第五分钟:添加效果,让你的页面元素动起来
以上的例子中提到,表格的显示隐藏,js代码可以用如下方式显示:
var divTest = [表格的dom节点]; //表格显示 divTest.style.display=""; //表格隐藏 divTest.style.display="none";
jQuery提供非常便利的方法 show(),hide(),分别来实现显示和隐藏
//+号按钮添加toggle事件 $("#btn").toggle( function(){ //表格显示 $("div.box").show(); }, function(){ //表格隐藏 $("div.box").hide(); } );//end toggle
如果简单的显示和隐藏,那就太逊了,虽然很简练,但是也不值得浪费咱一分钟的时间。
jQuery可以很方便的提供一些动画效果,比如说从上到下滑动显示表格,从下到上滑动隐藏表格。
slideDown() 就是通过调整高度来滑动显示被选元素
slideUp() 就是通过调整高度来滑动隐藏被选元素
//+号按钮添加toggle事件 $("#btn").toggle( function(){ //表格显示 $("div.box").slideDown(); }, function(){ //表格隐藏 $("div.box").slideUp(); } );//end toggle
除此之外,jQuery还提供其他的动画效果,比如:
animate() 对被选元素应用“自定义”的动画
fadeIn() 淡入被选元素至完全不透明
fadeOut() 淡出被选元素至完全不透明
effect() 设定多种参数,实现诸如弹出,飘出,爆炸消失等多种效果,具体请参照 http://jqueryui.com/demos/effect/
利用jQuery动画效果,发挥你的想象,可以做出多姿多彩,生动活泼的页面效果
(本文为原创,可以转载,但是必须注明原创地址,原创地址为如下:http://avajava.iteye.com/blog/1558890 )
第六分钟:改变页面元素的css
现在的B/S结构的应用做的绝对不亚于C/S结构的,这取决于友好的操作界面,遍历的操作过程。
这些友好的界面,本质还是要基于不同状态下改变页面元素的CSS样式表现。
本例中,以 【改变表格一行的背景颜色】作为例子,来说明jQuery对页面元素的CSS样式是如何便利的操作的。
//【改变背景颜色】的链接添加click事件 $("a[name=bgColor]").click(function(){ $(this).parents("tr").css("background-color","red"); });
其中css()方法就是设置或返回匹配元素的样式属性。
文中就是把【改变背景颜色】这个链接所在的行(tr)的背景颜色(background-color)设置为红色(red)
我们还可以改变一组css属性,比如:
$(this).parents("tr").css({ "color":"white", "background-color":"red", "padding":"5px" });
看到这里你会说,这么一组样式,定义为样式表,然后设置tr的class就可以了。
对,jQuery也想到了这一点。
addClass( classes ) 是为匹配元素添加样式(classes)
removeClass(classes)是删除匹配元素的样式(classes)
所以以上的代码可以写成这样:
<style type="text/css"> .trStyle{ "color":"white", "background-color":"red", "padding":"5px" }) </style> $(this).parents("tr").addClass("trStyle");
(本文为原创,可以转载,但是必须注明原创地址,原创地址为如下:http://blog.digitalforest.cn/jquery-10min )
第七分钟:十分方便的文档遍历,绝对不坑爹!
在第六分钟的讲解中,代码中$(this).parents("tr")为何物?
//【改变背景颜色】的链接添加click事件 $("a[name=bgColor]").click(function(){ $(this).parents("tr").css("background-color","red"); });
我们的代码功能是改变【改变背景颜色】链接所在的行(tr)的背景。而$(this).parents("tr")就是选择这个链接所在的行。
$(this)是指链接<a name="bgColor" href="#">改变背景颜色</a>,然后parents(),是指当前链接的parent节点,<td> <tr> <table>,以此向上遍历
$(this).parents("tr")就是此parent节点集合中的<tr>节点
jQuery提供了非常方便的遍历元素的预置方法,你可以非常快速的,优雅的方式来定位你要操作的元素。
省去了我们给需要操作的页面元素添加不必要的id属性或者其他冗余的属性。
以下是常用的遍历页面元素的方法:
函数 | 描述 | ||||||||||||||||||||||||||||||||
.next() | 获得匹配元素集合中 每 个元素 紧邻 的同 辈 元素。 | ||||||||||||||||||||||||||||||||
.prev() | 获得匹配元素集合中 每 个元素 紧邻 的前一个同 辈 元素,由 选择 器 筛选 (可 选 )。 | ||||||||||||||||||||||||||||||||
.parents() | 获得当前匹配元素集合中 每 个元素的祖先元素,由 选择 器 筛选 (可 选 )。 | ||||||||||||||||||||||||||||||||
.first() | 将匹配元素集合缩 减 为 集合中的第一个元素。 | ||||||||||||||||||||||||||||||||
.last() | 将匹配元素集合缩 减 为 集合中的最后一个元素。 | ||||||||||||||||||||||||||||||||
.filter() | 将匹配元素集合缩 减 为 匹配 选择 器或匹配函数返回 值 的新元素。 | ||||||||||||||||||||||||||||||||
.find() | 获得当前匹配元素集合中 每 个元素的后代,由 选择 器 进 行 筛选 。 |
详情请参照:http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp
(本文作者的微博地址:http://weibo.com/free529 )
第八分钟:轻松改变文档内容和元素属性
对于示例中,【+】按钮的效果,我们还有一点没有完成。
那就是当表格显示的时候,需要把【+】,变成【-】号
点击【-】的时候,表格隐藏,同时要把【-】换成【+】
本例中我使用的是jQuery对象的html(),方法,此方法是设置或返回匹配的元素集合中的 HTML 内容,类似js dom对象的innerHTML属性。
//+号按钮添加toggle事件 $("#btn").toggle( function(){ //表格显示 $("div.box").slideDown(); $(this).html("-"); }, function(){ //表格隐藏 $("div.box").slideUp(); $(this).html("+"); } );//end toggle
到此为止,我们的【+】的功能介绍完毕。
remove()
示例中的【删除1】和【删除2】链接的是删除此链接所在的行(tr) 代码如下:
//【删除】的链接添加click事件 $("a[name=del]").click(function(){ $(this).parents("tr").remove(); });
append()
示例中【增加】链接是在表格的最后处添加一行(tr),就是使用的append()方法
//【增加】的链接添加click事件
$("a[name=add]").click(function(){
var $tr = $("<tr><td></td><td></td><td></td><td></td></tr>");
$("table.tstyle").append($tr);
var $btn = $('<a name="del" href="#">删除x</a></td>').click(function(){
$(this).parents("tr").remove();
});
$tr.find("td").last().append($btn);
});
代码解释:
var $tr = $("<tr><td></td><td></td><td></td><td></td></tr>"); //创建一个空行
$("table.tstyle").append($tr); //把空行append到table的最后一行
$('<a name="del" href="#">删除x</a></td>') //创建一个删除x链接
var $btn = $('<a name="del" href="#">删除x</a></td>').click(function(){ //给删除链接添加click事件,删除自己所在的行
$(this).parents("tr").remove();
});
$tr.find("td").last().append($btn); //把删除链接append到新生成的那一行的最后一个td中
$tr.find("td") //find("td")是获取tr下的所有td子节点
$tr.find("td").last() //last()是将匹配元素集合缩减为集合中的最后一个元素,也就是最后一个td元素
注:find和last是我们第七分钟讲解的遍历元素的方法,是不是十分的方便。
除此之外操作页面元素属性的,还有如下方法:
attr() 设置或返回匹配元素的属性和值。
例如: $("img").attr("width");取得img匹配元素的width
$("img").attr("width",'100'); 设置img匹配元素的width值为 100
val() 设置或返回匹配元素的值。相当于 attr("value");
例如: $(":input#name").val(); 取得<input id='name' type="text" />的值
$(":input#name").val('@勒了个去'); 设置<input id='name' type="text" />的值为 '@勒了个去'
removeAttr() 从所有匹配的元素中移除指定的属性。
例如: $("a").removeAttr("href");删除所有<a>链接的href属性
操作页面内容的方法:
函数 | 描述 | ||||||||||||||||||||||||
after() | 在匹配的元素之后插入内容。 | ||||||||||||||||||||||||
before() | 在每 个匹配的元素之前插入内容。 | ||||||||||||||||||||||||
empty() | 删除匹配的元素集合中所有的子 节 点。 | ||||||||||||||||||||||||
insertAfter() | 把匹配的元素插入到另一个指定的元素集合的后面。 | ||||||||||||||||||||||||
insertBefore() | 把匹配的元素插入到另一个指定的元素集合的前面。 | ||||||||||||||||||||||||
replaceWith() | 用新内容替换 匹配的元素。 | ||||||||||||||||||||||||
text() | 设置或返回匹配元素的内容。 | ||||||||||||||||||||||||
wrap() | 把匹配的元素用指定的内容或元素包裹起来。 |
详情请参照:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp
(本文为原创,可以转载,但是必须注明原创地址,原创地址为如下:http://avajava.iteye.com/blog/1558890 )
第九分钟:jQuery-Ajax
Ajax对于web2.0来说,就是一把神兵利器,给web2.0开辟了一片多姿多彩的天地。
它的不刷新浏览器的情况下,异步从服务器端加载数据的特性,令无数人为之着迷。
jQuery库拥有完整的Ajax兼容套件,对Ajax的提供了完美的支持。
在这里推荐几个常用的方法供大家使用。
$("div").load('data.html'); //此方法直接请求服务器上的data.html,然后把返回结果放置指定的$("div")中
$.get("data_get.php",{id:"12"}, function(result){ $("div").html(result); }); //此方法是使用get方法,请求服务器数据data_get.php,并且提交{id:"12"}的参数,返回结果放置到$("div")中
$.getJSON("data_json.php",function(result){ $.each(result, function(i, field){ $("div").append(field + " "); }); }); //此方法是使用get方法,请求服务器的json数据data_json.php,返回结果,使用each方法遍历result,然后append到$("div")中
$.post("data_post.php",{ name: "张三",age: "22" },function(result){ $("div").html(result); }); 此方法是使用post方法,请求服务器数据data_post.php,并且提交{ name: "张三",age: "22" }的参数,返回结果放置到$("div")中
(本文为原创,可以转载,但是必须注明原创地址,原创地址为如下:http://blog.digitalforest.cn/jquery-10min )
最后一分钟:随便聊聊!
jQuery由美国人John Resig创建以来,以它轻量级的js类库,压缩版本只有21k,写更少的代码,做更多的事情的宗旨
多浏览器支持,丰富多彩的动画效果,优雅的写作方式,捕获了许多web前端开发的程序员的芳心。
2011年使用率增长最快Web技术TOP10 jQuery第一,每天都有398个网站开始使用它。
jQuery目前在所有网站中的使用率已达到了42.8%。其市占率更是达到了 84.1%,许多人都将它视为JavaScript库的事实标准。
jQuery简单易用的特性,不需要开发者投入太多,就能迅速开始开发工作,然后逐渐提高技巧。它简洁而强大,
开发者能迅速得到自己想要的结果,使使用jQuery变成一件充满乐趣的事情。
目前基于jQuery开发的插件目前已经有大约数千个,完全可以覆盖web前端开发的所有要求。特别是jQuery UI提供的
拖拽层,模式窗体,进度条,日历选择器,滑动按钮,自动完成组件,标签(tab)组件等,给web UI编程带来了极大的方便。
最后提供几个比较好的资源:
jQuery的官方网站: http://jquery.com/ http://jquery.org/
w3school的jQuery教程: http://www.w3school.com.cn/jquery/
博客文章【从零开始学习jQuery】 : http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html
博客园jQuery专题 : http://kb.cnblogs.com/zt/jquery/
【jQuery基础教程】 人民邮电出版社 ISBN 978-7-115-18110-7/TP
好了,十分钟搞定jQuery已经到此结束,打完收功。 :) -_-。
如果这篇文章对大家有点作用的话,请不要吝啬你的鸡蛋和西红柿,随便扔。
(本文作者的微博地址:http://weibo.com/free529 )
(本文为原创,可以转载,但是必须注明原创地址,原创地址为如下: