jQuery概述,代码举例及最新版下载

jQuery是一个快速的，小巧的，具有强大功能的JavaScript库。

它的基本功能包括:

1）访问和操作DOM元素

2）控制页面样式（可以兼容各种浏览器）

3）对页面事件的处理

4）大量插件在页面中的运用

5）与Ajax技术的完美结合

jQuery改变了众多的程序员使用 JavaScript的方式。

jQuery官方主页代码示例:

1) DOM遍历及操作

将class为continue的<button>的文本内容设置成"Next Step..."

$(  "button.continue"  ).html(  "Next Step..."  )

2)事件处理

当点击了#button-container容器下的任何一个 button时,将会显示隐藏的#banner-message button,这个button是使用CSS的display:none隐藏的.

var  hiddenBox = $(  "#banner-message"  );
$(  "#button-container button"  ).on(  "click" ,  function ( event ) {
  hiddenBox.show();
});

3)Ajax

调用服务器上的/api/getWeather程序，并传递参数为zipcode=97201,将返回的结果在#weather-temp中显示出来。

$.ajax({
  url:  "/api/getWeather" ,
  data: {
    zipcode: 97201
  },
  success:  function ( data ) {
    $(  "#weather-temp"  ).html(  "<strong>"  + data +  "</strong> degrees"  );
  }
});

其它的一些举例:

1) 搭建jQuery开发环境

(1）在http://jquery.com下载。

(2）在script标签中引用：

< script  language = "javascript"  type = "text/javascript"  src = "Jscript/jquery-1.7.1.js" ></ script >

 

2) 简单弹出窗口的例子

< html >
< head >
    < title >jQuery程序1</ title >
    < script  language = "javascript"  type = "text/javascript"
            src = "jquery/jquery-1.7.1.js" ></ script >
    < script  type = "text/javascript" >
           $(document).ready(function(){
              alert("Hello,http://www.169it.com!!!");
           })
    </ script >
</ head >
< body >
</ body >
</ html >

$(document).ready(function(){})即是jQuery代码，相当于window.onload，可以简写成$(function(){})

3) jQuery的链式写法  

<script type= "text/javascript" >
        $( function (){
         $( ".divTitle" ).click( function (){
           $( this ).addClass( "divCurrColor" ).next( ".divContent" ).css( "display" , "block" );
         });
        });
   </script>

4) jQuery访问DOM对象

JavaScript方式：

www.169it.com
var  tDiv=document.getElementById( "divTmp" );
var  oDiv=document.getElementById( "divOut" );
var  cDiv=tDiv.innerHTML;
oDiv.innerHTML=cDiv;

jQuery方式：

var  tDiv=$( "#divTmp" );
var  oDiv=$( "#divOut" );
var  cDiv=tDiv.html();
oDiv.html(cDiv);

5) 动态切换CSS样式：

$( function (){
$( ".divDefault" ).click( function (){
$( this ).toggleClass( "divClick" ).html( "点击后的样式" );
});
});

 

jQuery主页最新版下载:

目前jQuery包括1.x系列和2.x系列，下载地址如下:

jQuery下载地址

本文来源:jQuery概述,代码举例及最新版下载