1jQuery介绍
1.1Javascript与jQuery比较
js: 1、入口函数只有一个，window.onload
2.浏览器兼容性：非常令人头疼，比如textContent虽然作为标准方法但是只支持IE8+以上的浏览器
3.DOM错综复杂，实现简单的效果很麻烦
4.代码容错性差，出错后导致后面的代码不执行
jQuer：1、市场占有率稳步上升，代码比较少，功能强大2、DOM比较强大，事件处理，完全解决了浏览器的兼容性问题3、ajax操作（比较好）
1.2什么是jQuey
1、jQuery是一个JavaScript函数库。
2、jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
3、jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。
1.3为什么使用jQuery
1、目前网络上有大量开源的 JS 库, 但是 jQuery 是目前最流行的 JS 库，而且提供了大量的扩展。
2、很多大公司都在使用 jQuery， 例如:Google、Microsoft、IBM、Netflix。
3、目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!
2jQuery安装
1、从 jquery.com 下载 jQuery 库
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
2、从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
</head>
3jQUery语法
(1)、基础语法
1、美元符号定义 jQuery
2、选择符（selector）"查询"和"查找" HTML 元素
3、jQuery 的 action() 执行对元素的操作。
(2)、实例
1、您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
// 开始写 jQuery 代码... }
);
2、简洁写法（与以上写法效果相同）:
$(function(){
// 开始写 jQuery 代码...
})
（3）、1.3.3了解jQuery的$符号
$是什么
其实$就是一个函数：$();参数不一样，功能不一样
$常用的几种情况：
$(function() {});//参数是function，说明是入口函数
$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//将document转换成jQuery对象
(4)、jQuery 入口函数与 JavaScript 入口函数的区别
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
4JQuery选择器
(1)、什么是jQuery选择器
1、jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
2、jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
3、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
4、jQuery 中所有选择器都以美元符号开头：$()。
(2)、基本选择器
| 名称 |
用法 |
描述 |
| ID选择器 |
$(“#id”); |
获取指定ID的元素 |
| 类选择器 |
$(“.class”); |
获取同一类class的元素 |
| 标签选择器 |
$(“div”); |
获取同一类标签的所有元素 |
| 并集选择器 |
$(“div,p,li”); |
使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素 |
| 交集选择器（标签指定式选择器） |
$(“div.redClass”); |
注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。 |
总结:和css选择器的用法一模一样
// ID选择器
$("#ID属性值");
$("#btn")
// 类选择器
$(".class属性值");
$(".dv")
// 标签选择器
$("标签名");
$('div')
// 交集选择器
$("标签.class属性值");
$('div.dv')
// 并集选择器
$("选择器,选择器,...");
$("li,a,p")
// 子代
$('选择器>选择器');
$('ul>li')
// 后代
$('选择器 选择器');
$('ul a');
// 属性选择器
// 有type属性的input标签对象
$('input[type]')
// type属性值为password的input标签对象
$('input[type="password"]')
// 有href属性的a标签
$('a[href]')
// ^ 打头 $ 结尾
// 有href属性并且是http开头的a标签
$('a[href^=http]')
// 有href属性并且以com结尾的a标签
$('a[href$=com]')
(3)、层级选择器
| 名称 |
用法 |
描述 |
| 子代选择器 |
$(“ul>li”); |
使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 |
$(“ul li”); |
使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
总结：跟CSS的选择器一模一样。
(4)、过滤选择器
| 用法 |
描述 |
|
| :eq（index） |
$(“li:eq(2)”).css(“color”, ”red”); |
获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd |
$(“li:odd”).css(“color”, ”red”); |
获取到的li元素中，选择索引号为奇数的元素 |
| :even |
$(“li:even”).css(“color”, ”red”); |
获取到的li元素中，选择索引号为偶数的元素 |
总结：这类选择器都带冒号。
// css() : 设置样式
// 1 可以链式调用
// 2 传一个参数,如果是对象,则用来设置多个属性和值
// 3 传两个参数,第一个是属性,第二个是值,用于设置单个属性
// 4 传一个参数,如果是属性名,则返回该属性对应的值,不能链式调用
// 下标 0 开始
// 获取所有的li,然后只要第三个
// $("li:eq(2)").css('color','red');
// odd 奇数 , even 偶数 下标0开始
// 引号中,-可以写,也可以转换为首字母大写,但是不在引号中则必须转换为大写
(5)、筛选选择器（方法）
| 用法 |
说明 |
|
| children(selector) |
$(“ul”).children(“li”) |
相当于$(“ul>li”)，子类选择器 |
| find(selector) |
$(“ul”).find(“li”); |
相当于$(“ul li”),后代选择器 |
| siblings(selector) |
$(“#first”).siblings(“li”); |
查找兄弟节点，不包括自己本身。 |
| parent() |
$(“#first”).parent(); |
查找父亲 |
| eq(index) |
$(“li”).eq(2); |
相当于$(“li:eq(2)”),index从0开始 |
| next() |
$(“li”).next() |
找下一个兄弟 |
| prev() |
$(“li”).prev() |
找上一次兄弟 |
| Index() |
$(“li”).index() |
获取当前的位置（索引） |
| not() |
$("p").not(".intro") |
返回不带有类名 "intro" 的所有 <p> 元素 |
总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
// 获取div所有的子标签
// $("div").children().css('color','red');
// 获取div下指定子标签(不包括后代)
// $("div").children('span').css('color','red');
// 获取div下指定后代标签
// $("div").find('span').css('color','red');
// 获取第二个子标签(下标0开始)
// $("div").children().eq(1).css('color','red');
// 获取h2所有的兄弟(同级别,当前作用域中,非自己)
// $('h2').siblings().css('color','red');
// next 下一个弟弟妹妹, nextAll,所有的弟弟妹妹
// $('h2').nextAll().css('color','red');
// prev : 上一个哥哥 , prevAll : 所有的哥哥
// $('h2').prevAll().css('color','red');
// 父标签
// $('h2').parent().css('color','red');
// not 不要谁
$('div').children().not('.h,span').css('color','red');
// 获取 span标签在div中的索引(是第几个子标签,下标0开始)
// 1
console.log($("div").children('span').index());