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)

• 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()

  • 写到动画或者效果的前面， 相当于停止结束上一次的动画

  • 先停再启动