jQuery概述,代码举例及最新版下载
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隐藏的.
1
2
3
4
|
var hiddenBox = $( "#banner-message" ); $( "#button-container button" ).on( "click" , function ( event ) { hiddenBox.show(); }); |
3)Ajax
调用服务器上的/api/getWeather程序,并传递参数为zipcode=97201,将返回的结果在#weather-temp中显示出来。
1
2
3
4
5
6
7
8
9
|
$.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) 简单弹出窗口的例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
< 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的链式写法
1
2
3
4
5
6
7
|
<script type= "text/javascript" > $( function (){ $( ".divTitle" ).click( function (){ $( this ).addClass( "divCurrColor" ).next( ".divContent" ).css( "display" , "block" ); }); }); </script> |
4) jQuery访问DOM对象
JavaScript方式:
1
2
3
4
|
www.169it.com
var tDiv=document.getElementById( "divTmp" ); var oDiv=document.getElementById( "divOut" ); var cDiv=tDiv.innerHTML; oDiv.innerHTML=cDiv; |
jQuery方式:
1
2
3
4
|
var tDiv=$( "#divTmp" ); var oDiv=$( "#divOut" ); var cDiv=tDiv.html(); oDiv.html(cDiv); |
5) 动态切换CSS样式:
1
2
3
4
5
|
$( function (){ $( ".divDefault" ).click( function (){ $( this ).toggleClass( "divClick" ).html( "点击后的样式" ); }); }); |
jQuery主页最新版下载:
目前jQuery包括1.x系列和2.x系列,下载地址如下:
本文来源:jQuery概述,代码举例及最新版下载
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。