JavaScript学习笔记(三十一)—jQuery(上)
liuian 2024-12-30 05:16 39 浏览
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'
})相关推荐
- MySQL慢查询优化:从explain到索引，DBA手把手教你提升10倍性能
-
数据库性能是应用系统的生命线，而慢查询就像隐藏在系统中的定时炸弹。某电商平台曾因一条未优化的SQL导致订单系统响应时间从200ms飙升至8秒，最终引发用户投诉和订单流失。今天我们就来系统学习MySQL...
- 一文读懂SQL五大操作类别(DDL/DML/DQL/DCL/TCL)的基础语法
-
在SQL中，DDL、DML、DQL、DCL、TCL是按操作类型划分的五大核心语言类别，缩写及简介如下：DDL（DataDefinitionLanguage，数据定义语言）：用于定义和管理数据库结构...
- 闲来无事，学学Mysql增、删，改，查
-
Mysql增、删，改，查1“增”——添加数据1.1为表中所有字段添加数据1.1.1INSERT语句中指定所有字段名语法：INSERTINTO表名（字段名1，字段名2，…）VALUES（值1...
- 数据库:MySQL 高性能优化规范建议
-
数据库命令规范所有数据库对象名称必须使用小写字母并用下划线分割所有数据库对象名称禁止使用MySQL保留关键字（如果表名中包含关键字查询时，需要将其用单引号括起来）数据库对象的命名要能做到见名识意，...
- 下载工具合集_下载工具手机版
-
迅雷，在国内的下载地位还是很难撼动的，所需要用到的地方还挺多。缺点就是不开会员，软件会限速。EagleGet，全能下载管理器，支持HTTP(S)FTPMMSRTSP协议，也可以使用浏览器扩展检测...
- mediamtx v1.15.2 更新详解:功能优化与问题修复
-
mediamtxv1.15.2已于2025年10月14日发布，本次更新在功能、性能优化以及问题修复方面带来了多项改进，同时也更新了部分依赖库并提升了安全性。以下为本次更新的详细内容：...
- 声学成像仪:泄露监测 “雷达” 方案开启精准防控
-
声学成像仪背景将声像图与阵列上配装的摄像实所拍的视频图像以透明的方式叠合在一起，就形成了可直观分析被测物产生状态。这种利用声学、电子学和信息处理等技术，变换成人眼可见的图像的技术可以帮助人们直观地认识...
- 最稳存储方案:两种方法将摄像头接入威联通Qu405，录像不再丢失
-
今年我家至少被4位邻居敲门，就是为了查监控！！！原因是小区内部监控很早就停止维护了，半夜老有小黄毛掰车门偷东西，还有闲的没事划车的，车主损失不小，我家很早就配备监控了，人来亮灯有一定威慑力，不过监控设...
- 离岗检测算法_离岗检查内容
-
一、研发背景如今社会许多岗位是严禁随意脱离岗位的，如塔台、保安室、监狱狱警监控室等等，因为此类行为可能会引起重大事故，而此类岗位监督管理又有一定困难，因此促生了智能视频识别系统的出现。二、产品概述及工...
- 消防安全通道占用检测报警系统_消防安全通道占用检测报警系统的作用
-
一、产品概述科缔欧消防安全通道占用检测报警系统，是创新行业智能监督管理方式、完善监管部门动态监控及预警预报体系的信息化手段，是实现平台远程监控由“人为监控”向“智能监控”转变的必要手段。产品致力于设...
- 外出住酒店、民宿如何使用手机检测隐藏的监控摄像头
-
最近，一个家庭在他们的民宿收到了一个大惊喜：客厅里有一个伪装成烟雾探测器的隐藏摄像头，监视着他们的一举一动。隐藏摄像头的存在如果您住在酒店或民宿，隐藏摄像头不应再是您的担忧。对于民宿，房东应报告所有可...
- 基于Tilera众核平台的流媒体流量发生系统的设计
-
曾帅，高宗彬，赵国锋（重庆邮电大学通信与信息工程学院，重庆400065）摘要：设计了一种基于Tilera众核平台高强度的流媒体流量发生系统架构，其主要包括：系统界面管理模块、服务承载模块和流媒体...
- 使用ffmpeg将rtsp流转流实现h5端播放
-
1.主要实现rtsp转tcp协议视频流播放ffmpeg下载安装（公认业界视频处理大佬）a、官网地址：www.ffmpeg.org/b、gitHub：github.com/FFmpeg/FFmp…c、推...
- 将摄像头视频流从Rtsp协议转为websocket协议
-
写在前面很多通过摄像头拿到的视频流格式都是Rtsp协议的，比如：海康威视摄像头。在现代的浏览器中，已经不支持直接播放Rtsp视频流，而且，海康威视提供的本身的webSdk3.3.0视频插件有很多...
- 华芸科技推出安全监控中心2.1 Beta测试版
-
全球独家支持hdmi在线实时监看摄像机画面，具单一、循环或同时监看四频道视频影像，可透过华芸专用红外线遥控器、airemote或是键盘鼠标进行操作，提供摄像机频道增购服务，满足用户弹性扩增频道需...
- 一周热门
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)