jQuery-1

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


1. 什么是jQuery
  jQuery是快速的，简洁的第三方javascript库
 为什么: 
    1. DOM操作的终极简化:
         DOM的问题: 核心DOM: 万能，繁琐
                              HTML DOM: 简洁，不是万能
         jQuery在DOM操作的4个方面提供了终极简化:
         1. 查找元素, 操作元素(添加，删除，修改(内容,属性,样式))
         2. 事件处理: 
         3. 动画效果: (了解)
         4. AJAX操作: 
    2. 屏蔽了绝大多数浏览器兼容性问题:
         只要jQuery让我们用的，都是兼容的
 何时: 今后绝大多数公司的项目和绝大多数前端框架都是使用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文件夹下
      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，  否定选择器,可否定一切选择器














正课:
1. 查询: 
  
1. 查询:
   练习:
     $(...).API() : 规律:  1. 自带forEach
                                  2. 每个API都返回原结果集合


   内容过滤: (了解) 根据元素的内容查找
     :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...的元素
    
   按节点间关系查找: 
   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("类名");