知道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的时候，我确实感觉到了它的优雅。
分享到：
相关推荐
### 初学jQuery必用书-锋利的JQuery #### 1.1 jQuery简介 jQuery自2006年由John Resig创建以来，迅速成为最受欢迎的JavaScript库之一。它以其简洁、高效的特点赢得了广大开发者的青睐。jQuery的核心优势在于简化了...
JQuery十个适合初学者实例--对初学Jquery的朋友来说还是不错了，通过实例学习，当初我自己就是通过这个学习了Juery，希望对你也有用处。JQuery第一课-tab标签页、JQuery第二课-多张图的无缝滚动、JQuery第三课-图片...
初学jQuery的朋友，基本上都会问同一个问题“什么是jQuery？”等类似的问题，理解这个问题对于后面的学习会起到促进作用。以下是我整理出的大家常问的几个问题： 1. 什么是jQuery？ 2. 什么是类库？ 3. jQuery与...
jquery阻止冒泡的所有方法，适合初学jquery者，是一篇很好的学习文稿
但但ASP的网站却很多，因此对于学习使用ASP的人来说，有个现成的例子（尤其对于初学jquery的人来说）则十分有必要。因此，本人纯手写了一个asp+ajax(jquery)的例子，送给用ASP来做网站的朋友们以为参考。
**jQuery初学者指南** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。对于初学者来说，掌握jQuery的基本用法是迈向Web开发进阶的重要一步。本篇文章将重点讲解...
HTML5和jQuery是现代网页开发中的重要技术，尤其对于初学者来说，它们是构建交互式网页和游戏的基础。本教程的"最简单的html5+jquery游戏程序初学必选"是一个理想的学习起点，旨在帮助新手快速掌握这两项技术在游戏...
在“我的小Demo各种案例”这个压缩包中，包含了作者初学编程时制作的各种实践示例，主要涉及了几个关键的技术点：省市区三级联动无刷新、初学Jquery的应用以及Excel的上传功能。下面将对这些知识点进行详细的阐述。 ...
- **Grant Palin**（Blogger）：对于初学jQuery的人来说，这本书涵盖了框架的常见用途，示例贴近实际，便于理解和学习。 - **Rich Strahl**（Blogger）：本书内容丰富、条理清晰，能够让读者轻松快速地掌握jQuery的...
这个106个实例代码集专为jQuery初学者设计，旨在帮助初学者快速掌握jQuery的核心概念。 **jQuery选择器** jQuery的选择器是其强大功能的关键所在。"jQ学习第一季"可能涵盖了ID选择器（如`$("#id")`）、类选择器...
### Jquery初学者下载资源知识点解析 #### 一、引言与概述 ##### 1.1 jQuery简介 - **定义**：jQuery是一个免费开源的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作，极大地提高了前端...
《jQuery初学实例代码集》是一份专门为初学者设计的学习资源，它包含了丰富的实例代码，旨在帮助初学者快速掌握jQuery的基本用法和常见操作。jQuery是一个高效、简洁的JavaScript库，它极大地简化了JavaScript的DOM...
**jQuery初学代码集** jQuery是一款广泛应用于网页开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。对于初学者而言，掌握jQuery能够极大地提高开发效率，让复杂的JavaScript代码变...
### 15天学会jQuery初学 #### 第0天：认识jQuery - **What**：jQuery是一个优秀的JavaScript库，能够让我们仅用少量的代码就能创造出美观的页面效果。它的出现让JavaScript变得更加有趣和易于使用。 - **Why**：...
**jQuery初学实例代码集详解** jQuery是一款广泛应用于Web开发的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个"jQuery初学实例代码集"是一个非常适合初学者的资源，它...
初学者应该尝试自己动手编写简单的JavaScript程序和使用jQuery实现动态效果，这样不仅可以巩固理论知识，还能提升实际操作能力。在遇到问题时，可以参考笔记或搜索相关资料，不断迭代和改进代码，逐步成为一名熟练的...
**jQuery初学者必读** jQuery是一款非常流行的JavaScript库，它极大地简化了JavaScript代码，使得网页交互变得更加简单。对于初学者来说，理解并掌握jQuery的基本概念和常用方法是至关重要的。 ### 1. jQuery简介 ...
《jQuery初学指南》 jQuery，作为一款强大的JavaScript库，为网页开发提供了便捷的DOM操作、事件处理、动画设计和Ajax交互。对于初学者来说，理解并掌握jQuery的基本概念和用法是至关重要的。以下是对jQuery核心...