欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery基础(一)

程序员文章站 2024-03-17 18:11:04
...

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