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