jQuery 框架学习笔记(基础)

2023-09-17 21:52:42

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

更多推荐

考研408 | 【计算机组成原理】 数据的表示和运算

进位计数制十进制计数法:推广:r进制计数法任意进制-->十进制:二进制<-->八进制、十六进制:各种进制的常见书写方式:十进制-->任意进制:十进制-->二进制(拼凑法):真值和机器数:总结:BCD码总结:无符号整数的表示和运算无符号整数在计算机中的应用:无符号整数的表示:无符号整数的加法运算:无符号整数的减法运算:总

uniapp运行到IOS真机提示 错误:请查看是否设备未加入到证书列表或者确认证书类型是否匹配

参考文章:请查看是否设备未加入到证书列表或者确认证书类型是否匹配ios开发描述文件必须绑定调试设备,只有授权的设备才可以直接安装基座,所以在申请开发描述文件之前,先添加调试的IOS设备。前往网站https://developer.apple.com,在Devices中,添加手机设备UUID第一步:登录第二步:检查设备列

VHOST-SCSI代码分析(1)VHOST SCSI设备模拟

VHOSTSCSI设备的模拟是由QEMU和HOST共同实现的,QEMU模拟VHOSTSCSI设备配置空间等,而对于虚拟机通知HOST和HOST通知虚拟机机制由HOST内核实现。在QEMU中VHOSTSCSI设备继承关系如下:其它设备以及对应class_init函数和realize具现化实现与VIRTIO-SCSI一致,

Learn Prompt-为什么用 ChatGPT API?

引用人工智能先驱吴恩达先生说过的话:“一个系统需要的远不止一个提示(prompt)或者一个对LLM(大性语言模型)的调用。”API的优点:集成更深:通过API,您可以将ChatGPT集成到自己的系统和工作流中,实现更深层次的定制和控制。个性化的响应:您可以根据特定需求和场景调整模型的响应,例如,通过改变温度(tempe

华策影视AIGC工程师招聘; 百度大模型创业松;主流大语言模型的技术原理细节;AIGC Prompt的七个缺陷 | ShowMeAI日报

👀日报&周刊合集|🎡生产力工具与行业应用大全|🧡点赞关注评论拜托啦!🎯华策影视AIGC工程师招聘,AIGC在「文娱领域」的真正落地逛即刻时发现关注的AI博主@杨昌发布了自己公司的招聘信息,而且附上了团队氛围和工作感受等分享。华策影视是影视行业龙头企业,成立了AIGC应用研究院,重视AI且不算卷。岗位base上海

Learn Prompt-ChatGPT 精选案例:学习各国语言

过去,我们学语言需要花费很多时间来学习各种材料,再联系老师修改口语、作文等,十分费时费力。有了ChatGPT之后,我们就相当于有一个免费的,实时反馈的语言学习助手,大大节省了我们的时间。下面我将以英文的雅思学习为例子,结合口语和写作,介绍如何利用ChatGPT来学习语言。口语​插件安装​正式开始之前,我们要先完成插件的

安防监控系统/视频云存储/视频监控平台EasyCVR无法级联上级平台,该如何解决?

安防视频监控系统EasyCVR平台能在复杂的网络环境中,将分散的各类视频资源进行统一汇聚、整合、集中管理,在视频监控播放上,TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放,可同时播放多路视频流,也能支持视频定时轮播。视频监控管理平台EasyCVR支持多种播放协议,包括:HLS、HTTP-F

【视频】Python用LSTM长短期记忆神经网络对不稳定降雨量时间序列进行预测分析|数据分享...

全文下载链接:http://tecdat.cn/?p=23544在本文中,长短期记忆网络——通常称为“LSTM”——是一种特殊的RNN递归神经网络,能够学习长期依赖关系(点击文末“阅读原文”获取完整代码数据)。本文使用降雨量数据(查看文末了解数据免费获取方式)进行分析。视频:LSTM神经网络架构和工作原理及其在Pyth

Zynq UltraScale+ XCZU3EG 纯VHDL解码 IMX214 MIPI 视频,2路视频拼接输出,提供vivado工程源码和技术支持

目录1、前言免责声明2、我这里已有的MIPI编解码方案3、本MIPICSI2模块性能及其优越性4、详细设计方案设计原理框图IMX214摄像头及其配置D-PHY模块CSI-2-RX模块Bayer转RGB模块伽马矫正模块VDMA图像缓存VideoScaler图像缓存DP输出5、vivado工程详解PL端FPGA硬件设计PS

云原生服务无状态(Stateless)特性的实现

文章目录为何要使用无状态服务?无状态服务的实现方法1.会话状态外部化2.负载均衡3.自动伸缩4.容器编排5.数据存储6.安全性示例:使用SpringBoot实现无状态服务结论🎉欢迎来到云计算技术应用专栏~云原生服务无状态(Stateless)特性的实现☆*o(≧▽≦)o*☆嗨~我是IT·陈寒🍹✨博客主页:IT·陈寒

一文讲解ARMv8内存属性与类型(Memory types and attributes)简介

ARMv8中将内存分为两种类型:Normalmemory和Devicememory,Normalmemory适用于系统中的大部分内存,而Devicememory则适用于外设所使用的内存。1.NormalMemoryNormalmemory类型属性适用于系统中的大多数内存。它表示架构允许硬件对这些位置执行推测数据读取访问

热文推荐