百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

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

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

jQuery

  • jQuery 是一个前端库，也是一个方法库
  • 他里面封装着一些列的方法供我们使用
  • 我们常用的一些方法它里面都有，我们可以直接拿来使用就行了
  • jQuery 之所以好用，很多人愿意使用，是因为它的几个优点太强大了
  1. 优质的选择器和筛选器
  2. 好用的隐式迭代
  3. 强大的链式编程
  • 因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”
  • 接下来我们就来认识一下 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 的筛选器就是在选择器选择到一组元素以后
  • 对元素进行筛选，也可以对准确的某一个元素进行判断和获取
  1. 找到所有元素中的第一个
    $('li').first()
  2. 找到所有元素中的最后一个
    $('li').last()
  3. 找到某一个元素的下一个兄弟元素
    $('li:eq(3)').next()
  4. 找到某一个元素的上一个兄弟元素
    $('li:eq(3)').prev()
  5. 找到某一个元素的后面的所有兄弟元素
    $('li:eq(3)').nextAll()
  6. 找到某一个元素的前面的所有兄弟元素
    $('li:eq(3)').prevAll()
  7. 找到某一个元素的父元素
    $('li:eq(3)').parent()
  8. 找到某一个元素的所有结构父级，一直到 html
    $('li:eq(3)').parents()
  9. 找到一组元素中的某一个
// 在 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'
})

相关推荐

Python 中 必须掌握的 20 个核心函数——items()函数

items()是Python字典对象的方法，用于返回字典中所有键值对的视图对象。它提供了对字典完整内容的高效访问和操作。一、items()的基本用法1.1方法签名dict.items()返回：字典键...

Python字典:键值对的艺术_python字典的用法

字典(dict)是Python的核心数据结构之一，与列表同属可变序列，但采用完全不同的存储方式：定义方式：使用花括号{}（列表使用方括号[]）存储结构：以键值对(key-valuepair)...

python字典中如何添加键值对_python怎么往字典里添加键

添加键值对首先定义一个空字典1>>>dic={}直接对字典中不存在的key进行赋值来添加123>>>dic['name']='zhangsan'>>...

Spring Boot @ConfigurationProperties 详解与 Nacos 配置中心集成

本文将深入探讨SpringBoot中@ConfigurationProperties的详细用法，包括其语法细节、类型转换、复合类型处理、数据校验，以及与Nacos配置中心的集成方式。通过...

Dubbo概述_dubbo工作原理和机制

什么是RPCRPC是RemoteProcedureCall的缩写翻译为:远程过程调用目标是为了实现两台(多台)计算机\服务器,互相调用方法\通信的解决方案RPC的概念主要定义了两部分内容序列化协...

再见 Feign!推荐一款微服务间调用神器，跟 SpringCloud 绝配

在微服务项目中，如果我们想实现服务间调用，一般会选择Feign。之前介绍过一款HTTP客户端工具Retrofit，配合SpringBoot非常好用！其实Retrofit不仅支持普通的HTTP调用，还能...

SpringGateway 网关_spring 网关的作用

奈非框架简介早期(2020年前)奈非提供的微服务组件和框架受到了很多开发者的欢迎这些框架和SpringCloudAlibaba的对应关系我们要知道Nacos对应Eureka都是注册中心Dubbo...

Sentinel 限流详解-Sentinel与OpenFeign服务熔断那些事

SentinelResource我们使用到过这个注解，我们需要了解的是其中两个属性：value：资源名称，必填且唯一。@SentinelResource(value="test/get&#...

超详细MPLS学习指南 手把手带你实现IP与二层网络的无缝融合

大家晚上好，我是小老虎，今天的文章有点长，但是都是干货，耐心看下去，不会让你失望的哦！随着ASIC技术的发展，路由查找速度已经不是阻碍网络发展的瓶颈。这使得MPLS在提高转发速度方面不再具备明显的优势...

Cisco 尝试配置MPLS-V.P.N从开始到放弃

本人第一次接触这个协议，所以打算分两篇进行学习和记录，本文枯燥预警，配置命令在下一篇全为定义，其也是算我毕业设计的一个小挑战。新概念重点备注为什么选择该协议IPSecVPN都属于传统VPN传统VP...

MFC -- 网络通信编程_mfc编程教程

要买东西的时候，店家常常说，你要是真心买的，还能给你便宜，你看真心就是不怎么值钱。。。----网易云热评一、创建服务端1、新建一个控制台应用程序，添加源文件server2、添加代码框架#includ...

35W快充?2TB存储?iPhone14爆料汇总，不要再漫天吹15了

iPhone14都还没发布，关于iPhone15的消息却已经漫天飞，故加紧整理了关于iPhone14目前已爆出的消息。本文将从机型、刘海、屏幕、存储、芯片、拍照、信号、机身材质、充电口、快充、配色、价...

SpringCloud Alibaba(四) - Nacos 配置中心

1、环境搭建1.1依赖<!--nacos注册中心注解@EnableDiscoveryClient--><dependency><groupI...

Nacos注册中心最全详解(图文全面总结)

Nacos注册中心是微服务的核心组件，也是大厂经常考察的内容，下面我就重点来详解Nacos注册中心@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题合集》里面。微服务注册中...

网络技术领域端口号备忘录，受益匪浅 !

你好，这里是网络技术联盟站，我是瑞哥。网络端口是计算机网络中用于区分不同应用程序和服务的标识符。每个端口号都是一个16位的数字，范围从0到65535。网络端口的主要功能是帮助网络设备（如计算机和服务器...

一周热门
最近发表
标签列表