知道Jquery已经很长时间了，但从来没有应用过，今天打算学习一些简单的功能以及在日常项目中经常使用的效果。
官方网站：http://jquery.com/ 下载地址：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=
其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
1、首先来看一个click点击实例：
html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divclick").click(function(){alert("hello jquery");});
});
</script>
</HEAD>
<BODY>
<div id="divclick">1、鼠标点击时触发——点击此处</div>
<hr />
</BODY>
</HTML>
分析一下：
$(document).ready(function(){}); 当文档对象载入完成后的事件。相当于我们以往在body标签的写onload(function(){})。
$("#divclick").click(function(){alert("hello jquery");}); 对ID为divclick的对象的一个鼠标点击事件进行了处理，$("#divclick")等价于document.getElementById("divclick")。
跟以往的对比，1、获取一个对象不用document.getElementById("divclick")这样长的方法，只需$("#divclick").2、以往事件总是与函数放在dom对象里面写的如：<div id=”divclick” onclick=”a()”>点击</div> 现在只需$("#divclick").click()，对对象的事件处理放在javascript代码里，实现了javascrīpt代码与html代码分离。
2、动态为对象增加样式
css code:
<style>
.red{
color:red;
}
</style>
javascript code:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divcssclass").click(function(){$("#divcssclass").addClass("red");});
});
</script>
dom code:
<div id="divcssclass">2、点击后字体颜色变成红色——点击</div>
3、对象效果，show()、hide()方法
show():显示隐藏的匹配元素
hide():隐藏所有匹配的元素
例如：
javascript code:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divclickshow").click(function(){$("#divshow").show();});
$("#divclickhide").click(function(){$("#divshow").hide();});
});
</script>
dom code:
<span id="divshow" style="display:none">3、显示隐藏的匹配元素</span>
<span id="divclickshow">显示</span>
<span id="divclickhide">隐藏</span>
如果还想在显示或隐藏的时候来点动画的话：可以用show("slow")和hide("slow")看看效果。
对象的效果还有toggle()、slideDown(speed, [callback])、fadeIn(speed, [callback])等等。。。。在jquery的API手册里都有。
4、利用Jquery实现的菜单
先来认识将要用到的知识：
1、$("#mainNav > li")，匹配ID为mainNav的对象下面所有的子元素li。结果是一个数组对象。
2、li.each(function(i){})，上面说到获得的li是一个数组对象，此方法为遍历这个对象，function(i){}中的i为遍历对象的索引。
3、li.eq(i).hover()，当li数组成员索引为i时调用hover方法。
4、hover(over, out),鼠标移动到一个对象上面及移出这个对象的方法,over是鼠标移动到该对象时调用的方法，out是鼠标离开该对象时调用的方法。
css code:
<style type="text/css">
*{ margin:0px; padding:0px; list-style:none; }
body{ font-size:12px; }
.nav{ float:left; clear:both; margin:100px; display:inline; }
.nav li{ float:left; position:relative; }
.nav li a{ display:block; width:60px; padding:8px 0px 6px; text-align:center; color:#000; background:#ccc; text-decoration:none; }
.nav li a:hover { background:#666; color:#fff; }
.nav li ul{ position:absolute; display:none; }
.nav li ul li { float:none; }
.nav li ul li a{ background:#eee; }
</style>
javascript code:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var li = $("#mainNav > li"); //找到#mainNav中子元素li,得到数组li；
li.each(function(i){ //循环每一个LI
li.eq(i).hover(
function(){
$(this).find("ul").show(); //鼠标移到到上面时找到li里面的ul元素设置为显示
},
function(){
$(this).find("ul").hide(); //鼠标离开时找到li里面的ul元素设置为隐藏
}
)
})
})
</script>
dom code:
<BODY>
<ul id="mainNav" class="nav" >
<li><a href="#">首 页</a></li>
<li><a href="#">公司简介</a>
<ul>
<li><a href="#">员工介绍</a></li>
</ul>
</li>
<li><a href="#" >部门情况</a>
<ul>
<li><a href="#">技术部</a></li>
<li><a href="#">运维部</a></li>
</ul>
</li>
</ul>
</BODY>
5、Jquery实现ajax
如果手动创建XMLHttpRequest对象发送异步请求，过去我们要写一大段代码，如：
<script type="text/javascript">
var req = null;
function processReqChange() {
if (req.readyState == 4 && req.status == 200 ) {
var dobj = document.getElementById( 'htmlDiv' );
dobj.innerHTML = req.responseText;
}
}
function loadUrl( url ) {
if(window.XMLHttpRequest) {
try { req = new XMLHttpRequest();
} catch(e) { req = false; }
} else if(window.ActiveXObject) {
try { req = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
try { req = new ActiveXObject('Microsoft.XMLHTTP');
} catch(e) { req = false; }
} }
if(req) {
req.onreadystatechange = processReqChange;
req.open('GET', url, true);
req.send('');
}
}
loadUrl( “aaa.html”);
</script> ——最后将异步执行的结果，赋到id为htmlDiv元素之上。
因为jquery底层已经对ajax进行了现实，大多数情况下你无需直接操作XMLHttpRequest对象，在高层你只需调用$.get, $.post 等。如：
javascript code:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divclickajax").click(function(){
$.get("aaa.html",function(text){
alert(text);
});
});
})
</script>
dom code:
<div id="divclickajax">点击执行ajax请求</div>
aaa.html 内容：
ajax text!
jquery为我们的应用程序编写js脚本提供了许多方便，并且很好的现实了html代码与js分离，在用jquery的时候，我确实感觉到了它的优雅。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。