jQuery基础（一）

标签：parent   转换   兼容   属性   dex   第一个   停止   css选择器   相互转换   

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

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

  • 先停再启动

jQuery基础（一）

标签：parent   转换   兼容   属性   dex   第一个   停止   css选择器   相互转换   

原文地址：https://www.cnblogs.com/itxcr/p/11600174.html