当前位置: 代码迷 >> Web前端 >> 十分钟搞定jQuery
  详细解决方案

十分钟搞定jQuery

热度:441   发布时间:2012-07-19 16:02:19.0
10分钟搞定jQuery

(本文作者的微博地址: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页面上的一个基本操作作为例子来讲解。

例子的效果如下:

10分钟搞定jQuery


大家先自己试试这个例子的效果,以下是例子的代码,除了加粗字体的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 )

(本文为原创,可以转载,但是必须注明原创地址,原创地址为如下:

http://avajava.iteye.com/blog/1558890

http://blog.digitalforest.cn/jquery-10min )

1 楼 water卡 2012-06-13  
  相关解决方案