jQuery（1）

一、jQuery简介

   jQuery 是一个 JavaScript 库。封装了原生的JS,得到一套完整的方法。
         核心 ：write less, do more
         版本 ：
             1.xx.x 版本的jQuery兼容IE6，7，8
             2.xx.x 版本的jQuery不再兼容IE 6,7,8
         优点 ：
             1、简化DOM操作，像操作css一样操作DOM
             2、直接通过选择器设置样式
             3、简化JS事件操作
             4、采用链式调用操作JS节点
             -----------（以上为目前涉及到的）--------------
             5、Ajax技术更加完善
             6、提供各种便捷的动画处理
             7、基于jQuery的插件使用更便捷
             8、可以通过jQuery自定义插件

二、jQuery使用

   1、引入jQuery文件

         <script src=""></script>

   2、如果想要使用jQuery语法，必须将文件引入操作放在代码前面

   3、使用jQuery

         1、jQuery对象 ：实际上是对原生的JS对象进行封装，封装之后可以使用jQuery提供的方法。
             注意 ：
                 1、jQuery对象可以使用jQuery提供的方法，原生JS对象可以使用原生JS方法，方法不能混用
                 2、jQuery对象和原生JS对象可以共存，也可以互相转换
         2、工厂函数 $()
                 如果想要获取元素对象，必须通过工厂函数
                 jQuery对象可以使用 jQuery或者 $表示
                 使用 ：
                     $('div'); //获取div对象   
         3、原生DOM对象与jquery对象互相转换
             1. DOM 转换为 jQuery对象
                 var h1 = document.getElementsByTagName('h1')[0];
                 var $h1 = $(h1);
             2. jQuery 转换为 DOM对象
                 var h1 = $h1[0];
                 var h1 = $h1.get(0);
     见Jquery.html

三、jQuery选择器

   1、作用：根据选择器获取页面中的元素，返回值都是由jQuery对象组成的数组
   2、语法： $("选择器");

选择器分类：

     1、基础选择器
           1. ID选择器
                 $("#id");
                 返回id属性值为指定id的元素对象
           2. 类选择器
                 $(".className");
                 返回指定类名对象的元素
           3. 标签选择器
                 $("tagName");
                 返回指定标签名对应的元素
           4. 群组选择器
                 $('selector1,selector2,...');
     2、层级选择器
           1、后代选择器
                 $("selector1 selector2");
           2、子选择器
                 $("selector1>selector2");
           3、相邻兄弟选择器
                 $("selector1+selector2");
                 匹配紧跟在selector1后,满足selector2的元素
                 * 注意：只匹配紧邻selector1的第一个兄弟元素，必须是紧挨着，如果紧邻的第一个兄弟元素不满足selector2，就匹配失败
           4、通用兄弟选择器
                 $$("selector1~selector2");
                 匹配selector1后面所有满足selector2的兄弟元素
            见示例：12.html**********************************************
     3、筛选选择器（过滤）
              也叫过滤选择器，需要结合其他选择器一起使用
           1. :first
                 只匹配一组元素中的第一个元素
                 et：
                   $("p:first")
           2. :last
                 匹配一组元素中的最后一个元素
                 et：$(selector:last;)
           3. :not
                 否定筛选，将满足selector匹配的元素都过滤在外，匹配其他剩余元素
                 et：$(":not(selector1,selector2...)")
     见13.html
           4. :odd
                 匹配偶数行对应的元素 （奇数下标）
           5. :even
                 匹配奇数行对应的元素
           6. :eq(index)
                 匹配下标等于index的元素
           7. :lt(index)
                 匹配下标小于index的元素   
           8. :gt(index)
                 匹配下标大于index的元素
     4. 属性选择器 []
             根据标签属性匹配元素
           1. [attribute]
                 根据属性名筛选元素（匹配包含指定属性的元素)
           2. [attribute=value]
                 根据属性名和属性值筛选元素
                 (匹配属性attribute=value的元素)
           3. [attribute^=value]
                 匹配属性值以指定字符开头的元素(^表示以...开头)
           4. [attribute$=value]
                 匹配属性值以value字符结尾的元素($表示以...结尾)
           5. [attribute*=value]
                 匹配属性值中包含value字符的元素
           6. [attribute!=value]
                 匹配attribute属性值不等于value的元素
                参数：
                     attribute：属性名
                     value:属性值
     5. 子元素过滤选择器
           1、:first-child
                 匹配属于父元素中的第一个子元素
           2、:last-child
                 匹配父元素中最后一个子元素
           3、:nth-child(n)
                 匹配父元素中第n个子元素
                 参数说明：
                     将关键字或是表达式做参数传递给:nth-child()
                     关键字或表达式的值会被作为下标匹配元素
                    et：    $("li:nth-child(even)").css("color","red");
                     even 取值 ：1 3 5 7...，对应第2 4 6行的元素   
             注意：
                   将要匹配的子元素与筛选选择器相结合使用
     见03html