• 前端学习笔记——jQuery


    一、jQuery简介

    • 一个js的工具库,能够很方便的查询并存储出元素、操作元素。
    • jquery中的变量名一般以$开头,如:$div$var.
    • 使用$()函数获取一个jquery对象:$('span')获取所有span元素
    • 基础语法:$(selector).action(),首先获取jquery对象,然后执行操作

    二、jquery常用API

    • eq()
      读取对应索引位置的jquery对象。
      $('span').eq(2),获取所有span,并找到第三个span(索引值从零开始),返回的是一个jquery对象。
    • get()
      获取对应索引位置的dom对象。
      $('iuput').get(0),获取所有input,并找到第一个,返回的是一个dom对象,等价于('input')[0]
    • append()
      将参数jquery对象添加到调用append()的对象末尾
      $('div').append($('span')),将 ( ′ s p a n ′ ) 添加到 ('span')添加到 (span)添加到(‘div’)里
    • appendto()
      将调用appendto()的jquery对象添加到参数对象末尾
    • prepend()
      将参数jquery对象添加到调用prepend()的对象开头
    • prependto()
      将调用prependto()的jquery对象添加到参数对象开头
    • before()
      将调用before()的对象添加到参数对象之前
    • after()
      将调用after()的对象添加到参数对象之后
    • 设置样式类
      css()获取或设置样式。
      addClass()添加类。
      hasClass()判断是否包含某个类。
      removeClass()移除类。
    • 设置属性
      attr()获取或读取属性。
      removeAttr()移除属性。
    • 绑定事件
      事件名()绑定事件;
      addEventListener()添加事件监听;
      on()绑定事件;
      one()绑定一次性事件;
      off()解除事件绑定;
    • 设置内容
      text()设置文本内容,相当于innerText;
      html()设置内容,相当于innerHtnl;
    • 遍历元素
      each()参数是一个回调函数,该回调函数可以获取两个参数,第一个表示当前遍历元素的索引,第二个参数表示当前遍历元素,该元素是一个dom对象而不是jquery对象!

    三、jquery进阶

    • jquery动画特效
    方法作用
    show显示元素
    hide隐藏元素
    toggle开关元素/原理是设置元素的display属性
    animate自定义动画
    fadeIn渐入
    fadeOut渐出
    fadeTo渐变到指定透明度
    fadeToggle开关渐变
    slideUP滑上
    slideDown滑下
    slideToggle滑动开关
    • ready事件
      jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。然而,如果在页面渲染完成前调用jquery方法会无法生效,因为它找不到对应的dom对象,ready事件在界面加载完成后执行回调函数:
      $().ready(callback)等价于$(callback)
    • 设置元素的位置与大小
    方法作用
    position只读,获取元素相对于其父元素的位置
    offset获取相对于视口的位置,可以对其赋值
    width、height获取元素宽高,可赋值
    innerWidth,innerHeight获取宽高(内容加内边距)
    outerWidth,outerHeight获取宽高(内容加内边距加边框)
    scrollTop,scrollLeft获取滚动条位置,可赋值
  • 相关阅读:
    STM32_USART
    Tlsr8258开发-读写内部flash
    【随想】每日两题Day.3(实则一题)
    从元宇宙到Web3.0,“新赛道”的职场人该怎么找工作?
    Android v1+v2 命令行签名
    FPBJXDN224、FPBJXDV224插头式电比例节流阀放大器
    XCTF1-web unseping
    东郊到家app小程序公众号软件开发预约同城服务系统成品源码部署
    【Hive】建表时的存储格式
    Day44-JSP基础语法与指令、JVM原理(补充了解)
  • 原文地址:https://blog.csdn.net/zero_zero_seven/article/details/126767953