当前位置：网站首页 > IT知识 > 正文

JavaScript学习笔记(三十一)—jQuery(上)

liuian 2024-12-30 05:16 59 浏览

jQuery

jQuery 是一个前端库，也是一个方法库
他里面封装着一些列的方法供我们使用
我们常用的一些方法它里面都有，我们可以直接拿来使用就行了
jQuery 之所以好用，很多人愿意使用，是因为它的几个优点太强大了

优质的选择器和筛选器
好用的隐式迭代
强大的链式编程

因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”
接下来我们就来认识一下 jQuery

jQuery 的使用

jQuery官网

官网是全英文的
也没啥可看的，不过没事的时候可以看看了解一下

jQuery方法大全中文网

这个网站可以多看看
里面是 jQuery 的方法大全，而且是中文的

我们要使用 jQuery 首先要下载一个

可以去官网下载，也可以直接百度搜索下载，都可以

然后就是在页面里面引入 jQuery.js 就行了

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <script src="./jquery/jquery.js"></script>
</body>
</html>

然后就可以开始使用了
jQuery 向全局暴露的接口就是 jQuery 或者 $ 都行

选择器和筛选器

选择器和筛选器就是用来帮我们获取 DOM 元素的

选择器

jQuery 有着相当强大的选择器

// 按照 id 获取页面中的元素
const ele = jQuery('#box') 
const ele = $('#box')

上面两个都可以按照 id 来获取元素

// 按照类名来选择
const eles = jQuery('.a')
const eles = $('.a')

上面就是按照类名来选择元素，可以获取到一组元素

const lis = jQuery('li')
const lis = $('li')

上面就是按照标签名来获取元素，可以获取到一组元素

const eles = jQuery('ul > li')
const eles = $('ul > li')

上面就是按照选择器来获取元素，可以获取到一组元素

特殊选择器

直接找到第一个

$('li:first') // 找到所有 li 中的第一个

直接找到最后一个

$('li:last') // 找到所有 li 中的最后一个

直接找到第几个

$('li:eq(3)') // 找到所有 li 中索引为 3 的那个

找到所有奇数个

$('li:odd') // 找到所有 li 中索引为 奇数 的

找到所有偶数

$('li:even') // 找到所有 li 中索引为 偶数 的

筛选器

jQuery 的筛选器就是在选择器选择到一组元素以后
对元素进行筛选，也可以对准确的某一个元素进行判断和获取

找到所有元素中的第一个
$('li').first()
找到所有元素中的最后一个
$('li').last()
找到某一个元素的下一个兄弟元素
$('li:eq(3)').next()
找到某一个元素的上一个兄弟元素
$('li:eq(3)').prev()
找到某一个元素的后面的所有兄弟元素
$('li:eq(3)').nextAll()
找到某一个元素的前面的所有兄弟元素
$('li:eq(3)').prevAll()
找到某一个元素的父元素
$('li:eq(3)').parent()
找到某一个元素的所有结构父级，一直到 html
$('li:eq(3)').parents()
找到一组元素中的某一个

// 在 li 的所有父级里面找到所有 body 标签
$('li').parents().find('body')

// 找到 div 标签下所有后代元素中所有类名为 box 的元素
$('div').find('.box')

属性操作

给一个元素添加某个属性

// 给 div 元素添加一个 id 属性，值是 box
$('div').prop('id', 'box')
// 获取 div 的 id 属性
console.log($('div').prop('id'))

prop 这个方法只能添加元素自己本身就有的属性
如果是添加的自定义属性，不会显示在标签上，但是可以使用

给一个元素添加某个自定义属性

// 给 div 添加一个 index 属性，值是 1
$('div').attr('index', 1)
// 获取 div 的 index 属性
console.log($('div').attr('index'))

移除元素的某一个属性

// 移除元素自己本身的属性
$('div').removeProp('id')
// 移除元素的自定义属性
$('div').removeAttr('index')

操作元素的类名

// 判断某一个元素有没有某一个 class
$('div').hasClass('box') // true 表示该元素有 box 类名，false 表示该元素没有 box 类名
?
// 给元素添加一个类名
$('div').addClass('box2') // 给 div 元素添加一个 box2 类名
?
// 移除元素的类名
$('div').removeClass('box') // 移除 div 的 box 类名
?
// 切换元素类名
$('div').toggleClass('box3') // 如果元素本身有这个类名就移除，本身没有就添加

操作元素的内容

// 给元素的 innerHTML 赋值
$('div').html('<span>hello world</span>')
// 获取元素的 innerHTML
$('div').html()
?
// 给元素的 innerText 赋值
$('div').text('hello world')
// 获取元素的 innerText
$('div').text()
?
// 给元素的 value 赋值
$('input').val('admin')
// 获取元素的 value 值
$('input').val()

操作样式

jQuery 操作元素的样式就是一个方法 css

// 给元素设置一个 css 样式
$('div').css('width', '100px')
?
// 获取元素的某一个样式
$('div').css('width')
?
// 给元素设置一组样式
$('div').css({
 width: '100px',
 height: '200px'
})

toggle javascript

上一篇：jQuery slideToggle() 方法用法详解
下一篇：JavaScript学习笔记(三十二)—jQuery(中)

相关推荐

驱动网卡（怎么从新驱动网卡）: 网卡一般是指为电脑主机提供有线无线网络功能的适配器。而网卡驱动指的就是电脑连接识别这些网卡型号的桥梁。网卡只有打上了网卡驱动才能正常使用。并不是说所有的网卡一插到电脑上面就能进行数据传输了，他都需要里面芯片组的驱动文件才能支持他进行数据传输...; 2026-01-30 00:37 liuian

win10更新助手装系统（微软win10更新助手）: 1、点击首页“系统升级”的按钮，给出弹框，告诉用户需要上传IMEI码才能使用升级服务。同时给出同意和取消按钮。华为手机助手2、点击同意，则进入到“系统升级”功能华为手机助手华为手机助手3、在检测界面，...

windows11专业版密钥最新（windows11专业版激活码永久）: Windows11专业版的正版密钥，我们是对windows的激活所必备的工具。该密钥我们可以通过微软商城或者通过计算机的硬件供应商去购买获得。获得了windows11专业版的正版密钥后，我...

手机删过的软件恢复（手机删除过的软件怎么恢复）: 操作步骤：1、首先，我们需要先打开手机。然后在许多图标中找到带有[文件管理]文本的图标，然后单击“文件管理”进入页面。2、进入页面后，我们将在顶部看到一行文本：手机，最新信息，文档，视频，图片，音乐，收藏，最后是我们正在寻找的[更多]，单击...; 2026-01-29 23:55 liuian

一键ghost手动备份系统步骤（一键ghost 备份）: 　　步骤1、首先把装有一键GHOST装系统的U盘插在电脑上，然后打开电脑马上按F2或DEL键入BIOS界面，然后就选择BOOT打USDHDD模式选择好，然后按F10键保存，电脑就会马上重启。　　步骤...

怎么创建局域网（怎么创建局域网打游戏）: 　　1、购买路由器一台。进入路由器把dhcp功能打开　　2、购买一台交换机。从路由器lan端口拉出一条网线查到交换机的任意一个端口上。　　3、两台以上电脑。从交换机任意端口拉出网线插到电脑上（电脑设置...

精灵驱动器官方下载（精灵驱动手机版下载）: 是的。驱动精灵是一款集驱动管理和硬件检测于一体的、专业级的驱动管理和维护工具。驱动精灵为用户提供驱动备份、恢复、安装、删除、在线更新等实用功能。1、全新驱动精灵2012引擎，大幅提升硬件和驱动辨识能力...

一键还原系统步骤（一键还原系统有哪些）: 1、首先需要下载安装一下Windows一键还原程序，在安装程序窗口中，点击“下一步”，弹出“用户许可协议”窗口，选择“我同意该许可协议的条款”，并点击“下一步”。　　2、在弹出的“准备安装”窗口中，可...

电脑加速器哪个好（电脑加速器哪款好）: 我认为pp加速器最好用，飞速土豆太懒，急速酷六根本不工作。pp加速器什么网页都加速，太任劳任怨了！以上是个人观点，具体性能请自己试。ps：我家电脑性能很好。迅游加速盒子是可以加速电脑的。因为有过之...

任何u盘都可以做启动盘吗（u盘必须做成启动盘才能装系统吗）: 是的，需要注意，U盘的大小要在4G以上，最好是8G以上，因为启动盘里面需要装系统，内存小的话，不能用来安装系统。内存卡或者U盘或者移动硬盘都可以用来做启动盘安装系统。普通的U盘就可以，不过最好U盘...

u盘怎么恢复文件（u盘文件恢复的方法）: 开360安全卫士，点击上面的“功能大全”。点击文件恢复然后点击“数据”下的“文件恢复”功能。选择驱动接着选择需要恢复的驱动，选择接入的U盘。点击开始扫描选好就点击中间的“开始扫描”，开始扫描U盘数据。...

系统虚拟内存太低怎么办（系统虚拟内存占用过高什么原因）: 1.检查系统虚拟内存使用情况，如果发现有大量的空闲内存，可以尝试释放一些不必要的进程，以释放内存空间。2.如果系统虚拟内存使用率较高，可以尝试增加系统虚拟内存的大小，以便更多的应用程序可以使用更多...

剪贴板权限设置方法（剪贴板访问权限）: 1、首先打开iphone手机，触碰并按住单词或图像直到显示选择选项。2、其次，然后选取“拷贝”或“剪贴板”。3、勾选需要的“权限”，最后选择开启，即可完成苹果剪贴板权限设置。仅参考1.打开苹果手机设置按钮,点击【通用】。2.点击【键盘】,再...; 2026-01-29 21:37 liuian

平板系统重装大师（平板重装win系统）: 如果你的平板开不了机，但可以连接上电脑，那就能好办，楼主下载安装个平板刷机王到你的个人电脑上，然后连接你的平板，平板刷机王会自动识别你的平板，平板刷机王上有你平板的我刷机包，楼主点击下载一个，下载完成...

联想官网售后服务网点（联想官网售后服务热线）: 联想3c服务中心是联想旗下的官方售后，是基于互联网O2O模式开发的全新服务平台。可以为终端用户提供多品牌手机、电脑以及其他3C类产品的维修、保养和保险服务。根据客户需求层次，联想服务针对个人及家庭客户...

一周热门

最近发表

首页
收录
顶部