-
前端学习笔记——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进阶
方法 | 作用 |
---|
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