jQuery之选择器/操作样式

//jQuery是前端开发常用库之一，所以了解一下还是很有必要的。

一、jQuery是什么？

• 是一个前端类库（方法库， 工具库）
  // 相当于有人把 js 里面各种 DOM 操作都给你封装好了
  // jQuery 是一个类库(方法库),所以jQuery 里面 95% 以上都是方法，将来使用的时候, 别忘了写 ()

二、jQuery的常用方法

• jQuery选择器全兼容（css的选择器怎么写，jQuery的选择器同样可以写，返回的是一个集合）。
  //特殊的选择器（jQuery觉得原生有的选择器太长了，所以简写了一些，如下所示）
  1. :first => 获取第一个
  2. :last => 获取最后一个
  3. :eq(数字) => 获取索引为 n 的那一个
  4. :odd => 获取索引为 奇数 的哪些
  5. :even => 获取索引为 偶数 的哪些

• jQuery 的筛选器（用在 jQuery 选择的元素集合后面，都是方法, 为了对已经选择出来的元素进行二次筛选）

  1. first() =>一个元素集合里面的第一个
  
  2. last()=> 一个元素集合里面的最后一个
  
  3. eq(n) => 一个元素集合里面的索引为 n 的那一个
  
  4. next() =>元素的下一兄弟元素
  
  5. nextAll()=> 元素的后面的所有兄弟元素
   // nextAll(选择器) => 拿到下面所有兄弟元素中符合选择器要求的元素
  
  6. nextUntil(选择器) => 元素后面所有的兄弟元素直到选择器元素为止
  
  7. prev() =>元素的上一个兄弟元素
  
  8. prevAll() => 元素的上面所有兄弟元素
  // prevAll(选择器) => 拿到上面所有兄弟元素中符合选择器条件的
  
  9. prevUntil(选择器) => 元素上面的所有兄弟元素直到选择器元素为止
  
  10. parent() => 元素的父元素
  
  11. parents() => 元素的所有祖先元素, 直到 html 元素为止
   // parents(选择器) => 找到所有祖先元素中满足选择器的那一个
  
  12. parentsUntil(选择器) => 元素的所有祖先元素, 直到 选择器 元素为止
  
  13. children()=>元素所有的子级元素
   // children(选择器) =>所有子元素里面符合选择器条件的元素
  
  14. siblings() =>所有的兄弟元素
   // siblings(选择器)=> 拿到所有兄弟元素中满足选择器要求的元素
  
  15. find(选择器) =>  => 在所有子元素里面查找 只要后代元素里面有就可以, 就能找得到
  
  16. index() => 获取到元素的索引位置
  //找到他是该父元素下的第几个元素,拿到的是一个数字
  

• jQuery 操作文本内容

   html()
          => 一个读写的方法
          => 不传递参数的时候, 就是获取元素内部的超文本内容(只获取第一个元素)
          => 传递一个参数的时候, 就是设置元素内部的超文本内容（给所有元素设置值）
    text()
          => 一个读写的方法
          => 不传递参数的时候, 就是获取元素内部的文本内容（给所有元素设置值）
          => 传递一个参数的时候, 就是设置元素内部的文本内容（给所有元素设置值）
   val()
          => 一个读写的方法, 操作 input 标签
          => 不传递参数的时候, 就是获取标签的 value 值（只获取第一个值）
          => 传递一个参数的时候, 就是设置标签的 value 值（给所有元素设置值）

• jQuery 操作元素类名

 addClass() => 添加类名
          => 执行这个方法会给元素集合里面所有的元素添加上固定的类名
          => 如果有就不添加了, 没有才会添加
removeClass() => 移除类名
          => 执行这个方法会给元素集合里面素有的元素删除固定的类名
toggleClass() => 切换类名
          => 执行这个方法会给元素集合里面的所有元素切换类名
            -> 本身有这个类名, 就删除
            -> 本身没有这个类名, 就添加
hasClass() => 判断有没有某一个类名
          => 返回一个布尔值, 表示有没有这个类名

• jQuery 操作元素样式

	  1. css('样式名称')
         css('width')
         获取元素的样式值, 不管是行内样式还是非行内样式都能获取
      2. css('样式名称', '样式的值')
         css('width', '200px')
         设置元素的样式值, 元素集合能获取多少个元素就设置多少个元素
         设置的时候, 所有的单位都可以不写, 默认添加 px 为单位
      3. css(对象)
         css({
          width: 100, 不写单位默认是 px
          height: '200px',
          opacity: 0.5
        })
       //第三种方法为批量添加css样式