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

时间 2019-12-09

标签 jquery 概述代码举例最新版下载栏目 JQuery 繁體版

原文原文链接

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

它的基本功能包括:css

1）访问和操做DOM元素html

2）控制页面样式（能够兼容各类浏览器）java

3）对页面事件的处理jquery

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

5）与Ajax技术的完美结合ajax

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

jQuery官方主页代码示例:浏览器

1) DOM遍历及操做服务器

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

1	`$(` `"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标签中引用：

1	`<` `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概述,代码举例及最新版下载