jQuery（一）

1、jQuery概念

• js库（js文件）
• 优点
  1. 轻量级
  2. 链式编程、隐式迭代
  3. 对跨浏览器兼容
  4. 样式、动画支持
  5. 支持插件扩展
  6. 免费、开源
• 版本
  1. 1x
  2. 2x
  3. 3x

2、jQuery入门

• 对象为空是 null

• jQuery入口函数

  1. // 第一种入口函数
     $(function () {
             
     });
     // 第二种入口函数
     $(document).ready(function() {
       
     });
     

• script标签出现在前面时使用入口函数

3、jQuery的顶级对象 $

• 设置css样式
  • $('').css('属性名', '属性值')

4、jQuery对象和DOM对象相互转换

• jQuery只能用jQuery的东西，DOM对象只能用DOM对象的东西
• DOM对象转成jQuery对象
  • $(DOM对象)
• jQuery对象转成DOM对象
  • $('标签名')[索引下标]
  • $('标签名').get(索引下标)

5、jQuery常用API

• 选择器

  • $('css选择器')

• 隐式迭代

  • 遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代

• 筛选选择器

  //第一个元素
  $('li:first').css('background', 'blue');
  //最后一个元素
  $('li:last').css('background', 'red');
  //选取索引为2的元素
  $('li:eq(2)').css('color', 'red');
  //odd获取的索引为奇数
  $('li:odd').css('background', 'aqua');
  //even获取的索引为偶数
  $('li:even').css('background','yellow');
  

• 筛选方法

  • 对象.方法()

    • 父级

      .parent()

    • 只找儿子 子代

      • .children()
      • 不加参数获取所有的子集，添加指定元素，按指定的找

    • 后代

      • .find()
      • 不加参数获取所有的子集，添加指定元素，按指定的找

    • 兄弟

      • .siblings()

    • 后面的

      .nextAll()

    • 前面的

      .prevAll()

    • 判断是否具有某个类名

      .hasClass('要判断的类名');

    • 指定索引

      • .eq(index)
      • 选中数组（伪数组）中需要添加事件或者样式的元素
      • 根据索引获取
      • 索引从0开始，一般事件源的索引值和需要选中数组的索引值相同

• jQuery小知识点

  • 添加事件
    • 获取的元素.事件名（事件处理程序）
  • .hide()
    • 隐藏
  • .show()
    • 显示
  • .toggle() 有就隐藏，没有就显示

6、jQuery里的排他思想

• dir 打印对象的属性和方法
• 排他使用
  • 当前元素设置样式
  • 其他的兄弟们清除样式
• 获取索引 .index()

7、jQuery样式操作

• css样式
  • 一个参数获取
  • 两个参数设置
  • $('标签').css({width: 300, height: 200, background: 'blue'})
• 设置类样式方法
  • .addClass('类名')
  • .removeClass('类名')
  • .toggleClass('类名')

8、jQuery效果

• 基本动画
  • .show([speed,[easing],[fn]])
  • .hide([speed,[easing],[fn]])
  • .toggle([speed,[easing],[fn]])
  • 1. 参数可以都省略，无动画直接显示
    2. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
    3. easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
    4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
• 滑动动画
  • slideDown([speed,[easing],[fn]])
  • slideUP([speed,[easing],[fn]])
  • slideToggle([speed,[easing],[fn]])

9、事件切换

• hover([over,] out)
  • hover(function(){}, function(){})
  • over:鼠标移到元素上要触发的函数（相当于mouseenter）
  • out:鼠标移出元素要触发的函数（相当于mouseleave）
  • 如果只写一个函数，则鼠标经过和离开都会触发它

10、动画队列及停止排队方法

• 只要触发动画，就会执行完毕，如果触发多次，就会造成多个动画或排队执行
• .stop()
  • 写到动画或者效果的前面， 相当于停止结束上一次的动画
  • 先停再启动

11、获取元素的索引

• $('li').index()