当前位置： 首页 > news >正文

jQuery的选择器与自带函数详解

news 2025/9/17 5:17:33

在前端开发中，jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及AJAX交互等操作。本文将通过一个示例页面，详细介绍jQuery的选择器和一些常用的自带函数。

示例代码优化

首先，我们来优化和完善给出的代码片段，使其更加规范且易于理解。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery Selectors and Functions Demo</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><h2><a href="#">Title Content</a></h2>
<h2>Another Title <a href="#">Content</a></h2><script>$(document).ready(function() {// 使用ID选择器，这里假设有一个ID为showDiv的元素$("#showDiv").text("Selected by ID");// 类选择器示例，先确保页面中有class为'SomeClass'的元素$(".SomeClass").css("color", "red");// 选择所有奇数行的段落$("p:odd").addClass("highlight");// 选择每行的第一个单元格$("td:nth-child(1)").html("&lt;First Cell&gt;");// 选择所有列表项中的链接$("li > a").attr("target", "_blank");// 选择所有指向pdf文件的链接$("a[href$='.pdf']").text("PDF Link");// 修改所有h2下的链接文本$("h2 a").each(function(index) {$(this).text("Link " + (index + 1));});// 使用$.trim去除字符串首尾空白let sString = "   123456789 ";let trimmedString = $.trim(sString);alert("Trimmed length: " + trimmedString.length);});
</script><!-- 添加一个样式，用于演示 -->
<style>.highlight { background-color: yellow; }
</style></body>
</html>

jQuery选择器

基本选择器

  • $("#elementId")：通过ID选择元素。
  • $(".className")：通过类名选择元素。
  • $("tag")：通过标签名选择元素。

过滤选择器

  • $("selector:odd")：选择奇数位置的元素。
  • $("selector:nth-child(index)")：根据索引选择子元素。
  • $("parent > child")：直接子元素选择器。

属性选择器

  • $("a[href$='.pdf']")：选择所有href属性以.pdf结尾的a元素。

jQuery自带函数

$.trim()

用于移除字符串两端的空白字符。在上述示例中，我们使用此函数清理了字符串sString的首尾空格。

其他常用函数

  • .text(content)：设置或返回所选元素的文本内容。
  • .css(property, value)：设置或返回样式属性的值。
  • .addClass(className)：向匹配的元素添加指定的类名。
  • .html(content)：设置或返回所选元素的内容（包括HTML）。
  • .attr(attributeName, value)：设置或返回元素的属性值。
  • .each(callback)：对匹配元素集合执行迭代操作。

通过以上代码优化和解释，我们可以看到jQuery如何通过其强大的选择器和内置函数简化DOM操作，提高开发效率。掌握这些基础将极大提升你的前端开发能力。

相关文章：

jQuery的选择器与自带函数详解

在前端开发中&#xff0c;jQuery是一个广泛使用的JavaScript库&#xff0c;它极大地简化了HTML文档遍历、事件处理、动画以及AJAX交互等操作。本文将通过一个示例页面&#xff0c;详细介绍jQuery的选择器和一些常用的自带函数。 示例代码优化 首先&#xff0c;我们来优化和完…...

编程日记 2024/5/14 21:55:21

Next.js与SSR：构建高性能服务器渲染应用

1. 创建项目 通过create-next-app脚手架创建一个新的Next.js项目&#xff1a; npx create-next-app my-app cd my-app2. 自动SSR 在Next.js中&#xff0c;每个.js或.jsx文件的组件都会被自动处理为SSR页面。例如&#xff0c;创建一个pages/index.js文件&#xff1a; // pag…...

编程日记 2024/5/14 21:54:19

什么是MVC？什么是SpringMVC？什么是三层架构？

文章目录 应用分层什么是MVC?什么是 SpringMVC&#xff1f;三层架构三层架构和MVC的关系 应用分层 在讲解什么是MVC之前&#xff0c;先来理解一下什么是应用分层。 应用分层是一种软件开发设计思想&#xff0c;将应用程序划分成N个层次&#xff0c;每个层次都分别负责自己的…...

编程日记 2024/5/14 21:53:18

基于springboot+vue+Mysql的在线答疑系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…...

编程日记 2024/5/14 21:49:13

ssl证书免费申请指南

同学们可以私信我加入学习群&#xff01; 正文开始 前言一、购买证书二、创建证书三、 验证证书等待出现如下页面&#xff0c;说明申请成功&#xff1a; ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6b6c1dd11d4c467687318552da7cdbb2.png) 总结 前言 今天为大…...

编程日记 2024/5/14 21:48:12

Java构造方法详解

在Java方法内部定义一个局部变量时&#xff0c;必须要初始化&#xff0c;否则就会编译失败&#xff0c;如下&#xff1a; 要让上述代码通过编译&#xff0c;只需在使用a之前给a赋一个初始值即可 如果是对象&#xff1a;下面用一个日期类演示 我们没有给年月日赋值&#xff0c;…...

编程日记 2024/5/14 21:47:10

Spring WebFlux：响应式编程

在软件开发领域&#xff0c;随着互联网应用的规模和复杂性不断增加&#xff0c;传统的编程模型逐渐暴露出一些局限性&#xff0c;尤其是在面对高并发、大规模数据流处理等场景时。为了应对这些挑战&#xff0c;响应式编程&#xff08;Reactive Programming&#xff09;应运而生…...

编程日记 2024/5/14 21:45:08

uniapp、web网页跨站数据交互及通讯

来来来&#xff0c;说说你的创作灵感&#xff01;这就跟吃饭睡觉一样&#xff0c;饿了就找吃的&#xff0c;渴了就倒水张口灌。 最近一个多月实在是忙的没再更新日志&#xff0c;好多粉丝私信说之前的创作于他们而言非常有用&#xff01;受益菲浅&#xff0c;这里非常感谢粉丝…...

编程日记 2024/5/14 21:44:07

2024-05-10 Ubuntu上面使用libyuv，用于转换、缩放、旋转和其他操作YUV图像数据，测试实例使用I420ToRGB24

一、简介&#xff1a;libyuv 最初是由Google开发的&#xff0c;主要是为了支持WebRTC项目中的视频处理需求。用于处理YUV格式图像数据的开源库。它提供了一系列的函数&#xff0c;用于转换、缩放、旋转和其他操作YUV图像数据。 二、执行下面的命令下载和安装libyuv。 git clo…...

编程日记 2024/5/14 21:43:05

怎么给视频加水印？2招轻松搞定

在数字媒体时代&#xff0c;视频水印作为一种有效的版权保护手段&#xff0c;被广泛应用于各种场景。给视频添加水印不仅可以防止内容被恶意盗用&#xff0c;还能增加视频的辨识度&#xff0c;提升品牌形象。本文将为您介绍2种简单易行的方法&#xff0c;教您怎么给视频加水印&…...

编程日记 2024/5/14 21:42:04

SpringBootWeb 篇-深入了解请求响应（服务端接收不同类型的请求参数的方式）

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 请求响应概述 1.1 简单参数 1.2 实体参数 2.3 数组集合参数 2.4 日期参数 2.5 json 参数 2.6 路径参数 3.0 完整代码 1.0 请求响应概述 当客户端发送不同的请求参…...

编程日记 2024/5/14 21:41:03

实验十 智能手机互联网程序设计（微信程序方向）实验报告

实验目的和要求 完成以下页面设计。 二、实验步骤与结果&#xff08;给出对应的代码或运行结果截图&#xff09; Wxml <view class"container"> <view class"header"> <view class"logo"…...

编程日记 2024/5/14 21:40:02

Python图形复刻——绘制母亲节花束

各位小伙伴&#xff0c;好久不见&#xff0c;今天学习用Python绘制花束。 有一种爱&#xff0c;不求回报&#xff0c;有一种情&#xff0c;无私奉献&#xff0c;这就是母爱。祝天下妈妈节日快乐&#xff0c;幸福永远&#xff01; 图形展示&#xff1a; 代码展示&#xff1a; …...

编程日记 2024/5/14 21:39:00

【算法优选】 动态规划之子数组、子串系列——壹

文章目录 &#x1f38b;前言&#x1f38b;最大子数组和&#x1f6a9;题目描述&#x1f6a9;算法思路&#x1f6a9;代码实现 &#x1f334;环形子数组的最大和&#x1f6a9;题目描述&#x1f6a9;算法思路&#xff1a;&#x1f6a9;代码实现 &#x1f332;乘积最大子数组&#x…...

编程日记 2024/5/14 21:36:58

PXE+Kickstart无人值守安装安装Centos7.9

文章目录 一、什么是PXE1、简介2、工作模式3、工作流程 二、什么是Kickstart1、简介2、触发方式 三、无人值守安装系统工作流程四、实验部署1、环境准备2、服务端&#xff1a;关闭防火墙和selinux3、添加一张仅主机的网卡4、配置仅主机的网卡4.1、修改网络连接名4.2、配IP地址4…...

编程日记 2024/5/14 21:35:56

C语言实现通讯录，包括增删改查以及动态开辟内存，写入文件等功能

文章目录 前言一、注意二、源码1. test.c源文件2. contact.h头文件3. contact.c源文件 总结 前言 C语言实现通讯录&#xff0c;包括增删改查以及动态开辟内存&#xff0c;写入文件等功能 一、注意 在通讯录菜单栏使用枚举定义PeoInfo类型时&#xff0c;每个结构体类型的成员…...

编程日记 2024/5/14 21:34:55

flowable多对并发网关跳转的分析

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; h…...

编程日记 2024/5/14 21:31:50

【嵌入式——QT】QT集成Ymodem协议使用UDP进行传输

【嵌入式——QT】QT集成Ymodem协议使用UDP进行传输 Ymodem协议帧的数据格式帧头包号校验 通讯过程握手信号起始帧数据帧结束帧代码块 Ymodem命令 QT实现YmodemFileTransmit.hYmodemFileTransmit.cppBootLoader.hBootLoader.cppYmodem协议源码 Ymodem协议 帧的数据格式 帧头、…...

编程日记 2024/5/14 21:30:48

python笔记（17）输入输出

一、标准输入与输出简介 Python通过内置的sys模块管理标准输入&#xff08;stdin&#xff09;、标准输出&#xff08;stdout&#xff09;和标准错误&#xff08;stderr&#xff09;。但对大多数简单应用而言&#xff0c;直接使用内置函数就足够了。 二、输入&#xff1a;inpu…...

编程日记 2024/5/14 21:25:42

408数据结构总结复习笔记一：线性表

408数据结构总结复习笔记一&#xff1a;线性表 从现在开始慢慢更新我的考研复习笔记系列吧~ PS&#xff1a;主要是我自己个人复习过程中觉得重点的点&#xff0c;大家仅供参考哈~ 上岸&#xff01;&#xff01;&#xff01;大家一起加油! 顺序表和链表的比较 顺序表链表存取…...

编程日记 2024/5/14 21:24:41

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/8/2 20:19:15

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/8/11 11:25:20

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/9/7 2:01:52

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/8/10 12:51:07

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/9/7 8:51:35

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/9/13 10:07:19

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2025/9/1 23:34:37

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2025/9/3 18:06:27

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

编程新知 2025/9/7 8:49:50

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...

编程新知 2025/9/13 17:51:23