jQuery的优点
核心理念：写的更少，做的更多。（write less,do more）。
轻量级，标准版和mini版，mini版简化了函数的名称，减小了源码的大小。
语法便捷，可提高开发效率。
不用在html中插入一堆js来调用命令了，只需要定义id即可。
网上有很多优秀的插件可以选择（12306的日历就是一个）。
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。 但是需要注意：jQuery对象虽然是包装DOM对象产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不调用jQuery的方法。
DOM对象转为jQuery对象
var user = document.getElementById("username");//获取DOM对象
var $username = jQuery(user);//通过DOM对象获取jQuery对象，jQuery对象变量名建议使用$***
jQuery对象转为DOM对象
var $user = jQuery("#username"); //通过选择器获取jQuery对象
var user = $user[0];//jQuery对象是一个数组对象，获取数组的第一个索引的值即是DOM对象
引入jQuery库
<script type="text/javascript" src="jQuery的js文件位置"></script>
注意：
①引入库不能再body标签以内或者以后，jQuery的文件位置一般采用相对寻址，不含有中文的路径。对于不同文件夹中，src="../jQuery库所在文件夹名/jQuery文件名.js"。
②导入的这个script标签中不能写代码，需要新建一个新的script标签才能写代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>获取jQuery对象.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<input type="text" value="mlgg" id="username" />
<script type="text/javascript">
//js执行时有加载顺序，所以我们把script标签放在body中而不是head中（看补充内容）
/* jQuery获取数据：
* 语法：$("选择器") 和jQuery("选择器") 相同
*/
//获取jQuery对象
var username = $("#username") ;
username.val(); //获取username的value值
//通过JavaScript获取value值
var usernameDOM = document.getElementById(username) ;
var usernameDOM_value = username.value ;
//将DOM对象转换为jQuery对象
var $username = $(usernameDOM) ;
//将jQuery对象转换为DOM对象
//jQuery对象内部可以以数组的形式存放所有数据
//方法一：
var usernameDOM2 = $username[0] ;//这里因为只有一个input标签，所以这里0指的就是这个标签
//方法二：
var usernameDOM3 = $username.get(0) ;
</script>
</body>
</html>
选择器
jQuery提供的强大选择器，分为：
1、基本选择器
2、层次选择器
3、基本过滤选择器
4、内容过滤选择器
5、可见度过滤选择器
6、属性选择器
7、子元素选择器
8、表单选择器
9、表单对象属性选择器
基本选择器
#id , id选择器，<xxx id=""> 通过id值获得元素
element ， 标签选择器 ， <xxx>通过标签名获取元素
.class ， 类选择器 ， <xxx class="">通过class值获得元素
s1 , s2 , ... 多选择器 ， 将多个选择器加在数组中
* 通用选择器 ， 获取所有东西
层次选择器
层级：
ancestor descendant A B ， 获取A元素内部所有的B后代元素（爷孙关系，获取的是所有的后代）
parent > child A>B , 获取A元素内部所有的B子元素（父子关系）
prev + next A+B ， 获取A元素后面的第一个兄弟B元素（兄弟关系）
prev ~ siblings A~B , 获取A元素后面的所有的兄弟B元素（多兄弟关系）
过滤选择器
格式： ":关键字"
:first 第一个
:last 最后一个
:eq(index) 获取指定索引的
:gt(index) 大于指定索引的
:lt(index) 小于指定索引的
:even 偶数索引的 例如：查找表格1，3，5行，索引是0，2，4。
:odd 奇数索引的
:not(selector) 去除所有与指定选择器匹配的元素
:header 获得所有标题元素<h>
:animated 获得所有动画的
:focus 获得焦点的
过滤选择器的问题：有很多input标签，包括文本，按钮......现在要选中所有的按钮的input，怎么选？
方法一：$('input[type="button"]')可以获取类型为button的input
绑定事件： $('input[type="button"]').blur(这里写一个失去焦点的函数).focus(这里写一个得到焦点的函数)
方法二：使用jQuery的on()函数进行绑定：
$("input[type='button']").on("blur focus",function(){ });这种将事件并列写的方法可以使定义的函数同时适用于blur和focus两个事件，典型应用就是文本框提示字符的消失与出现。
内容选择器
:empty 当前元素是否为空（是否有标签体--子元素、文本）
:has(...) 当前元素是否含有指定元素
:parent 当前元素是否是父元素
:contains(text) 标签体是否有指定的文本
属性选择器
[属性名] 获得终极哦东的属性名元素
[属性名=值] 获得属性名 等于 指定值的 元素
[属性名!=值] 获得属性名 不等于 指定值的 元素
[属性名^=值] 获得以属性值 开头的 元素
[属性名$=值] 获得以属性值 结尾的 元素
[属性名*=值] 获得 含有属性值的 元素
[as1][as2][as3]... 复合选择器，多个条件同时成立
子元素过滤器
:nth-child 获得指定索引的孩子，从1开始。
:first-child 获得第一个孩子
:last-child 获得最后一个孩子
:only-child 获得独生子
表单过滤器
:input 所有表单元素。（<input>/<select>/<textarea>/<button>）
:text 文本框<input type="text">
:password 密码框<input type="password">
:radio 单选<input type="radio">
:checkbox 复选框<input type="checkbox">
:submit 提交按钮<input type="submit">
:image 图片按钮<input type="image" src="">
:reset 重传按钮<input type="reset">
:button 所有普通按钮<button> 或<input type="button">
:file 文件上传<input type="file">
:hidden 隐藏域<input type="hidden">,还可以获得<xxx style="display:none">
表单对象过滤器
:enable 可用
:disabled 不可用。<xxx disabled="disabled"> 或 <xxx disabled>
:checked 选中（单选框radio、复选框checkbox）
:selected 选择（下拉列表 select option）
可见性过滤器
:hidden 隐藏。特指 <xxx style="display:none;"> , 获得 <input type="hidden">
:visible 可见（默认）
筛选
选择器能提供的功能，筛选提供相应的函数。例如选择器 :first 筛选提供 first()函数。
为什么选择器提供的功能，筛选还要再来一遍？
对比一下：$("div:first") 直接获得第一个div（永远只能操作第一个）
$("div").first() 先获得所有div，再筛选出第一个（可以操作第一个，也可以操作所有）
过滤
eq(index|-index) 类似于eq()，强于eq()
说明：index表示从0开始获得正向索引的元素
-index表示从-1开始获得反向索引的元素
first() 第一个 和 :first一样
last() 最后一个 和 :last一样
is() 判断条件是否成立，成立返回true，不成立返回false
hasClass(class) 判断是否是指定class 其实底层相当于 is("."+class)
filter() 筛选出与指定表达式匹配的元素的集合
not() 将制定内容删除
----------------------下面是不常用的-------------------------------
has() 是否有子元素
silce(start , end) 数组中截取元素，jQuery对象相当于是数组 含start不含end
map() 将jQuery对象数组打散成一个一个的jQuery对象数组
查找
这是一个演示标签案例：
<A>
<B>
<C></C>
<D></D>
<E></E>
<F></F>
</B>
</A>
B.children([...]) 获得所有子元素的集合 。 CDEF
A.find(D) 从指定区域开始查找指定元素。D
D.next() D的下一个指定兄弟。E
D.nextAll() D后面的所有兄弟。EF
E.prev() E的上一个兄弟。D
E.prevAll() E前面的所有兄弟。DC
E.siblings() E的所有兄弟的。CDF
E.parent() E的父元素。B
E.closest(A) 参数必须有，E向上找指定父元素A（含自己），如果有返回一个对象，如果没有返回0。
----------------------------下面的不常用--------------------------------------
C.nextUtil(E) 从C开始获得所有兄弟，找到E停下。DE
F.prevUtil(D) 从F开始获取所有兄弟，找到D停下。DE
E.parents() 获得E的所有父元素，没有的话返回0。AB
closest和parents的主要区别是：
1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。
串联
将多条语句改成一条，只是为了方便操作。
add() 组合对象
A.add(B) 将A和B组合一个对象，功能类似于$("A,B")，但是可以单独对A操作。
andSelf() 将之前操作添加到操作集合中
A.children().andSelf() A的所有孩子并且包含自己
end() 回到最近一个“破坏性”操作之前
A.children().children().end().end()
A A的孩子 A的孙子 A的孩子 A
constents() 获取所有子节点（子元素和文本）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QQ好友列表</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
//1所有分组列表项默认都是隐藏的。
//2 分组（span）可以点击，控制下面的列表项显示或隐藏
//3 当前分组列表项显示，其他分页隐藏（同时只有一个显示）
$("div").children("a").hide().prev("span").click(function(){
//↑所有div标签的孩子a隐藏，a的前一个span绑定点击事件
$(this).nextAll("a").toggle().parent().siblings("div").find("a").hide();
//↑当前span的所有a兄弟切换选中隐藏状态，a的父亲div的所有兄弟中查找a元素隐藏起来。toggle控制隐藏显示的切换。
});
});
</script>
<style type="text/css">
div * {
display: block;
width: 200px;
}
div span {
background-color: #0f0;
}
</style>
</head>
<body>
<div>
<span>分组一</span>
<a>张三</a>
<a>李四</a>
<a>王麻子</a>
</div>
<div>
<span>分组二</span>
<a>sugarcane</a>
<a>ALOHA</a>
<a>malaganguo</a>
</div>
<div>
<span>分组三</span>
<a>我</a>
<a>爱</a>
<a>你</a>
</div>
</body>
</html>爱哎