09 JQUERY 基本概述和查找

正课:
1. 什么是jQuery
2. 查找

1. 什么是jQuery
  jQuery是快速的，简洁的第三方javascript库
 为什么:
    1. DOM操作的终极简化:
         DOM的问题: 核心DOM: 万能，繁琐
                              HTML DOM: 简洁，不是万能
         jQuery在DOM操作的4个方面提供了终极简化:
         1. 查找元素, 操作元素(添加，删除，修改(内容,属性,样式))
         2. 事件处理:
         3. 动画效果: (了解)
         4. AJAX操作:
    2. 屏蔽了绝大多数浏览器兼容性问题:
         只要jQuery让我们用的，都是兼容的，jQuery实际上是封装Dom对象的类数组
 何时: 今后绝大多数公司的项目和绝大多数前端框架都是使用jQuery开发的。
 如何:
   1. 关于版本:
       1.x: 兼容旧浏览器
          未压缩: jquery-1.11.3.js ——可读性好，便于学习，大
          压缩: jquery-1.11.3.min.js ——生产环境使用，小
                 三方面: 去掉注释, 去掉换行和空字符, 极简化变量名
       2.x: 不再兼容旧浏览器
   2. 手册:
       day1 核心和选择器
       day2 选择器,属性，文档处理和css样式
       day3 事件和动画
   3. 开始使用:
      Step1: 下载jquery.js 保存在项目js文件夹下       方法二：使用CDN：互联网访问
      Step2: 在页面用<script src 引入jquery.js文件
         向window中添加了jQuery对象
            jQuery对象是封装所有简化版DOM操作API的全局对象
           window.jQuery=window.$=jQuery
      Step3: 使用jQuery简化版API执行DOM操作
           $("选择器") 查找元素
               $底层其实使用的还是:
                 getElementById
                 getElementsByTagName,ClassName,...
                 querySelectorAll
             问题: 使用DOM API返回的结果不能使用jQuery简化版API
             $的返回值: jQuery结果集对象——类数组对象
                只有$返回的结果，才能使用简化版API
                普通DOM API返回的是标准DOM对象，不能使用简化版API。
             jQuery API和DOM API 不能混用，也不通用
           $(...).click(function(){...})
   鄙视题: DOM对象 vs jQuery对象
      DOM对象: W3C的DOM标准规定，浏览器厂商已经实现的现成的对象。能使用DOM API——繁琐
      jQuery对象: 由jQuery库创建的，由第三方实现的。
         本质: 一个封装找到的一组DOM对象的类数组对象—集合
                 并在父对象中提供了简化版API
   要想使用jQuery简化版API，必须先获得jQuery结果集合对象:
    如何: 1. 用$("选择器")直接查找对象，返回的就是
            2. 如果已经获得一个DOM对象:
                用$(DOM对象), 创建一个结果集合对象，并将DOM对象放入其中。
    jQuery结果集合对象的核心API:
     $(...).size() => $(...).length 找到的元素个数
     $(...).get(i) => $(...)[i]  从jQuery结果中取出DOM对象
            何时: 如果有jQuery实现不了的功能
                     就要见DOM对象从jQuery结果中取出
                     继续使用DOM API
     $(...).index($("要查找的元素"))
            返回要查找的元素在整个结果集中的位置

2. 查找:
   按选择器查找: jQuery支持所有css选择器
       只要jQuery允许使用的css选择器，都屏蔽了兼容性问题
   包括:

     一、基本选择器: 同CSS
        #id   .class   element   *    selector1,selector2,...
     规律: $("...")返回的jQuery结果集合的所有API都自带forEach
                后续的修改操作，会自动作用到每个找到的元素上
     层次选择器: 同CSS
        select1 select2 后代
        select1>select2 直接子代
        select1+select2 紧邻的下一个兄弟
        select1~select2 之后所有符合条件的兄弟

     二、过滤选择器:
       基本过滤: 位置过滤: 根据元素在结果集中的下标位置选择
          :first/last : 在结果集中选择第一个和最后一个元素（只有一个）
          *以下选择器下标从0开始！*
          :even/odd: 选择结果集中*下标*为偶数/奇数的元素
          :eq/gt/lt(i): 选择下标=,>或<i位置的其他元素
        何时: 只要根据元素在结果集合中的下标位置选择元素     

       三、子元素过滤: 选择在父元素下指定位置的子元素
              强调: 参照的不是在结果集合中的位置， 而是在父元素下的位置
          :first-child/last-child
          *以下选择器下标从1开始*
          :nth-child(n/odd/even/2n/2n+1)

       :not(selector): 同css，  否定选择器,可否定一切选择器

两者的区别：注意两者的位置，子元素过滤是相对于父元素而言，而基本过滤是相对于结果集中而言

   四、内容过滤: (了解) 根据元素的内容查找
     :contains(text)： 查找内容中包含指定文本的元素
       span:contains("购物车"): 找内容中包含"购物车"的span
     :empty : 查找不包含任何内容的空元素
     :parent : 查找只要包含内容的父元素
     :has(selector) : 选择包含满足selector要求的子元素的父元素
        比如: div:has(.active) 包含class为active的子元素的div

   五、可见性过滤:  同CSS (了解)
     :visible : 匹配所有可见的元素
     :hidden : 匹配所有不可见的元素display:none
                    和type="hidden"的

 

   六、属性过滤选择器（很重要）: 大部分同CSS   ------常使用自定义属性
    [属性] : 查找拥有该属性的元素
    [属性="值"] : 查找指定属性的值为"值"的元素
    [属性!="内容"] : 查找指定属性的值不为"值"的元素
    [属性^="内容"] : 查找指定属性的值以"内容"开头的
    [属性$="内容"] : 查找指定属性的值以"内容"结尾的
    [属性*="内容"] : 查找指定属性的值包含"内容"的
    [条件1][条件2]... : 查找同时满足条件1,2...的元素
    

   练习:
     $(...).API() : 规律:  1. 自带forEach
                                  2. 每个API都返回原结果集合
   按节点间关系查找:
   1. 父子关系:
   $(parent).children() 查找parent下所有直接子元素
                  .children(selector)  查找parent下符合条件的元素
   $(parent).find(selector)  查找parent下所有后代元素中符合条件的
   $(child).parent()  获得child的父元素
   2. 兄弟关系:
      $(...).next/prev([selector])  获得下/前一个兄弟元素
     $(...).nextAll/prevAll([selector]) 获得之后/之前所有的兄弟元素
      $(...).siblings([selector]) 获得前后所有的兄弟元素
  练习:
    获取css样式属性的值:
      var 属性值=$(...).css("css属性名")
         .css默认获取的就是计算后的完整样式！
         .css默认设置的是内联样式
    问题: css样式属性修改，代码量大
    解决: 用class代替单独修改css样式
      $(...).addClass("类名") 向选中的元素添加类名
      $(...).removeClass("类名") 从选中的元素上移除类名
      $(...).hasClass("类名") 判断选中的元素上是否包含指定类名
      如果希望在有/没有"类名"之间切换:
      $(...).toggleClass("类名");if($(...).hasClass("class名") $(...).removeClass("class名")   else $(...).addClass("class名"))
      

---

小tips:

1.只要使用到css属性，就要去横线，变驼峰，如：border-top---》borderTop

2.数字值属性不用加单位

3.企业开发中常用自定义属性，class只会用作样式的改变，不会用来查找。

4. [][]表示而且  [],[]表示或者

5.jquery通用规律：

     （1）.所有API自带遍历:对jQuery对象调用的修改，会自动应用到集合中每一个DOM元素上

      （2）.所有API都返回正在查询的结果集合，可使用链式操作对同一个结果集合执行多个操作

      （3）.API两用，带值和不带值

6.