当前位置:  Web服务器/前端>jquery

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

 
    发布时间:2013-8-27  


    本文导语: jQuery是一个快速的,小巧的,具有强大功能的JavaScript库。它的基本功能包括:1)访问和操作DOM元素2)控制页面样式(可以兼容各种浏览器)3)对页面事件的处理4)大量插件在页面中的运用5)与Ajax技术的完美结合jQuery改变了众...

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

它的基本功能包括:

1)访问和操作DOM元素

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

3)对页面事件的处理

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

5)与Ajax技术的完美结合

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

jQuery官方主页代码示例:

1) DOM遍历及操作

classcontinue的<button>的文本内容设置成"Next Step..."

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

2)事件处理

当点击了#button-container容器下的任何一个 button时,将会显示隐藏的#banner-message button,这个button是使用CSSdisplay: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="/article/Jscript/jquery-1.7.1.js"></script>

2) 简单弹出窗口的例子

<html>
<head>
    <title>jQuery程序1</title>
    <script language="javascript" type="text/javascript"
            src="/article/jquery/jquery-1.7.1.js"></script>
    <script type="text/javascript">
           $(document).ready(function(){
              alert("Hello,http://www.!!!");          
           })
    </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方式:

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下载地址

  • 本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载,整理或搜集自网络.欢迎任何形式的转载,转载请注明出处.
    转载请注明:文章转载自:[169IT-IT技术资讯]
    本文标题:jQuery概述,代码举例及最新版下载
相关文章推荐:


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3