前端学习之Jquery
1|0一、JQuery介绍
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
2|0二、JQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。
3|0三、JQuery 内容
- 选择器
- 筛选器
- 样式操作
- 文本操作
- 属性操作
- 文档操作
- 事件
- 动画效果
- 插件
- each、data、Ajax
下载连接:jQuery官网
中文文档:jQuery AP中文文档
4|0四、JQuery对象
-
jQuery对象就是通过jQuery包装DOM对象后产生的对象
-
jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。
-
虽然
jQuery对象
是包装DOM对象
后产生的,但是jQuery对象
无法使用DOM对象
的任何方法,同理DOM对象
也没不能使用jQuery
里的方法。
5|0五、JQuery创建对象
一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$:
jq对象和DOM对象之间的相互转换:
jQuery对象和DOM对象的使用:
6|0六、JQuery的基础语法
6|16.1 基本元素选择器
6|26.2 基本元素筛选器
实例1:
7|0七、属性选择器
属性选择器语法:
实例:
8|0八、筛选器方法
下一个元素:
上一个元素:
父亲元素:
儿子和兄弟元素:
8|18.1 查找(find)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
8|28.2 筛选(filter)
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
补充:
9|0九、表单元素选择器
实例1:
10|0十、表单对象属性
实例1:找到可用的input标签
实例2:找到被选中的option
11|0十一、操作标签
11|111.1 样式操作(CSS)
实例:
11|211.2 位置操作
.offset()
方法允许我们检索一个元素相对于文档(document)的当前位置。
和 .position()
的差别在于: .position()
是相对于相对于父级元素的位移。
11|311.3 尺寸操作
11|411.4 文本操作
HTML代码:
文本值:
值:
实例:获取被选中的checkbox或radio的值
11|511.5 属性操作
用ID等或自定义属性
用于checkbox和radio
注意:
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr("checked", "checked")。
11|611.6 porp和attr的区别
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。
举例1:
测试2:针对自定义属性,attr和prop的区别:
总结:
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
11|711.7 文档处理
把一个标签添加到指定的元素内部的最后(最后一个子节点之后)
把一个元素标签添加到指定元素内部的最签名(第一个子节点之前)
添加到指定元素外部的后面(最后一个兄弟节点)
添加到指定元素外部的最前面(第一个兄弟节点的最前面)
移除和清空元素
12|0十二、事件
12|112.1 常用事件
12|212.2 事件绑定
- events: 事件
- selector: 选择器(可选的)
- function: 事件处理函数
12|312.3 移出事件
off()
方法移除用 .on()
绑定的事件处理程序。
- events: 事件
- selector: 选择器(可选的)
- function: 事件处理函数
12|412.4 阻止后续事件执行
return false; // 常见阻止表单提交等
- e.preventDefault();
实例:
友情提醒:像click、keydown等DOM中定义的事件,我们都可以使用.on()
方法来绑定事件,但是hover
这种jQuery中定义的事件就不能用.on()
方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数,可以参照如下代码分两步绑定事件:
12|512.5 组织事件冒泡
12|612.6 页面加载
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。(window.onload() 等待html中的所有元素都加载完毕)
两种写法(方法1):
(方法二):简写
阻止事件冒泡实例:
12|712.7 JQ页面加载DOM页面加载的区别
- window.onload()函数有覆盖现象,必须等待着图片资源加载完成之后才能调用
- jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数)
12|812.8 事件委托
事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。
实例:通过最父级的body标签设定click事件,这样html中所有的button都具有这个事件
13|0十三、动画效果
点赞特效:
14|0十四、each
jQuery.each(collection, callback(indexInArray, valueOfElement)):
描述:一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。
.each(function(index, Element)):
描述:遍历一个jQuery对象,为每个匹配元素执行一个函数。
.each()
方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的,所以关键字 this
总是指向这个元素。
注意: jQuery的方法返回一个jQuery对象,遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时,它通常不需要显式地循环的 .each()
方法:
也就是说,上面的例子没有必要使用each()方法,直接像下面这样写就可以了:
注意:在遍历过程中可以使用 return false
提前结束each循环。
终止each循环:return false
15|0十五、文件阅读器
通过文件阅读器在线预览
16|0十六、JQuery序列化表单数据
1、serialize() 方法:
serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。
您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中,这样在ajax提交表单数据时,就不用一一列举每一个参数,只需将data参数设置为:$("form").serialize()即可。
输出标准的查询字符串:a=1&b=2&c=3&d=4&e=5
注释:只会将“成功的控件”序列化为字符串。(即指没被禁用的元素)如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。
2、serializeArray() 方法:
serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。
您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。
注意:此方法返回的是 JSON 对象而非 JSON 字符串。
返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:
特别说明,元素不能被禁用(禁用的元素不会被包括在内),并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。
注意:1、不被禁用;2、包含name属性
__EOF__
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· 趁着过年的时候手搓了一个低代码框架
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现