jQuery 框架学习笔记(基础)

news2024/12/29 14:00:52

What

jQuery 是一种快速、简洁跨游览器的 JavaScript 函数库,其宗旨是“Write less, Do more”,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

注意:jQuery 不是将所有的 JS 封装,只是有选择性的封装

特点:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对 css 选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

Why

各种游览器获取异步对象的方式不尽相同(AJAX),而 jQuery 能屏蔽掉这些不兼容的东西以达到一种统一。这就是使用它的理由之一:兼容能力

回顾 JavaScript 上,它定位 HTML 控件的方式有三种:

  1. 通过 ID 属性:document.getElementById()
  2. 通过 NAME 属性:document.getElementsByName()
  3. 通过标签名:document.getElementByTagName()

明显可见,JavaScript 的方法名有够长的,不易书写...... 发现规律:

  • 传入参数是以“#”开头的字符串 = ID 属性
  • 传入参数不以“#”开头且也没有前缀修饰的字符串 = 标签名属性(剩下那个就不用说了吧)

How

jQuery 对象与 JavaScript 对象之间的关系
jQueryJavaScript
对象  =数组this 代表当前对象
转为 JavaScript / jQuery其数组索引的结果就是 JavaScript 对象$(JS 对象 )

注意:jQuery 和 JavaScript 都只能去调用各自的 API

jQuery提供定位 HTML 控件的九个选择器

选择器名称描述
基本选择器直接定位 id、类修修饰器、标签
层次选择器有父子,兄弟关系的标签
增强基本选择器大于、小于、等于、奇偶数的标签
内容选择器定义内容为 XXX、内容中是否有标签器、含有子元素或者文本的标签
可见性选择器可见或不可见的标签
属性选择器与属性的值相关
子元素选择器匹配父标签下的子标签
表单选择器匹配表单对应的控件属性
表单对象属性选择器匹配表单属性具体的值

jQuery API

DOM 分类

DOM-HTML

DOM 操作 html 标签中的内容,如:

document.creteElement("img")

DOM-CSS

DOM 操作 css 样式,如:

imgElement.style.visbility = "hidden"

核心 DOM

该 DOM 不只操作 JS 语言,如:

dom4j 解析 xml 标签

追加
append()追加到父元素之后
prepend()追加到父元素之前
after()追加到兄弟元素之后
before()追加到兄弟元素之前

查询层次关系
children()只查询子节点,但不含后代节点
next()下一个相邻兄弟节点
prev()上一个相邻兄弟节点
siblings()所有兄弟节点
css 样式
addClass()增加已存在的样式
removeClass()删除已存在的样式
hasClass()判断标签是否有指定的样式,true 表示有样式,false 表示无样式
toggleClass()如果标签有样式就删除,否则增加样式
动画效果

show()

显示对象
hide()隐藏对象
fadeIn()淡入显示对象
fadeOut()淡出隐藏对象
slideUp()向上滑动
slideDown()向下滑动
slideToggle()上下切换滑动,速度快点
迭代
each()是jQuery中专用于迭代数组的方法,参数为一个处理函数,this表示当前需要迭代的js对象

更多 DOM API 就不列举了

JavaScript 一大特性就是事件驱动,当用户用了执行了某些动作以后,JavaScript 就会响应事件,在事件的方法上,我们就可以对用户的动作“回馈”一些信息给用户!

jQuery也对 JavaScript 事件进行了封装,我们看一下以下的API:

  • window.onload:在浏览器加载 web 页面时触发,可以写多次 onload 事件,但后者覆盖前者

  • ready:在浏览器加载 web 页面时触发,可以写多次 ready 事件,不会后者覆盖前者,依次从上向下执行,我们常用$(函数)简化

(注意!ready 和 onload 同时存在时,二者都会触发执行,ready 快于 onload)

  • change:当内容改变时触发

  • focus:焦点获取

  • select:选中所有的文本值

  • keyup/keydown/keypress:演示在IE和Firefox中获取event(事件)对象的不同

  • mousemove:在指定区域中不断移动触发

  • mouseover:鼠标移入时触发

  • mouseout:鼠标移出时触发

  • submit:在提交表单时触发,true 表示提交到后台,false 表示不提交到后台

  • click:单击触发

  • dblclick:双击触发

  • blur:焦点失去

鼠标 / 键盘事件

属性描述
altKey返回当事件被触发时,"ALT"是否被按下。
button返回当事件被触发时,哪个鼠标按钮被点击。
clientX返回当事件被触发时,鼠标指针的水平坐标。
clientY返回当事件被触发时,鼠标指针的垂直坐标。
ctrlKey返回当事件被触发时,"CTRL"键是否被按下。
metaKey返回当事件被触发时,"meta"键是否被按下。
relatedTarget返回与事件的目标节点相关的节点。
screenX返回当某个事件被触发时,鼠标指针的水平坐标。
screenY返回当某个事件被触发时,鼠标指针的垂直坐标。
shiftKey返回当事件被触发时,"SHIFT"键是否被按下。

我们在开始使用JavaScript学习AJAX的时候,创建异步对象时,需要根据不同的浏览器来创建不同的对象….装载XML文件的时候,也有兼容性的问题。

Jquery就很好地屏蔽了浏览器不同的问题,不需要考虑浏览器兼容的问题,这是非常非常方便我们开发的。以下是 jQuery 在 AJAX 技术中常用的 API

  • $.ajax([options])

  • load(url, [data], [callback])

  • $.get(url, [data], [fn], [type])

  • $post(url, [data], [callback], [type])

  • serialize()

就不作解析了,看看总结吧!

  1. load() 方法是使用 jQuery 的对象来进行调用的,得到服务器的结果自动会把结果嵌套到所在的标签中。

  2. get() 方法不是使用 jQuery 对象来调用,因此需要手动把结果放在想要放的位置

  3. post() 方法是用来把参数带过去给服务器的,因此我们需要在 Servlet 上手动设置编码。用法与 get() 方法一样

  4. serialize() 是非常好用的一个方法,不需要我们手动去拼接参数,会自动把 form 表单的参数封装成 JSON 格式的数据

  5. 至于 $.ajax() 方法,实际上就是集合了 get() 和 post() 方法

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

浏览器清除所有断点

浏览器清除所有断点 问题分析 问题 谷歌浏览器清除所有断点 分析 在打断点的 Source 栏下 1、右键Breakpoints下的内容。 2、弹出选项,点击remove all breakpoints。

MySQL常用函数集锦 --- 字符串|数值|日期|流程函数总结

个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【MySQL学习专栏】🎈 本专栏旨在分享学习MySQL的一点学习心得,欢迎大家在评论区讨论💌 目录 一、字符…

请问一下就是业务概念模型和业务逻辑模型有啥关系

请问一下就是业务概念模型和业务逻辑模型有啥关系? 业务概念模型和业务逻辑模型是业务建模的两个关键组成部分,两者密切相关但又有所不同。 1.业务概念模型:这是对业务术语、定义和关系的一种抽象表示。它是从业务专家那里获得的知识&#…

ES6的代理模式 | Proxy

🎬 岸边的风:个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想,就是为了理想的生活 ! 目录 正文 语法 Handler 对象常用的方法 handler.get 可撤消的Proxy Proxy的应用场景 校验器 私有属性 为什么要…

nacos安装和入门

Nacos是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 一、Nacos在mac环境的服务搭建 1、首先进入Nacos官网,链接 2、点击前往Github,点击红色链接。 3、选择相应版本下载。 4、下载之后解压。 5、在终端执行以下命令启动Nacos…

为什么 InfiniBand 网络在高性能计算数据中心如此重要?

随着数据分析和机器学习等高数据吞吐量应用的快速扩展,对高带宽和低延迟互连的需求也扩展到更广阔的市场。为更好应对这一需求,越来越多的高性能计算数据中心选择采用InfiniBand技术。相较于以太网,InfiniBand是一种专为高速互连而设计的网络…

使用jupyter运行sympy库

1.首先下载sympy插件: (1)在下图这里输入cmd (2)pip install sympy 若出现不信任此资源错误,改成pip install sympy--trusted-host pypi.tuna.tsinghua.edu.cn (3)检查是否安装成功 python import sympy sympy.__version__&#…

PCB走线规则

1、线间距。 这里应该遵循3W规则,所谓3W就是为了减少线间串扰,应保证线间距足够大,当线中心不少于3倍线宽,则可 保持70%的电场不互相干扰。如要达到98%的电场不互相干扰,可使用10W的间距。——这是查阅华为PCB布线规则…

UDP与TCP报头介绍,三次握手与四次挥手详谈

先介绍我们UDP/TCP协议缓冲区 在UDP和TCP在数据传输和介绍时有有缓冲区概念的。 UDP缓冲区 UDP没有真正意义上的 发送缓冲区. 调用sendto会直接交给内核, 由内核将数据传给网络层协议进行后 续的传输动作; UDP具有接收缓冲区. 但是这个接收缓冲区不能保证收到的UDP报的顺序…

repmgr管理pg高可用

repmgr用于管理 PostgreSQL 服务器集群内的复制和故障转移,类似dg-broker,可以实现swichover和failover。 整体架构 repmgr架构图如下: 每个节点都可通过 repmgrd 守护进程来监控节点数据库状态;每个节点元数据表可独立维护&…

Stream流处理快速上手最佳实践 | 京东物流技术团队

一 引言 JAVA1.8得益于Lambda所带来的函数式编程,引入了一个全新的Stream流概念Stream流式思想类似于工厂车间的“生产流水线”,Stream流不是一种数据结构,不保存数据,而是对数据进行加工处理。Stream可以看作是流水线上的一个工…

深度解析NLP文本摘要技术:定义、应用与PyTorch实战

目录 1. 概述1.1 什么是文本摘要?1.2 为什么需要文本摘要? 2. 发展历程2.1 早期技术2.2 统计方法的崛起2.3 深度学习的应用2.4 文本摘要的演变趋势 3. 主要任务3.1 单文档摘要3.2 多文档摘要3.3 信息性摘要 vs. 背景摘要3.4 实时摘要 4. 主要类型4.1 抽取…

【Linux进行时】进程状态

进程状态: ❓假设我们在上课,在B站上上课,请问我们的B站是不是一直运行呢?💡不是的! ❓假设我们同时打开了B站和PDF阅读器时,是怎么运行的呢? 💡每一个进程在CPU跑一会&a…

Layui快速入门之第十三节 日期与时间选择器

目录 一:基本用法 API 渲染 属性 弹出提示 2.8 获取实例 2.8 解除实例绑定 2.8 关闭日期面板 2.7 获取某月的最后一天 二:常规用法 三:多类型选择器 四:范围选择 五:直接静态显示 六:更多功能…

Vue入门--vue的生命周期

一.什么是Vue 二.Vue的简介 官方网址 特点 三. 前后端的分离 重大问题 优势 4.Vue入门 定义一个管理边界 ​编辑 测试结果 vue的优势 ​编辑 测试结果 5.Vue的生命周期 vue的生命周期图 ​编辑建立一个html 测试结果 一.什么是Vue Vue是一种流行的JavaScript前端框…

华为云云耀云服务器L实例评测|使用宝塔10分钟部署一个围猫猫小游戏

目录 前言一、选择华为云云耀云服务器L实例的原因二、华为云云耀云服务器的优势三、快速部署一个小游戏(1)终端部署1、使用Termius工具连接终端2、安装Nginx3、上传打包文件 (2)宝塔可视化面板部署1、进入宝塔2、宝塔菜单3、上传代…

【实训项目】你好,教练-校园私教平台的设计与开发

1.设计摘要 随着社会的进步,人们的健康意识逐渐提高,越来越多的人选择在闲暇时间健身,在大学生群体中,这一现象犹为明显。在大学城内,有多家健身房供同学选择,也有许多同学选择在操场或者宿舍内自己健身&a…

使用Seata实现分布式事务

Seata 一:故事背景二:使用方法2.1 下载安装Seata2.4 修改对应配置文件。2.4.1 配置中心2.4.1 注册中心2.4.2 日志保存模式 2.3 启动Seata2.4 项目中集成2.5 数据库内新建undo_log 表进行日志记录2.6 编写代码测试Seata提供的分布式事务功能 三&#xff1…

带你熟练使用list

🎈个人主页:🎈 :✨✨✨初阶牛✨✨✨ 🐻强烈推荐优质专栏: 🍔🍟🌯C的世界(持续更新中) 🐻推荐专栏1: 🍔🍟🌯C语言初阶 🐻推荐专栏2: 🍔…

EdgeX Foundry MQTT设备服务

一、部署edgex 1.运行命令行,进入放置docker-compose-fuji-no-secty.yml文件的路径下 下载到本地的docker-compose文件 执行: docker-compose -f docker-compose-fuji-no-secty.yml pull 拉取相关镜像,这里默认将文件中没有注释的服务镜像全部…