1、jQuery的简介
jQuery是一个优秀的JavaScript库。使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
jQuery 最大的优势，就是特别的方便，最重要的是 jQuery 的代码兼容性非常好。
2、jQuery的引用
本地调用：
远程调用：
3、jQuery执行小函数
jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready $(document).ready(function() {}); 可简写为：$(function(){});
| window.onload | $(document).ready() | |
| 执行时机 | 必须等待网页全部加载完毕（包括 图片等），然后再执行包裹代码 | 只需要等待网页中的DOM结构 加载完毕， 就能执行包裹的代码 |
| 执行次数 | 只能执行一次，如果第二次， 那么 第一次的执行会被覆盖 | 可以执行多次，第N次都不会被上 一次覆盖 |
4、jQuery对象和DOM对象互相转换
// dom对象转换为jquery
// $(dom对象)
$("#box") === $(document.getElementById("box"));
// jquery对象 转换为 dom对象
// jquery对象[索引]
// jquery对象.get(索引)
$("div")[1].style.backgroundColor = "red";
$("div").get(0).style.backgroundColor = "red";
1、基本选择器
| 选择器 | 描述 | 示例 |
| #id | 根据指定的id匹配元素 | $(“#box”)选择id=box的元素 |
| .class | 根据类匹配元素 | $(“.box”)选择class=box的元素 |
| Element | 根据元素名匹配元素 | $(“div”)选择所有的div元素 |
| * | 匹配所有元素 | $(“*”)选择所有元素 |
| E1,E2,E3 | 分组匹配元素 | $(“div,span,.box”)选择所有div，span,和class为box的元素 |
2、层次选择器
$("E+F")
$("E").next()或$("E").next("F")
往后查找，紧邻E选择器后的那一个F兄弟选择器
$("E").prev()或$("E").prev("F")
往前查找，紧邻E选择器前的那一个F兄弟选择器
$("E~F")
$("E").next()或$("E").next("F")
往后查找，紧邻E选择器后的所有的F兄弟选择器
$("E").prev()或$("E").prev("F")
往前查找，紧邻E选择器前的所有的F兄弟选择器
$("E:eq(索引)")=$("E").eq(索引)
3、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即过滤选择器都是以冒号(:)开头
$(document).ready(function () {
$("ul li:first").css("color", "red");//文档里的第一个li元素 唯一
$("ul li").first().css("color", "blue");
$("ul li:last").css("color", "red");
$("ul li").last().css("font-size", "30px");
$("li:odd").css("background-color", "red"); //文档里[索引为奇数]li
$("li:eq(0)").css("color", "red");
$("li").eq(0).css("color", "red");
$("li:lt(3)").css("color", "green");//索引小于3的li
$("li:gt(3)").css("color", "green"); //索引大于3的li
$("ul li:first-child").css("color", "red");//每一组里的第一个li子元素 可能是多个
$("ul li:last-child").css("color", "red");
$("ul li:nth-child(odd)").css("background-color", "red"); //每一组里[第奇数]个li
$("input[id=user]").val(111);
});
// get() 与 eq() 区别
// 都是jquery对象调用 jquery对象.get(索引) jquery对象.eq(索引)
// 不同点：
// jquery对象.get(索引) dom对象
// jquery对象.eq(索引) jquery对象| 选择器 | 描述 | 示例 |
| :first | 选择第1个元素 | $(“ul li:first”)选择第1个div元素 |
| :last | 选择最后1个元素 | $(“ul li:last”)选择最后1个div元素 |
| :even | 选择索引是偶数的所有元素，索引从0开始 | $(“li:even”)选择表格中所有偶数的行 |
| :odd | 选择索引是奇数的所有元素，索引从0开始 | $(“li:odd”)选择表格中所有奇数的行 |
| :eq(index) | 选择索引值是index的元素，index从0开始 | $(“li:eq(1)”)选择表格行索引等于1的行 |
| :gt(index) | 选择索引值大于index的元素,index从0开始 | $(“li:gt(1) ”)选择表格行索引大于1的行 |
| :lt(index) | 选择索引值小于index的元素,index从0开始 | $(“li:lt(1)”)选择表格行索引小于1的行 |
| [attribute=value] | 选择属性值为value的元素 | $(“div[id=test]”)选择id属性值为test的div元素 |
| :input | 匹配所有 |