JQuery是什么？
Jquery是一个基于javascript的框架，等于说把javascript封装了一下。需要在html中链接了JQuery的文件才能用，你查看源代码，就能看到链接Jquery的代码：
<script language="javascript" type="text/javascript" src="https://www.xxx/js/jquery-1.8.3.min.js"></script>
学JQuery跟学javascript有什么区别，是不是要精通javascript才能学JQuery?
jquery是基于javascript，所以可以说写jquery脚本有一半是在写javascript，但jquery又有很多特性是它独有的。jquery是封装了javascript，是为了简化javascript脚本而存在，所以没必要精通javascript，javascript中很多的函数在jquery中都有更简单的替代方式。
开始入门吧
入门之前，先简单地看一下html+css+javascript的语法，再来看这篇文章，这会让你更好地理解代码。Jquery最大的特点是方便对DOM的封装。什么是DOM？DOM就是操作html文件的树结构的方法，我们看图片。
从这个图很明显的就能看出，实际上html文件中每一个标签都是一个节点，整个html文档组成了一棵树。
在javascript中，我们有一些函数可以访问这些节点，并对他们进行增加、删除、修改。比如，getElementById(xxx)就是获得id为xxx的对象，它可能就是一个div标签。我们用面向对象的思想来看，实际上获得的是一个id为xxx的div对象。这个对象实际上就是从<div id=xxx>到相应</div>这所有的内容。
通过这个对象的相关方法就能很方便地直接操作html文件。
在Jquery中，DOM变得更加简单。
选择器
要操作html文档，就用到选择器。
举个很简单的例子，$(“div#exm”) 选择了id为exm的div元素。如下代码能让“测试1”这三个字通过点击按钮显示在html中：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div#test").html("测试1");
});
});
</script>
</head>
<body>
<button type="button">点击我</button>
<div id="test"></div>
</body>
</html>
大家可以把代码放进http://www.w3school.com.cn/tiy/t.asp?f=html_basic运行，查看效果。
来分析一下这一小段Jquery代码。首先，$(document)，这个选择器选择的是整个文档。ready是一个事件，表示等整个文档加载完成后再运行这段javascript。一般Jquery的代码都放在这个块里面。$(“botton”)选择了文档中第一个
所以，点击了按钮后，<div id="exm"></div>中就被加入了“测试1”三个字。
到此为止，我们一共接触到如下几个概念：
选择器：$(xxx)
事件：ready()、click()
文档操作方法：html()
大家应该就了解个大概了。通过Jquery，我们就可以操作html中任何标签内的任何内容。我来列举几个。
修改css
通过css方法可以操作css。比如如下代码：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div#test").css("color", "red");
});
});
</script>
</head>
<body>
<button type="button">Click me</button>
<div id="test">测试2</div>
</body>
</html>
将刚才的代码改了一点，看这句话：$(“div#exm”).css(“color”, “red”); 将id=test的div元素的css样式color值改成red。我们点击了按钮后就能看到，“测试2”三个字变成了红色。
隐藏和显示和动画效果
Jquery自带了一些动画效果，通过一些参数就能显示出来。看如下代码
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div#test").hide('slow');
});
});
</script>
</head>
<body>
<button type="button">Click me</button>
<div id="test">测试3</div>
</body>
</html>
点击了按钮后，“测试3”这三个字慢慢滑动离开了，很像幻灯片是吧？我也只是改了一句话：$(“div#exm”).hide(‘slow’); 将id=test的div元素隐藏，并且是慢慢隐藏，因为有’slow’参数。
hide方法就是隐藏一个元素所有内容的方法。它有一个参数，表示隐藏的快慢。
当然有hide方法就有show方法，用法一样。还有一个方法toggle，表示在隐藏和显示中切换。有这三个方法，我们很容易弹出一个菜单或让一个不要的内容消失，而且有动画效果。
当然，Jquery还支持更多动画效果，有很多方法，大家可以自己去探索。
改变元素大小
我们可以用Jquery的height()和width()方法改变一个元素的大小。这个工作也可以用css()方法完成。通过这个方法，我们可以动态改变我们网站的元素，来适应用户浏览器的分辨率。
更多事件：文本框获得、失去焦点
在很多网站填写表单的地方都用到了这个效果：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":text").focus(function(){
$(":text").val("");
});
});
</script>
</head>
<body>
<input type="text" value="请填写用户名" style="color: #999;"/>
</body>
</html>
当鼠标点击输入框时“请填写用户名”这几个字消失掉。这就是focus事件，它表示某个控件获得焦点。看看代码，用到了一个选择器$(“:text”)，它表示所有type=text的input元素。当该元素获得焦点后，执行了val方法。这个方法就是改变input标签的value属性，也就是改变显示在文本框内的内容。
选择器详解和css语法
上面只提到了一个id选择器，选择id=xxx的某元素。其实Jquery的选择器可谓多种多样，对css比较熟悉的同学就很好学了，因为css的语法Jquery选择器基本都能用。
比如，css里面，定义一个类的样式的方法：.XXX{}，而在Jquery里选择一个class=XXX的元素的方法：$(“.XXX”)。
举一些常用的例子，详细的选择器说明在w3school里都有列出。
这只是我举的一些例子，基本上选择器Jquery和css类似，所以对css比较熟悉的人可以很快掌握Jquery的选择器语法，这也是Jquery流行的原因之一，很好学习，一通百通。
事件详解
在很多Jquery代码中，我们总是能看到是这样的形式：
$(document).ready(function(){
//Jquery代码
});
所有的代码被套在了最外层的ready中。我上次也提到了，ready是一个事件。我们上面说的选择器，它选择某元素的作用，其实就是为了完成后面的工作。看我们这个代码，$(document)选择的是document对象，这个对象学javascript应该很清楚，指的就是整个html文档。选在选在到了对象，这个对象有一个方法ready();
ready是一个事件。事件是什么概念，和很多编程一样，事件是由用户在执行相应的操作后自动触发的一个过程，我们可以给某事件绑定一个处理函数，当用户触发了这个事件后，就能执行我们绑定的函数。
ready()是一个事件绑定函数，它中间那个function(){}就是我们为ready事件绑定的函数。ready事件在对象加载完成后触发，我们前面选择的是document对象，所以这个ready就是指整个文档加载完成后触发的事件。
所以整段代码意思就是为document对象的ready事件添加响应函数function(){}，这个函数里面添加我们希望Jquery做的事情。当文档加载完成后，执行此函数，相当于执行我们的代码。
我列举一些Jquery中常用的事件及其绑定函数：
click 鼠标点击事件 （最常用，当鼠标点击某对象时触发此函数）
change 对象被改变（如input框中写入、修改、删除文字时触发此事件）
focus 对象获得焦点（如光标进入textarea框触发此事件）
blur 对象失去焦点（与focus事件相对）
load 对象加载完成（如图像被加载完成时触发此事件）
error 对象遇到错误 （如图像输入了一个错误的地址，没有成功加载）
mousemove 鼠标移动 （当鼠标移动时触发此事件）
试试mousemove事件，运行这段代码：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
});
</script>
</head>
<body>
<p>鼠标位于坐标： <span></span>.</p>
</body>
</html>
可以看到，鼠标移动后就能输出当前鼠标所在的坐标。其中function有一个参数e，每个事件函数都有一个参数，这个参数就是指该事件本身。（当然这个参数可以省略），e.pageX和e.pageY就是指鼠标以后后鼠标所在的位置。
html操作详解
选择器的作用我说了，就是完成为了后面的操作。除了为选择到的对象添加一个事件响应函数外，还能直接操作此对象，这就是我们的html操作。
我也列举一些常用的html操作方法（更详细地在w3school中查看）
通过这些方法，我们能动态地对html页面进行操作。再结合ajax，就可以动态地向服务器请求内容，并在不刷新页面的情况下更新页面中一部分。
什么是ajax
ajax指异步javascript。相信很多同学在百度百科里也看到了它的相关介绍，不过说的挺复杂，各种各样的专业术语。如果只是基础，我们这样理解ajax好了：利用ajax可以动态地以javascript的方式向服务器请求数据，并接受服务器发回的数据，这个过程浏览器可以做其他的任何工作，可以不离开页面，不刷新。
具体来说呢？我举个小例子，现在有一个注册表单，要用户填写用户名。一般都会有一个“检查是否已被占用”链接，用户点击链接后，浏览器打开一个新页面，向服务器发送一个请求，在数据库里咨询看用户名是否已存在，得到结果后返回到页面里提示用户。如果不用ajax，大家可以想象，点击了链接，浏览器势必要打开新页面，给用户带来不便。但是运用ajax，用户点击链接后，不打开新页面，而由javascript在后台向服务器获取结果，然后用一个提示框弹出提示用户，用户在这个过程中还可以继续填写表单，两个过程互不影响。页面不会跳转，也不会刷新，用户之前填写的内容不会丢失。
这就是所谓的异步，类似于多线程。
甚至我们做一个网站，放上背景音乐，网站中一切链接都由ajax完成（比如点击了一片文章，ajax向服务器请求文章内容，然后用我上次说的Jquery html操作将网页中的一部分进行修改，这样文章就放入了页面而并不刷新页面），这样我们的音乐就一直不会被刷新。
所以说ajax最大的优点，就是在不更新整个页面的情况下对部分内容进行修改、维护，这样服务器发送的数据少，减少了服务器的负担。
简单的ajax获取信息
来看看我们用Jquery怎么去结合ajax。
首先看看怎么获取服务器上一个txt文件：使用load()方法
(因为ajax使用同源策略，所以在哪个网站运行代码就只能请求该服务器上的内容，我请求的是w3school中的一个txt文件，大家把代码放在http://www.w3school.com.cn/tiy/t.asp?f=html_basic运行才能看到效果)
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('http://www.w3school.com.cn/example/jquery/demo_test.txt');
})
})
</script>
</head>
<body>
<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>
</body>
</html>
大家可以看到，点击按钮后文本被改变。这其中我请求的就是http://www.w3school.com.cn/example/jquery/demo_test.txt文件。看到Jquery代码，它为按钮绑定了click事件，点击按钮后，执行$(‘#test’).load(‘http://www.w3school.com.cn/example/jquery/demo_test.txt‘); 也就是请求这个文本文件内容，并将id=test的元素内容改变成请求到的文本。
这是最简单的ajax，简单地请求一个文本文件。最常见的，我们是向一个脚本，通过get或post请求一个html或json。
ajax使用get请求向服务器请求html内容
又回到我们开始的那个例子，判断用户名是否存在。
比如我们服务器上有这样一个文件nameexists.php:
<?php
$name = $_GET['act'];
/*
*
*在数据库中咨询用户名是否存在
*
*/
$re = true; //假设用户名存在
if($re){
echo "用户名 $name 已存在";
}else{
echo "恭喜您，该用户名可以使用";
}
?>
然后我们浏览器表单如下：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function sub(){
var name = $("#name").val();
$.get("nameexists.php", {
"act": name
}, function(data, status){
if (status) {alert(data);}
});
}
</script>
<form>
<input type="text" id="name" />
<input type="button" value="验证" onclick="sub();"/>
</form>
大家试验即可看到，当点击“验证”后，弹出提示框
并没有刷新页面，我们填写的内容依旧在表单中。这就是向服务器请求了html，返回的“用户名…已存在”就是一个html文本，最后体现在用户面前。
我们看Jquery代码。这是一个javascript函数，当点击按钮时执行此函数。首先选择器选择了id=name的文本框，用val()方法获取其值，并赋值给name变量。
看后面，用到了get方法。这个方法是一个全局的方法，所以写成$.get，这个方法有三个参数：$.get(url, data, callback);
url是我们要请求的地址，data是我们要传递的参数，写成{‘索引1’:’参数2’,’索引2’:’参数2’…}的形式，也可以把他们直接写在url后面: url?a=1&b=2… （只适用于get请求）。第三个参数callback是一个回调函数，这个函数在获取到数据后运行，也就是说收到的数据可以在这个函数中处理。函数原型：function(data,status,xhr)
data是获得的返回数据，status是状态（成功或失败），xhr是XMLHttpRequest对象（我这里用不上）。
所以大家可以看到，我直接把获得的返回数据data弹出来：alert(data)。而我们看到php，其实这个data就是echo输出的内容。
类似于get方式，post()方法参数都与get相同，我就不举例子了。这是获取的html内容，其实在javascript中，更多的是获取json，再通过javascript代码处理json来显示给我们用户看。
什么是json
又到了普及概念的时候。json是一种javascript原生的数据交换格式。
在互联网上，最普遍的就是数据交换。比如在QQ上，A向B发送一个数字，一个字母或一句话，来告诉B某些信息。但是数字、字符串很好传递，有些对象却并不那么容易传递，比如数组。我们怎么把一个数组对象通过QQ发送给别人？
有些人就说，这很简单啊，在php里，不就是“array(1=>’a’,2=>’b’,3=>’C’);”我就把这个字符串给B发送过去，B一看就知道数组是怎么构成的了。对，其实这就是一种数据交换格式，不过这仅仅是php里定义数组的语法，如果B不懂php，他也许就看不懂你给他发送是这个是什么意思。
所以就诞生了json和xml两种通用的数据交换格式。我不说xml也不比较二者，只来说说json。因为json是从javascript发展出来的，所以十分适合javascript。比如刚才的数组，用json写出来：
{
"1": "a",
"2": "b",
"3": "C"
}
这样的json能在任何javascript中被解析成一个json对象，我们可以通过json.xxx来得到相应内容。
ajax的json方法
Jquery中从服务器加载json数据的方法是：$.getJSON
它的参数与get()方法完全一样，但是服务器返回结果data应该是一个json格式的字符串（如果不是就出错）。
我说了json是一个通用的数据交换编码，所以在php里也有方法把对象处理成json字符串。在php5.2以上的版本，有了一对函数json_encode()和json_decode()，分别对php中对象进行json格式的编码和解码。
举个没什么营养的例子。
服务端：
<?php
$arr = array('name'=>'name', 'url'=>"url", 'PR'=>0);
echo json_encode($arr);
?>
浏览器：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function sub(){
$.getJSON("test2.php", function(data, status){
if (status){
$("div").html(data.name + ' | ' + data.url + ' | ' + data.PR);
}
});
}
</script>
<form>
<div></div>
<input type="button" value="提交" onclick="sub();"/>
</form>
大家可以试验，点击了按钮后，打印出了php中定义的数组内容。php端两行代码，定义了一个数组，并用json_encode把数组做成一个json编码的字符串输出。
再看Jquery代码，大家会发现，实际上获得的内容是一个对象，我们用点号访问对象中内容：data.name, data.url, data.PR.
这只是json的简单事例，没什么实用性。大家可以试想，假如图书馆有个图书检索系统，用户向服务器请求书名，服务器查询数据库后把所有符合条件图书信息做成一个二维数组，再用json形式发送给浏览器，Jquery把他们美化后输出，过程并不复杂。
一个鼠标移动上去就变换颜色的表格
<html>
<head>
<title>表格1</title>
<style>
table.hovertable {
font-size:13px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
width: 100%;
}
table.hovertable th {
background-color:#c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
text-align: left;
}
table.hovertable tr {
background-color:#d4e3e5;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".hovertable td").mouseover(function(event){
event.target.parentNode.style.backgroundColor = "#F0FFFF";
});
$(".hovertable td").mouseout(function(event){
event.target.parentNode.style.backgroundColor = "#d4e3e5";
});
});
</script>
</head>
<body>
<table class="hovertable">
<tr><th>标题</th><th>内容</th><th>时间</th></tr>
<tr><td>1</td><td>aaa</td><td>15:30</td></tr>
<tr><td>2</td><td>bbb</td><td>17:40</td></tr>
<tr><td>3</td><td>ccc</td><td>13:35</td></tr>
<tr><td>4</td><td>ddd</td><td>08:53</td></tr>
</table>
</body>
</html>
大家依旧是放到http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide 运行，可以看到，当鼠标移动到相应的行上的时候，该行变色，当鼠标移走时，颜色恢复。
这个效果相信大家在很多地方见到过，我这里运用了Jquery和HTML DOM两种方法结合。这就是我要说的一个重点。
我们看Jquery代码：$(".hovertable td").mouseover，选择了class=hovertable的元素的td子元素，为他的mouseover事件绑定一个函数。td元素就是表格中的一个格子，mouseover事件指“鼠标移动到上面”。也就是说，当用户鼠标移动到每个格子上，都会触发这个事件，进而执行函数中的代码。
看到这个函数中的代码，event.target.parentNode.style.backgroundColor = "#F0FFFF";
event是什么？我们可以看到，function(event)，所以event是这个事件绑定函数的一个参数，它指的就是“鼠标掠过”事件对象。
为什么要用这个event？因为我们可以看到，鼠标移动到某一行上，只有这一行的颜色会发生变化，我们必须知道鼠标移动到哪一行上了，所以必须获得这个event对象。
event对象有如下一些方法或属性：
大家可以看到，我用到的就是target属性，event.target指的就是触发mouseover事件的DOM元素，在这里就是td。
所以在函数中，我们得到了鼠标所在的元素。在这里，我来说一下我们获得的这个DOM对象。
在Jquery中，有对html操作的一些函数，比如$(xx).html()，获取某元素内的内容。而在单纯的javascript中，也有对html操作的DOM函数，比如xx.innerHTML，它也是获取某元素中的内容。而在实际运用中，这两种函数是不能互相使用的。比如我们一个Jquery对象：$(“div#test”)，它不能用$("div#test").innerHTML来获取内容，只能用$("div#test").html()来获取。
同样的，对于DOM对象event.target，也是不能使用Jquery的方法的。比如，有的同学直接使用event.target.css('background-color','red')，想这样更改它的背景颜色。这样浏览器是会报错的，错误是td对象不含有css方法。
所以大家可以看到，我使用的是DOM中的方法event.target.parentNode.style.backgroundColor，首先用parentNode获得td元素的父元素tr元素（因为我是要一行都改变颜色，而不是只让鼠标所在的格子改变颜色），再用style属性，改变tr元素的样式。这里说一下，style下面有很多属性，比如这里的backgroundColor是指css中的'background-color'，一般都是css中的名字，其中第二个单词首字母变成大写。
所以这句话也就是改变了tr的样式，将css中的background-color改成#F0FFFF。
第二个函数也一样，mouseout方法是指“鼠标离开”，如果鼠标移开，就把颜色改回以前的颜色。这样就完成了我们这个“变色表格”的制作。
一个选择商品系统
我们继续来强化刚才制作的这个表格。
<html>
<head>
<title>表格1</title>
<style>
table.hovertable {
font-size:13px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
width: 100%;
}
table.hovertable th {
background-color:#c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
text-align: left;
}
table.hovertable tr {
background-color:#d4e3e5;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".hovertable td").mouseover(function(event){
event.target.parentNode.style.backgroundColor = "#F0FFFF";
});
$(".hovertable td").mouseout(function(event){
event.target.parentNode.style.backgroundColor = "#d4e3e5";
$(".hovertable td").click(function(event){
var name = $(event.target.parentNode).children("td:first").html();
var price = $(event.target.parentNode).children("td:last").html();
$(event.target.parentNode).remove();
$("#buy").append('<p>' + name + "/" + price + '元</p>');
});
});
</script>
</head>
<body>
<tr><th width="40%">商品</th><th width="40%">类别</th><th>价格</th></tr>
<tr><td>肥皂</td><td>日用品</td><td>5.5</td></tr>
<tr><td>拖把</td><td>清洁用品</td><td>25.0</td></tr>
<tr><td>硬盘</td><td>电子产品</td><td>450.0</td></tr>
<tr><td>酸奶</td><td>奶制品</td><td>9.9</td></tr>
<tr><td>苹果</td><td>水果</td><td>2.5</td></tr>
</table>
<div id="buy" style="border: 1px solid #999;margin-top: 10px;text-align: center;">
<h4 style="color: red;">购物车</h4>
</div>
</body>
</html>
大家运行后可以看到，这次我做了一个类似网上购物时选购商品的页面：
每点击一个商品，我们就把这一行从表格中删除，并加到下方的“购物车”框中。其实改动并不大，表格还是刚才的表格，Jquery中增加了一个函数：
$(".hovertable td").click(function(event){
var name = $(event.target.parentNode).children("td:first").html();
var price = $(event.target.parentNode).children("td:last").html();
$(event.target.parentNode).remove();
$("#buy").append('<p>' + name + "/" + price + '元</p>');
});
就是一个当某个格子被点击时，执行的代码。看第一行，我们会发现，event.target.parentNode我认识，但为什么要把它放在$()中间？
这就涉及到DOM对象转换成Jquery对象的过程。大家用Jquery多了就会喜欢Jquery的简洁，但DOM对象并不能使用Jquery的方法，所以Jquery其实给了大家一个方式，能把DOM对象转换成Jquery对象，也就是把DOM对象直接放到$()中即可。
比如我们一般写的$(document).ready，其实就是把DOM对象document转换成了Jquery对象，使用Jquery的方法ready。
这里也一样，把event.target.parentNode转换成了Jquery的对象。后面一个children其实是Jquery下我没讲到的“遍历函数”。遍历函数其实就是遍历某个对象，比如我们一个table对象，要取其中每行的内容，就可以用each方法遍历。
children方法用的也很多，意思是取满足条件的某子元素。大家可以看到，children(“td:first”)，就是取第一个td元素。也就是这一行的第一个格子，再用html()取到其内容，保存到变量name里。
var price = $(event.target.parentNode).children("td:last").html();也是一个道理，取最后一个格子内容。
于是这里就得到了我点击的这一行的商品名和价格。然后用$(event.target.parentNode).remove();把这一行移除，再用append把内容加到“购物车”里。就制成了这个简单的选购商品的页面。
本文内容转自：离别歌
