JQ的特点与选择器Jquery (简称JQ)
一 Jquery一个JS框架。
这里的框架就是由多个函数（ 功能 ）组成，每一个功能都对应着一个函数。不需要关心这些函数的底层是如何实现的，只需要使用这些函数就可以了。
二 Jquery的特点
1 写的更少做做更多
2 JQ的容错性非常好
3 JQ是面向对象编程的一个框架，函数式编程风格，支持链式编程
4 目前主流分1- 和 2- 系列，区别就在于 1系列的JQ对低版本浏览器支持比较好，2 系列的就是对 h5 c3支持比较好（ 一般做效果的时候1系列就可以 ）
三JQ与JS的关系
01 JQ是由JS编写而成的一个JS框架，先有JS后有JQ。
02 一对script 标签中既可以写 JS 也可以写 JQ，但是二者不能混用。【不能用JQ的对象去调JS的方法，也不能用JS的对象去调JQ的方法】
03 JQ和JS可以互相转化：
1 JS转为JQ 只需要用 $( ) 将JS对象包裹起来就可以。
2 JQ转为JS可以使用 get(0) 的方法或者直接 obj[0] 的方式。
四 JQ显示隐藏功能
01 .show() : 让某一个对象显示
02 .hide() ：让某一个对象隐藏
03 .toggle() ：让某一个对象切换
上面三个方法是一组，都可以接收一个时间参数，单位是毫秒，用来控制动画的运动时长。
五JQ操作CSS
- 单属性操作：一次只能修改一个CSS属性
Obj.css( ‘属性名’,’属性值’ )
- 多属性操作：一次可以修改多个属性，需要设置json格式参数
Obj.css( { ‘属性名1’：’属性值1’,’属性名2’：’属性值2’…… } );
01 多属性操作时 css 功能接收一个 { } 格式的参数
- 属性名和属性值之间用冒号隔开，组成一对，对与对之间用逗号隔开。
3 CSS获取方法
Obj.css( ‘属性名’ )–>css方法同样可以获取某一个属性值，使用时只需要传入一个参数即可
六JQ操作HTML
.html不仅包括元素里的具体标签还包括号标签里的文字内容。
- 设置修改html
Obj.html( ‘需要设置内容’ )
- 获取html
Obj.html( ); –>不设置参数就表示获取元素内容
七JQ里的基本选择器
Jq里的基本选择器和css选择器很类似（ css怎么选 ，jq就可以怎么选 ）
01 $(‘p’)=>选中所有标签名为p的元素。
02 $( ‘.left’ )=> 选中所有类名叫做 left 的元素
03 $( ‘#box’ )=> 选中id名为box的元素
04 $( ‘body > *’ )=> 选中body下所有的一级子元素（ 儿子 ）
05 $( ‘p + div’ )=> 选中p后面紧跟着它的那个兄弟div
06 $( ‘p~div’ )=>选中p后面所有的兄弟 div 元素
07 $( ‘ul li’ )=> 选中ul下面的所有 li 元素
- ( ‘h1,h2,h3’ ) $( ‘:header’ )==>这二个都是选中标题标签的写法
八JQ里的过滤选择器（ 伪类选择器 ）
伪类选择器一般配合基本选择器使用，在一组元素中过滤出一些元素。
01 $(‘li:first’)=>选中所有li中的第一个
02 $( ‘li:last’ )=>选中所有li中的最后一个
03 $( ‘li:not(:last)’ )=>选中所有的li ，排除最后个，not的小括号里只能写选择器，不能写数字。
04 $( ‘li:eq(2)’ )=>选中所有li中的第三个li，:eq( ) 和 .eq( )是不同的选择器，.eq( )一般是写在基本选择器的外面。
05 $( ‘li:gt( 2 )’ )=>选中所有li中索引值大于2的那些li
06 $( ‘li:lt( 2 )’ )=>选中所有li中索引值小于2的li，需要注意gt和lt的小括号里面只能接收数值。
07 $( ‘li’ ).slice( 1,3 )=>选中所有li元素然后截取出索引值为1-2之间的li元素。
08 odd || :even=>选中索引值为奇数和偶数的元素。
九 JQ与JS中的this
在 JS中可以直接使用 this 关键字而不用事先定义，它能出现的位置有很多：事件中、定义时器、函数( 对象 ) ，如果this出现在事件操作中那么它就可以指代当前事件源。
对于this 可以理解为 谁用它，它就是谁
在JQ中使用this去调用 JQ方法时需要 $( this )–>将它转为JQ对象
十 下拉菜单
在JQ中设计者准备了 hover 事件，用它可以表示鼠标移上和离开二个操作，JS中没有hover 事件。默认接收二个参数，第一个表示鼠标移上，第二个表示鼠标离开。且这个二个参数都是函数。
$( ).hover( function(){
// 鼠标移上事件
},function(){
// 鼠标离开事件
} );
十一 动画排队
在JQ 中通过事件操作正常调用一个动画函数的时候，如果操作过于频繁那么就会产生一个动画排队的问题。默认情况下，正常排队要求所有动画都会按着顺序一个一个执行完。但更多的时候用户不需要看到某一个动画重复执行，所以可以利用JQ中的 stop() 将当次动画之前排队清除
$( ).stop().slideToggle( );
十二 表单的焦点事件
01 focus():表示JQ中的焦点获取事件
02 onfocus ():表示JS中的焦点获取事件
03 blur(): 表示JQ中焦点失去事件
04 onblur() :表示JS中焦点失去事件
焦点事件一般使用在表单用户可以进行输入的元素身上（比如： input textarea ）
05 val(): 这个方法是JQ中专门用来操作 表单元素 value 属性的，通过它可以能 value 值进行设置和获取操作【 用法和 html 类似 】
十三 索引值
Index()：利用这个方法可以求出某一个元素在它所有兄弟元素中的排序编号，编号从０开始。
$( ).index()；
如果只希望获取到某一个元素在它同类中的排序，那么就可以在index中设置分类。
Index和eq的区别：
Index() 一般是求当前元素排第几，
eq() 一般是知道元素的编号去选出来。
