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

最新推荐文章于 2025-08-22 19:09:26 发布

转载最新推荐文章于 2025-08-22 19:09:26 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/besty/p/3921932.html

文章标签：

#javascript #ViewUI

本文详细介绍了jQuery，一个轻量级且功能强大的JavaScript库，涵盖了其基本功能，如DOM操作、事件处理、Ajax集成等，并通过代码示例展示了如何在实际项目中应用jQuery。此外，文章还提供了jQuery的最新版下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

它的基本功能包括:

1）访问和操作DOM元素

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

3）对页面事件的处理

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

5）与Ajax技术的完美结合

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

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(
       "点击后的样式"
       );
      

       });
      

       });
      