前端学习笔记——jQuery

最新推荐文章于 2025-07-19 13:29:50 发布

原创最新推荐文章于 2025-07-19 13:29:50 发布 · 748 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #jquery #学习

本文详细介绍了jQuery的基础知识，包括jQuery的简介、常用API及进阶特性。重点讲解了如何选取元素、操作DOM、添加删除样式、绑定事件以及实现动画效果。同时，提到了ready事件在页面加载后的应用，以及设置元素位置和大小的方法。适合前端开发者深入理解jQuery的使用。

Index

一、jQuery简介
二、jquery常用API
三、jquery进阶

一、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^{'}) 添加到$ (‘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进阶

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	获取滚动条位置，可赋值