网站分析与数字营销优化工具-维析

数码林网站分析博客

10分钟搞定jQuery

2012年05月05日 |  作者 IT勒了个去 |  员工笔记

       首先说明一下适合本文的读者应该满足的条件

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")

 

第二分钟: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> 

亲自试一试

       说明:

       本例子是,页面加载完毕时候,弹出alert对话框,对话框内容是:Hello World!

       代码解释:

       $(document).ready() 相当于onload方法,此段代码与下面的代码是一样的

<html>
<head>
<script type="text/javascript">
function initFunc(){
alert("Hello World !");
}
</script>
</head> 
 

<body onload="initFunc()">
<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>

 亲自试一试

 

第三分钟: 选择你的操作对象    

       例子中的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")
tablediv <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]")

 

第四分钟:给你的选择对象添加事件

       选择完你的操作对象后,就可以给你的选择对象绑定事件了。

       普通的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();
     }

 

第五分钟:添加效果,让你的页面元素动起来

       以上的例子中提到,表格的显示隐藏,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动画效果,发挥你的想象,可以做出多姿多彩,生动活泼的页面效果

 

第六分钟:改变页面元素的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");

 

第七分钟:十分方便的文档遍历,绝对不坑爹!

       在第六分钟的讲解中,代码中$(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

 

第八分钟:轻松改变文档内容和元素属性

       对于示例中,【+】按钮的效果,我们还有一点没有完成。

       那就是当表格显示的时候,需要把【+】,变成【-】号

       点击【-】的时候,表格隐藏,同时要把【-】换成【+】

       本例中我使用的是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

 

第九分钟: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")中

 

最后一分钟:随便聊聊!

       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已经到此结束,打完收功。 :) -_-。

如果这篇文章对大家有点作用的话,请不要吝啬你的鸡蛋和西红柿,随便扔。

无觅相关文章插件,快速提升流量