JQuery
一、简介：
JQuery是一套跨浏览器的JavaScript库，所谓JavaScript库（也可以叫做JavaScript框架），就是将JavaScript中的一些常用函数，对象封装成一个js文件，方便重复调用，可以简化HTML与JavaScript之间的操作，基本解决了在不同浏览器中的兼容性问题。
1、好处：
简化JS操作；不需要关心兼容性；提供了大量实用方法
2、JQuery的使用：
jQuery实际上就是一个js文件，只需要在网页中引入这个文件就可以使用
在开发测试过程中，使用未压缩版本：jquery-1.7.2.js
在上线项目中，使用压缩后的版本：jquery-1.7.2.min.js
3、jQuery的核心函数
$在JQuery中被称为JQuery的核心函数，$就是JQuery，也就是一个函数
4、onload与核心函数区别
window.onload=function( ){ } 是表示整个文档加载完毕之后执行这里面的代码，jQuery的写法：$(document).ready(function(){ });
$(function( ){ }); 表示的是加载本地文档完成之后就会执行的代码
5、$的4种用法：
$(function(){ }) 类似于window.onload=function(){ };，它会在文档加载完成之后运行
$("html字符串") 根据这个字符串创建元素节点对象
$("选择器") 根据选择器查找元素节点对象
$(DOM对象) 将DOM对象包装为jQuery对象
6、jQuery对象
①DOM对象： 通过原生JS获取的对象是DOM对象
var btnEle=document.getElementById("btn");
②jQuery对象： 通过jQuery核心函数包装过的对象叫做jQuery对象
var $btn=$("#btn");
③比较： 两种对象之间不能互相调用对方的方法
jQuery对象命名时习惯加上$,加以区分。
④转换
DOM --> jQuery
var $jQuery对象=$(DOM对象);
var $btn=$(btnEle);
jQuery --> DOM
使用数组下标：jQuery对象[索引]： 如：var btnEle=$btn[0];
使用get(index)方法： var btnEle=$btn.get(0)
var p=$("p")[0]; var p=$("p").get(0);
jQuery对象的本质就是DOM对象的数组，所以可以通过给对象加下标的形式获取数组中的DOM对象
二、jQuery选择器
1、基本选择器
| 选择器 | 描述 | 示例 |
| #id | 根据id匹配元素 | $("#one") |
| element | 根据元素名匹配 | $("div") |
| .class | 根据类名匹配 | $(".mini") |
| * | 匹配所有元素 | $("*") |
| selector1,selector2..selectorN | 将每一个选择器匹配到的元素合并后一起返回 | $("span,#two") |
2、层级选择器
| 选择器 | 描述 | 示例 |
| ancestor descendent | 在给定的祖先元素下匹配后代元素 | $("body div") |
| parent > child | 在给定的父元素下匹配所有子元素 | $("body>div") |
| prev + next | 匹配所有紧接在 prev 元素后的 next 元素 | $("#one+div") |
| prev ~ siblings | 匹配 prev 元素之后的所有 siblings 元素 | $("#two~div") |
3、过滤选择器
| 选择器 | 描述 | 示例 |
| :first | 获取第一个元素 | $("div:first") |
| :last | 获取最后一个元素 | $("div:last") |
| :not(selector) | 获取与选择器不匹配的元素 | $("div:not(.one)") |
| :even | 匹配索引值为偶数的元素 | $("div:even") |
| :odd | 匹配索引值为奇数的元素 | $("div:odd") |
| :eq(index) | 匹配索引值等于给定索引值的元素 | $("div:eq(3)") |
| :gt(index) | 匹配索引值大于给定索引值的元素 | $("div:gt(3)") |
| :lt(index) | 匹配索引值小于给定索引值的元素 | $("div:lt(3)") |
| :header | 匹配标题元素 | $(":header") |
| :animated | 匹配所有动画元素 | $("div:animated") |
| :focus | 触发每一个匹配元素的focus事件 |
|
| 选择器 | 描述 | 示例 |
| :contains(text) | 匹配包含给定文本的元素 | $("div:contains('di')") |
| :empty | 匹配所有空元素 | $("div:empty") |
| :has(selector) | 匹配所有包含 给定选择器所匹配的元素 的元素 | $("div:has(.mini)") |
| :parent | 匹配所有不空元素 | $("div:parent") |
| 选择器 | 描述 | 示例 |
| :hidden | 匹配所有不可见元素，或者type为hidden的元素 | $("div:hidden") |
| :visible | 匹配所有的可见元素 | $("div:visible") |
