【前端】JQuery（学习笔记）

一、JQuery概述

1、JQuery框架

JQuery：一个JavaScript框架。简化JS开发

JavaScript框架：本质上就是一些js文件，封装了js的原生代码

2、JQuery版本

1）1.x

兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了。

最终版本：1.12.4 (2016年5月20日)

2）2.x

不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x。

最终版本：2.2.4 (2016年5月20日)

3）3.x

不兼容ie678，只支持最新的浏览器。除非特殊要求。一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。

目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）

3、开发版本和生产版本

jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些

jquery-xxx.min.js：生产版本。程序中使用，没有缩进换号。体积小一些。程序加载更快

4、JQuery导入

<script src=".../js/jquery-3.3.1.min.js"></script>

二、JQuery对象

1、与JS对象区别

  1. JQuery对象在操作时，更加方便
  2. JQuery对象和js对象方法不通用的

2、相互转换

  1. jq – > js：jq对象[索引] / jq对象.get(索引)
  2. js – > jq：$(js对象)

三、JQuery选择器

1、选择器概述

选择器：筛选具有相似特征的元素(标签)

2、基本操作

1）事件绑定
$("#b1").click(function(){alert("abc");
});
2）入口函数
$(function () {...
});

window.onload 和 $(function) 区别

  1. window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
  2. $(function)可以定义多次的
3）样式控制：css()
$("#div1").css("backgroundColor","pink");

3、分类

1）基本选择器
  1. 标签选择器(元素选择器)：$("html标签名")
    获得所有匹配标签名称的元素
  2. id选择器：$("#id的属性值")
    获得与指定id属性值匹配的元素
  3. 类选择器：$(".class的属性值")
    获得与指定的class属性值匹配的元素
  4. 并集选择器：$("选择器1,选择器2....")
    获取多个选择器选中的所有元素
2）层级选择器
  1. 后代选择器：$("A B")
    选择A元素内部的所有B元素
  2. 子选择器：$("A > B")
    选择A元素内部的所有B子元素
3）属性选择器
  1. 属性名称选择器 ：$("A[属性名]")
    包含指定属性的选择器
  2. 属性选择器：$("A[属性名='值']")
    包含指定属性等于指定值的选择器
  3. 复合属性选择器：$("A[属性名='值'][]...")
    包含多个属性条件的选择器
4）过滤选择器
  1. 首元素选择器： (selector):first
    获得选择的元素中的第一个元素
  2. 尾元素选择器：(selector):last
    获得选择的元素中的最后一个元素
  3. 非元素选择器：(selector):not(selector)
    不包括指定内容的元素
  4. 偶数选择器：(selector):even
    偶数，从 0 开始计数
  5. 奇数选择器：(selector):odd
    奇数，从 0 开始计数
  6. 等于索引选择器：(selector):eq(index)
    指定索引元素
  7. 大于索引选择器：(selector):gt(index)
    大于指定索引元素
  8. 小于索引选择器：(selector):lt(index)
    小于指定索引元素
  9. 标题选择器：(selector):header
    获得标题（h1~h6）元素，固定写法
5）表单过滤选择器
  1. 可用元素选择器：(selector):enabled
    获得可用元素
  2. 不可用元素选择器：(selector):disabled
    获得不可用元素
  3. 选中选择器：(selector):checked
    获得单选/复选框选中的元素
  4. 选中选择器：(selector):selected
    获得下拉框选中的元素

四、DOM操作

1、内容操作

  1. html()：获取/设置元素的标签体内容
  2. text()：获取/设置元素的标签体纯文本
  3. val()：获取/设置元素的value属性值

2、通用属性操作

  1. attr()：获取/设置元素的固有属性
  2. removeAttr()：删除固有属性
  3. prop()：获取/设置元素的自定义的属性
  4. removeProp()：删除自定义的属性

3、对class属性操作

  1. addClass()：添加class属性值
  2. removeClass()：删除class属性值
  3. toggleClass()：切换class属性
  4. css()

4、CRUD操作

  1. append()：父元素将子元素追加到末尾
    对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
  2. prepend()：父元素将子元素追加到开头
    对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头
  3. appendTo()
    对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在末尾
  4. prependTo()
    对象1.prependTo(对象2)：将对象1添加到对象2内部，并且在开头
  5. after()：添加元素到元素后边
    对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
  6. before()：添加元素到元素前边
    对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
  7. insertAfter()
    对象1.insertAfter(对象2)：将对象1添加到对象2后边。对象1和对象2是兄弟关系
  8. insertBefore()
    对象1.insertBefore(对象2)： 将对象1添加到对象2前边。对象1和对象2是兄弟关
  9. remove()：移除元素
    对象.remove()：将对象删除掉
  10. empty()：清空元素的所有后代元素。
    对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点

五、JQuery动画

1、默认动画

  1. show([speed],[easing],[fn]])
  2. hide([speed],[easing],[fn]])
  3. toggle([speed],[easing],[fn])

2、滑动动画

  1. slideDown([speed],[easing],[fn])
  2. slideUp([speed],[easing],[fn]])
  3. slideToggle([speed],[easing],[fn])

3、淡入淡出动画

  1. fadeIn([speed],[easing],[fn])
  2. fadeOut([speed],[easing],[fn])
  3. fadeToggle([speed],[easing],[fn])

4、动画参数

  1. speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
  2. easing：用来指定切换效果
    1. swing：默认。动画执行时效果"先慢，中间快，最后又慢"
    2. linear：动画执行时速度是匀速的
  3. fn：在动画完成时执行的函数，每个元素执行一次。

六、JQuery遍历

1、JS遍历

for(初始化值;循环结束条件;步长)

2、jq遍历

  1. jq对象.each(callback)
    1. 回调函数参数
      1. index：索引
      2. element：每一个元素对象
      3. this：每一个元素对象
    2. 回调函数返回值
      1. true：break
      2. false：continue
  2. $.each(object, [callback])
  3. for..of：for(元素对象 of 容器对象) jquery 3.0 版本之后提供的方式

七、JQuery事件绑定

1、标准方法

  1. jq对象.事件方法(回调函数)；
  2. 如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。

2、on/off方法

  1. jq对象.on(“事件名称”,回调函数)
  2. jq对象.off(“事件名称”)
  3. jq对象.off()：解绑所有事件

3、事件切换

jq对象.toggle(fn1,fn2...)

单击jq对象对应的组件后，会循环执行回调函数

1.9版本 .toggle() 方法删除，jQuery Migrate（迁移）插件可以恢复此功能。

<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

八、JQuery插件

作用：增强jq的功能

实现方式：

  1. 增强对象：$.fn.extend(object)
  2. 增强$： $.extend(object)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/590648.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Ts自封装WebSocket心跳重连

Ts自封装WebSocket心跳重连

WebSocket是一种在单个TCP连接上进行全双工通信的协议&#xff0c;允许客户端和服务器之间进行双向实时通信。 所谓心跳机制&#xff0c;就是在长时间不使用WebSocket连接的情况下&#xff0c;通过服务器与客户端之间按照一定时间间隔进行少量数据的通信来达到确认连接稳定的手…
阅读更多...
【PostgreSQL】从零开始:（四十二）系统列

【PostgreSQL】从零开始:（四十二）系统列

PostgreSQL 中的系统列 PostgreSQL 中的系统列是一组特殊的列&#xff0c;用于存储关于表和视图的元数据信息。这些列是由 PostgreSQL 数据库自动创建和维护的&#xff0c;并且不能直接修改或删除。 每个表都有多个系统列&#xff0c;这些列由系统隐式定义。因此&#xff0c;…
阅读更多...
目标检测YOLO实战应用案例100讲-基于小样本学习的光伏红外图像缺陷 检测

目标检测YOLO实战应用案例100讲-基于小样本学习的光伏红外图像缺陷 检测

目录 前言 国内外研究现状 光伏智能运维发展现状 航拍图像光伏检测研究现状
阅读更多...
HarmonyOS4.0系统性深入开发11通过message事件刷新卡片内容

HarmonyOS4.0系统性深入开发11通过message事件刷新卡片内容

通过message事件刷新卡片内容 在卡片页面中可以通过postCardAction接口触发message事件拉起FormExtensionAbility&#xff0c;然后由FormExtensionAbility刷新卡片内容&#xff0c;下面是这种刷新方式的简单示例。 在卡片页面通过注册Button的onClick点击事件回调&#xff0c;…
阅读更多...
数据库中的时间和前台展示的时间不一样，如何保存日期格式的数据到数据库？ 如何展示数据库的日期数据到前台

数据库中的时间和前台展示的时间不一样，如何保存日期格式的数据到数据库？ 如何展示数据库的日期数据到前台

我 | 在这里 &#x1f575;️ 读书 | 长沙 ⭐软件工程 ⭐ 本科 &#x1f3e0; 工作 | 广州 ⭐ Java 全栈开发&#xff08;软件工程师&#xff09; ✈️公众号 | 热爱技术的小郑 文章底部有个人公众号二维码。回复 Java全套视频教程 或 前端全套视频教程 即可获取 300G 教程资料…
阅读更多...
【深入浅出RocketMQ原理及实战】「云原生升级系列」打造新一代云原生“消息、事件、流“统一消息引擎的融合处理平台

【深入浅出RocketMQ原理及实战】「云原生升级系列」打造新一代云原生“消息、事件、流“统一消息引擎的融合处理平台

打造新一代云原生"消息、事件、流"统一消息引擎的融合处理平台 云原生架构RocketMQ的云原生架构实现RocketMQ的云原生发展历程互联网时期的诞生无法支持云原生的能力 云原生阶段的升级云原生升级方向促进了Mesh以及多语言化发展可分合化的存算分离架构存储分离架构的…
阅读更多...
数据结构OJ实验2-链表

数据结构OJ实验2-链表

A. DS单链表--存储结构与操作 题目描述 实现含头结点的单链表 属性包括&#xff1a;data数据域、next指针域 操作包括&#xff1a;插入、删除、查找 注意&#xff1a;单链表不是数组&#xff0c;所以位置从1开始对应首结点&#xff0c;头结点不放数据 输入 第1行先输入n…
阅读更多...
听GPT 讲Rust源代码--library/portable-simd

听GPT 讲Rust源代码--library/portable-simd

File: rust/library/portable-simd/crates/core_simd/examples/spectral_norm.rs spectral_norm.rs是一个示例程序&#xff0c;它展示了如何使用Portable SIMD库中的SIMD&#xff08;Single Instruction Multiple Data&#xff09;功能来实现频谱规范化算法。该示例程序是Rust源…
阅读更多...
跟着cherno手搓游戏引擎【2】：日志系统spdlog和premake的使用

跟着cherno手搓游戏引擎【2】：日志系统spdlog和premake的使用

配置&#xff1a; 日志库文件github&#xff1a; GitHub - gabime/spdlog: Fast C logging library. 新建vendor文件夹 将下载好的spdlog放入 配置YOTOEngine的附加包含目录&#xff1a; 配置Sandbox的附加包含目录&#xff1a; 包装spdlog&#xff1a; 在YOTO文件夹下创建…
阅读更多...
在Django中配置PostgreSQL

在Django中配置PostgreSQL

下载并安装PostgreSQL PostgreSQL: Downloads 安装依赖psycopg2 python -m pip install psycopg2 修改Django配置文件settings.py &#x1f4cc;编辑 mysite/settings.py 文件前&#xff0c;先设置 TIME_ZONE 为你自己时区。 LANGUAGE_CODE zh-Hans TIME_ZONE Asia/Shang…
阅读更多...
【Elasticsearch源码】 分片恢复分析

【Elasticsearch源码】 分片恢复分析

带着疑问学源码&#xff0c;第七篇&#xff1a;Elasticsearch 分片恢复分析 代码分析基于&#xff1a;https://github.com/jiankunking/elasticsearch Elasticsearch 8.0.0-SNAPSHOT 目的 在看源码之前先梳理一下&#xff0c;自己对于分片恢复的疑问点&#xff1a; 网上对于E…
阅读更多...
【基础】【Python网络爬虫】【12.App抓包】reqable 安装与配置（附大量案例代码）（建议收藏）

【基础】【Python网络爬虫】【12.App抓包】reqable 安装与配置（附大量案例代码）（建议收藏）

Python网络爬虫基础 App抓包1. App爬虫原理2. reqable 的安装与配置reqable 安装教程reqable 的配置 3. 模拟器的安装与配置夜神模拟器的安装夜神模拟器的配置配置代理配置证书 4. 内联调试及注意事项软件启动顺开启抓包功reqable面板功列表部件功能列表数据快捷操作栏 夜神模拟…
阅读更多...
【ASP.NET Core 基础知识】--目录

【ASP.NET Core 基础知识】--目录

介绍 1.1 什么是ASP.NET Core1.2 ASP.NET Core的优势1.3 ASP.NET Core的版本历史 环境设置 2.1 安装和配置.NET Core SDK2.2 使用IDE&#xff08;Integrated Development Environment&#xff09;&#xff1a;Visual Studio Code / Visual Studio 项目结构 3.1 ASP.NET Core项…
阅读更多...
WPF+Halcon 培训项目实战 完结(13):HS 鼠标绘制图形

WPF+Halcon 培训项目实战 完结(13):HS 鼠标绘制图形

文章目录 前言相关链接项目专栏运行环境匹配图片矩形鼠标绘制Halcon添加右键事件Task封装运行结果个人引用问题原因推测 圆形鼠标绘制代码运行结果 课程完结&#xff1a; 前言 为了更好地去学习WPFHalcon&#xff0c;我决定去报个班学一下。原因无非是想换个工作。相关的教学视…
阅读更多...
洛谷基础题

洛谷基础题

输出保留 3 位小数的浮点数 题目描述 读入一个单精度浮点数&#xff0c;保留 3 3 3 位小数输出这个浮点数。 提示&#xff1a;就这题来说&#xff0c;请使用 float 类型的单精度浮点数。 输入格式 只有一行&#xff0c;一个单精度浮点数。 输出格式 也只有一行&#xf…
阅读更多...
【java爬虫】股票数据获取工具前后端代码

【java爬虫】股票数据获取工具前后端代码

前面我们有好多文章都是在介绍股票数据获取工具&#xff0c;这是一个前后端分离项目 后端技术栈&#xff1a;springboot&#xff0c;sqlite&#xff0c;jdbcTemplate&#xff0c;okhttp 前端技术栈&#xff1a;vue&#xff0c;element-plus&#xff0c;echarts&#xff0c;ax…
阅读更多...
K8s实战入门

K8s实战入门

1.NameSpace Namespace是kubernetes系统中的一种非常重要资源&#xff0c;它的主要作用是用来实现多套环境的资源隔离或者多租户的资源隔离。 默认情况下&#xff0c;kubernetes集群中的所有的Pod都是可以相互访问的。但是在实际中&#xff0c;可能不想让两个Pod之间进行互相…
阅读更多...
MFC - CArchive/内存之间的序列化应用细节

MFC - CArchive/内存之间的序列化应用细节

文章目录 MFC - CArchive/内存之间的序列化应用细节概述笔记END MFC - CArchive/内存之间的序列化应用细节 概述 有个参数文件, 开始直接序列化到文件. 现在优化程序, 不想这个参数文件被用户看到. 想先由参数发布程序(自己用)设置好参数后, 加个密落地. 等用户拿到后, 由程序…
阅读更多...
机器学习笔记 - 什么是匈牙利算法？有什么用处？

机器学习笔记 - 什么是匈牙利算法？有什么用处？

一、什么是匈牙利算法？ 匈牙利算法是一种优化算法，可以在多项式时间内解决分配问题。该算法也被称为Kuhn-Munkres 算法或Munkres 分配算法。 匈牙利算法由以下四个步骤组成。 前两个步骤执行一次，而步骤 3 和 4 则重复执行，直到找到最佳分配。该算法的输入是一个仅包含非负…
阅读更多...
layui的表单中的一些常见的标签的含义，含在线实战。

layui的表单中的一些常见的标签的含义，含在线实战。

表单提交&#xff1a; lay-submit和lay-filter组合使用实现表单的提交,注意这个必须有两个&#xff0c;不然实现不了表单的提交喔&#xff0c;例如 <button class"layui-btn layui-btn-normal" lay-filter"login_button" lay-submit"">登…
阅读更多...
最新文章

Copyright @ 2022~2023