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

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

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

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(中)

相关推荐

window7下载安装（windows7下载安装）: 要安装Windows7，首先需要购买合法的Windows7安装光盘或者从官方网站下载安装文件。然后，插入安装光盘或者打开下载的安装文件，重启电脑，在启动时按照屏幕提示进入安装界面。在安装界面中，按照指...

自己装win7系统（自己装win7系统教程）: 以64位系统为例：1、首先，下载好win7系统的镜像文件。2、我们需要下载win7x64的压缩包到电脑。3、下载完成后，解压压缩包，解压出来的文件不要放在C盘。我们可以看到一个x64的gho镜像，一...

win10专业版关闭防火墙（win10专业版防火墙在哪里设置）: 你可以按照以下步骤关闭Windows10专业版的防火墙：1.点击“开始”按钮，然后选择“设置”。2.在设置窗口中，选择“更新和安全”。3.选择“Windows安全中心”，然后在右侧窗格中选...

系统一键重装官网（正版一键重装系统）

联想笔记本电脑哪款好用又便宜: 联想笔记本电脑中便宜的型号非常多，其中包括IdeaPad314、IdeapadS145、ThinkPadE14等等。这些笔记本电脑都有不错的性能和基础配置，而且价格相对于其他品牌的同类产品更加...

win7 网卡驱动（win7网卡驱动代码31）: 以下是安装Win7网卡驱动的步骤：1.打开设备管理器。方法是按下Win+R快捷键，输入“devmgmt.msc”命令并点击“确定”按钮。2.展开“网络适配器”选项，找到你要安装驱动的网卡型号。3....

windows资源管理器已停止工作弹窗: 解决方法如下：1、首先使用键盘组合快捷键“Ctrl+Alt+Del(.)”打开任务管理器;2、打开后查看进程中是否含有“explorer.exe”项，若没有单击左上角“文件”选项，单击“新建任务”;3...

怎么设置从u盘启动系统（设置从u盘启动盘步骤）: 1、插上U盘，启动电脑，按照说明书上的步骤进入bios选项。一般是开机时按住F2/F12/del/home/等按键。2、选择到boot自选项，几乎所有的主板都是在这里配置启动顺序的。利用键盘上的上下...

u启动和u深度哪个好（u深度启动u盘安装win7系统教程）: 关于这个问题，是的，"u深度"和"u启动"是两个不同的概念。"u深度"通常指的是深度神经网络（DeepNeuralNetwork,DNN）的层数或...

amd历代cpu型号大全（amdcpu历史）: AMDCPU型号。速龙，迅龙，r5,r7.型号不同价格，有比较大的区分，比如r5,5600,r55600X.r75700,5800,r715700X5800x.无论是核心个数还有核心...

oracle认证（oracle认证等级划分）: Oracle认证分为OCA，OCP，OCM。OCA：报考OCA的基础条件是报考OCA不限制考生的文凭，任何人都可以报考并获得此证书；对OCA有一定的了解。。其证书拥有者在全球各地将享有OCA相关专业免...

惠普打印机官网怎么下载驱动: HP惠普打印机驱动官网是存在的。因为HP惠普是一家著名的电脑及相关产品制造商，他们会提供各种驱动程序和软件以保证设备的兼容性和稳定性。HP惠普打印机驱动官网可以通过搜索引擎查找，也可以通过HP惠普的官...

win7怎么启用系统还原（win7系统还原功能怎么开启）: 在Windows7中，您可以按照以下步骤启用或关闭系统还原：1.单击开始菜单，右键单击“计算机”（或“我的电脑”），然后选择“属性”。2.单击“系统保护”链接，然后在弹出的“系统属性”对话框...

wpsoffice（wpsoffice功能栏全是灰色的怎么恢复）: wpsoffice是金山公司开发的一款国产办公软件，有WPS文字、WPS表格和WPS演示三个板块。其作用就是办公应用。1、WPSOFFICE：WPSOffice是由金山软件股份有限公司自主研发的一...

如何清理c盘中不必要的文件（如何清理c盘中不必要的文件夹）

一周热门

最近发表

首页
收录
顶部