什么是JQuery？
jQuery 是一个JavaScript库，是一个由John Resig创建于2006年1月的开源项目。jQuery 凭借着简洁的语法和跨平台的兼容性，极大简化了JavaScript 开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发ajax的操作。其独特而又优雅的代码风格改变JavaScript 程序员的设计思路和编写程序的方式。简单地来说:
- jQuery 是一个优秀的 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
- jQuery 很容易学习。
JQuery的优点
（1）轻量级。jQuery非常轻巧，经过最好的压缩工具UglifyJS（代码混淆）压缩之后,大小保持在30KB左右。
（2）强大的选择器。jQuery支持CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。
（3）出色的DOM操作的封装。jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序时能够得心应手。
（4）可靠地事件处理机制。jQuery的事件处理机制吸收了Javascript事件处理函数的精华，使jQuery在处理事件绑定的时候相当可靠。
（5）完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax时能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
（6）不污染顶级变量。jQuery 只建立一个名为jQuery 的对象，所有的函数方法都在这个对象之下。
（7）出色的浏览器兼容性。jQuery 几乎支持所有的主流浏览器，同时jQuery 还修复了一些浏览器之间的差异。
（8）链式操作方式。jQuery 最具有特色的莫过于他的链式操作方式——即同时发生在同一个jQuery 对象的一组动作，可以直接连写而无需重复获取对象。
（9）隐式迭代。当用jQuery 找到带有“.myClass”类的全部元素，然后隐藏他们时，无需循环遍历每一个返回的元素。相反，jQuery 里的方法都被设计成自动操作对象集合，这使得大量的循环结构变得不再必要，从而大量的减少了代码量。
（10）行为层和结构层的分离。开发者可以使用jQuery 选择器选中元素，然后直接给元素添加事件。这种将行为层和结构层完全分离的思想，可以使jQuery 开发人员和HTML或者其他页面开发人员各司其职。同时，后期维护也非常方便。
（11）丰富的插件支持。jQuery 的易扩张性，吸引了来自全球的开发者来编写jQuery 的扩展插件。目前已经有成百上千的官方插件支持，而且还不断地有新的插件面世。
jQuery环境配置
jQuery不需要安装，只需将下载好的jQuery.js文件导入项目文件，想要在某个页面使用jQuery时，只需要在相关的HTML文档中引入该库文件的位置即可。
通常使用1.7或者1.9版本
要使用JQuery，需要先引用JQuery库，如下：
<head>
<script src="scripts/jQuery.js " type="text/javascript"></script>
</head>
在文件中引用JQuery.js后就可以使用了
JQuery里面的顶级变量
首先需要知道的是JQuery中的顶级变量$ ，输出到控制台，可以看到$是一个函数，
因此，$使用时可以 $(XXX) ,也可以 $.XXX
$(document).ready()函数
在编写一个jQuery代码时，必须以$(document).ready()开头，所有的jQuery代码都必须写在$(document).ready(){}里，格式如下: $(document).ready(function(){
//jQuery代码块
});
$(document).ready()括号中的所有代码都会提前执行，而不是在页面所有内容加载完毕之后才执行事件。它允许用户在第一眼看到元素时，就能立即看到元素产生的效果。
为了书写简单，可使用$(function(){......})来代替$(document).ready()函数，作为它的缩写形式，缩写方式如下:
$(function(){
//jQuery代码块
});
JQuery代码示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn"></button>
<script>
$(document).ready(function (){
$("#btn").html("按钮").css({
backgroundColor:"red"
}).click(function (){
alert("1");
});
});
</script>
</body>
</html>上面代码是非常简单的一个代码示例，操作button，修改button的HTML内容，添加背景色，添加点击事件等，可以看到其完善的事件处理机制，链式操作，隐式迭代以及强大的选择器。
在写jquery代码的时候注意元素的初始化问题
js里面的window.onload，在JQuery中是
$(document).ready(function () {
/*代码*/
});
简写方式为
$(function () {
/*代码*/
});
JQuery的选择器
jQuery选择器分为:基本选择器、层次选择器、过滤选择器和表单选择器4大类。在过滤选择器中又分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6类。
一、基本选择器：基本选择器是jQuery中使用最多的选择器，它又元素Id、class、元素名、多个元素符组成。
选择器 | 功能 | 返回值 |
#id | 根据给定的ID匹配一个元素 | 单个元素 |
element | 根据给定的元素名称匹配所有元素 | 元素集合 |
. class | 根据给定的类匹配元素 | 元素集合 |
* | 匹配所有元素 | 元素集合 |
selector1,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 元素集合 |
二、层次选择器：层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系
选择器 | 功能 | 返回值 |
ancestor descendant | 根据祖先元素匹配所有的后代元素 | 元素集合 |
parent > child | 根据父元素匹配所有的子元素 | 元素集合 |
prev + next | 匹配所有紧接在prev元素后的相邻元素 | 元素集合 |
prev ~siblings | 匹配prev元素之后的所有兄弟元素 | 元素集合 |
注意：siblings()方法与prev ~siblings的区别在于，前者获取所有的相邻元素，不分前后，后者仅获取标记元素后面所有的相邻元素，不能获取前面部分。
三、过滤选择器：过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头
简单过滤选择器：
选择器 | 功能 | 返回值 |
first()或 ：first | 获取第一个元素 | 单个元素 |
last（）或：last | 获取最后一个元素 | 单个元素 |
：not(selector) | 获取除给定选择器外的所有元素 | 元素集合 |
：even | 获取所有索引值为偶数的元素，索引号从0开始 | 元素集合 |
：odd | 获取所有索引值为奇数的元素，索引号从0开始 | 元素集合 |
：eq(index) | 获取指定索引值的元素，索引号从0开始 | 单个元素 |
:gt(index) | 获取所有大于给定索引值的元素，索引号从0开始 | 元素集合 |
：It（index） | 获取所有小于给定索引值的元素，索引号从0开始 | 元素集合 |
：header | 获取所有标题类型的元素，如h1,h2,h3... | 元素集合 |
：animated | 获取正在执行动画效果的元素 | 元素集合 |
内容过滤选择器：
选择器 | 功能 | 返回值 |
：contains（text） | 获取包含给定文本的元素 | 元素集合 |
：empty | 获取所有不包含子元素或者文本的空元素 | 元素集合 |
：has（selector） | 获取含有选择器所匹配的元素的元素 | 元素集合 |
：parent | 获取含有子元素或者文本的元素 | 元素集合 |
可见性选择器：
选择器 | 功能 | 返回值 |
：hidden | 获取所有不可见元素，或者type为hidden的元素 | 元素集合 |
：visible | 获取所有的可见元素 | 元素集合 |
子元素过滤选择器：
选择器 | 功能 | 返回值 |
：nth-child(eq||even||odd||index) | 获取每个父元素下的特定位置元素，索引号从1开始 | 元素集合
|
：first-child | 获取每个父元素下的第一个子元素 | 元素集合 |
：last-child | 获取每个父元素下的最后一个子元素 | 元素集合 |
：only-child | 获取每个父元素下的仅有一个子元素 | 元素集合 |
表单对象属性过滤选择器：
四、表单选择器
下面代码是相关选择器的使用示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn" class="btn1"></button>
<ul>
<li>水果</li>
<li>蔬菜
<ol>
<li>西红柿</li>
<li>黄瓜</li>
<li>青菜</li>
</ol>
</li>
<li class="li3">甜点</li>
<li>饮料</li>
<li>海鲜</li>
</ul>
<p></p>
<div>
<span>小猫吃肉肉</span>
</div>
<input type="button" class="btninput" value="按钮1" style=" display: none;"/>
<input type="button" class="btninput" value="按钮2" />
<input type="checkbox" >
<input type="checkbox" checked>
<input type="radio" checked>男
<input type="radio">女
<input type="text">
<select>
<option>西安</option>
<option>渭南</option>
</select>
<script>
//1.基本选择器
console.log($("#btn"));//id选择器
console.log($(".btn1"));//类名称选择器
console.log($("*"));//选择所有元素
console.log($("button"));//元素名称选择器
//2.层次选择器
console.log($("ul li"));//输出所有的li 包括ol下的li
console.log($("ul>li"));//输出ul的li 不包括ol下的li
console.log($(".li3+li"));//输出li3后面相邻的li 如果li3后面没有li 则输出为空 输出的innerHTML"饮料"
console.log($(".li3~li"));//输出li3后面所有的li
//3.过滤选择器
//简单过滤
console.log($("ul>li:first"));//输出第一个元素
console.log($("ul>li:last"));//输出最后一个元素
console.log($("ul>li:even"));//输出索引号为偶数的元素
console.log($("ul>li:odd"));//输出索引号为奇数的元素
console.log($("ul>li:gt(1)"));//输出所有索引大于给定元素索引值的元素
console.log($("ul>li:lt(2)"));//输出所有索引小于给定元素索引值的元素
console.log($("ul>li:eq(2)"));//输出给定索引值的元素
console.log($("ul>li:not(.li3)"));//输出除给定选择器外的所有元素
//内容过滤
console.log($("li:contains('甜点')"));//输出给定文本的元素
console.log($("p:empty"));//输出所有不包含子元素或文本的空元素
console.log($("div:parent"));//输出含有子元素或文本的元素
console.log($("div:has('span')"));//输出含有选择器所匹配的元素的元素
//可见性选择
console.log($(".btninput:visible"));//获取所有可见的元素 按钮2
console.log($(".btninput:hidden"));//获取所有不可见的元素 按钮1
//属性选择器
console.log($("button[id][class]"));
console.log($("button[id='btn'][class='btn1']"));
//子元素过滤选择
console.log($("ul>li:nth-child(2)"));//蔬菜
console.log($("ul>li:first-child"));//水果
console.log($("ul>li:last-child"));//海鲜
console.log($("div>span:only-child"));//获取每个父级元素下的仅有一个子元素 小猫吃肉肉
//表单元素属性过滤
console.log($("input[type='checkbox']"));//输出所有类型为checkbox的元素 2
console.log($("input[type='checkbox']:checked"));//1
console.log($("input[type='radio']"));//输出所有类型为radio的元素 2
console.log($("input[type='radio']:checked"));//1
//4.表单选择器
console.log($("input:checkbox"));//输出所有类型为checkbox的元素 2
console.log($("input:radio"));//输出所有类型为radio的元素 2
console.log($(":input"));//获取所有input select textarea
console.log($("input:text"));//获取所有单行文本框
</script>
</body>
</html>