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

JavaScript-jQuery2-笔记

1.获取元素文本、属性、内部结构、表单中的值
获取标签中所夹的文本内容:text()
获取标签的属性值:prop('属性名')
获取表单元素的内容:如 文本框中的内容 val()
获取元素的内部html结构:html()

2.筛选选择器
筛选选择器:'选择器:条件'     例如: 选中的选项:'input:checked'
1)获取选择器中第一个元素: '选择器:first'
2)获取选择器中最后一个元素: '选择器:last'
3)获取选择器中第几个元素: '选择器:eq(数字)'  数字是下标 从0开始
4)获取选择器中奇数下标的元素: '选择器:odd'
5)获取选择器中偶数下标的元素: '选择器:even'

// 以下情况 后来者居上 会覆盖之前样式
// 1、 获取选择器中第一个元素: '选择器:first'
// 将第一行的背景颜色设置成粉色
$('tr:first').css('background-color', 'pink')
// 2、 获取选择器中最后一个元素: '选择器:last'
// 将最后一行的背景颜色设置成兰色
$('tr:last').css('background-color', 'blue')
// 3、 获取选择器中第几个元素: '选择器:eq(数字)' 数字 是下标 从0开始
// 将第三行的背景颜色设置成黄色
$('tr:eq(2)').css('background-color', 'yellow')
// 4、 获取选择器中奇数下标的元素: '选择器:odd'
// 将奇数下标的行的背景颜色设置成红色
$('tr:odd').css('background-color', 'red')
// 5、 获取选择器中偶数下标的元素: '选择器:even'
// 将偶数下标的行的背景颜色设置成绿色
$('tr:even').css('background-color', 'green')

3.jQuery中循环遍历元素
隐式迭代:根据选择器获取同类型元素,绑定事件   会作用到每一个元素上
假如每个元素的事件不一样 需要循环遍历
$('选择器').each(function(index,dom){
        // index是下标  dom是DOM对象 想要转换成jQuery对象 $(DOM对象)
})

<ul>
       <li>同学1</li>
       <li>同学2</li>
       <li>同学3</li>
       <li>同学4</li>
       <li>同学5</li>
</ul>
<script src="../jquery-3.7.0.js"></script>    // jquery-3.7.0.js文件需要导入
<script>
    // 循环遍历所有的li 弹窗提示这是第几个li
    $('li').each(function(index,dom){
           // 给元素对象绑定单击事件
           $(dom).click(function(){
                 alert(`这是第${index+1}个li`)
           })
     })
</script>

4.添加元素、删除元素
在html中添加标签(元素):标签写在字符串里
创建jQuery元素: $('标签') 
添加jQuery元素:
              添加子元素 
                                元素1.append(元素) 将元素添加到元素1里边,位置处于后边 
                                元素1.prepend(元素) 将元素添加到元素1里边,位置处于前边
​              添加兄弟元素 
                                   元素1.before(元素) 位置处于元素1的前边 ​ 
                                   元素1.after(元素) 位置处于元素1的后边
删除jQuery元素: 
                   1)删除元素本身 元素.remove() 
                   2)删除元素内部所有内容 元素.empty()  自己还在 
                   3)删除元素内部所有内容 元素.html('')  自己还在

相关文章:

JavaScript-jQuery2-笔记

1.获取元素文本、属性、内部结构、表单中的值 获取标签中所夹的文本内容&#xff1a;text() 获取标签的属性值&#xff1a;prop(属性名) 获取表单元素的内容&#xff1a;如 文本框中的内容 val() 获取元素的内部html结构&#xff1a;html() 2.筛选选择器 筛选选择器&#xff1…...

设计模式之多线程版本的if------Balking模式

系列文章目录 设计模式之避免共享的设计模式Immutability&#xff08;不变性&#xff09;模式 设计模式之并发特定场景下的设计模式 Two-phase Termination&#xff08;两阶段终止&#xff09;模式 设计模式之避免共享的设计模式Copy-on-Write模式 设计模式之避免共享的设计模…...

mybatis核心配置文件介绍

mybatis核心配置文件 1. properties配置介绍 properties标签&#xff1a;加载外部的资源配置文件 ​ 属性&#xff1a;resource 指定要引入的配置文件路径 ​ 在核心配置文件中&#xff0c;通过&#xff1a;${key}方式引入外部配置文件的数据 jdbc.peroperties 的文件内容…...

Linux完全卸载Anaconda3和MiniConda3

如何安装Anaconda3和MiniConda3请看这篇文章&#xff1a; 安装Anaconda3和MiniConda3_minianaconda3-CSDN博客文章浏览阅读474次。MiniConda3官方版是一款优秀的Python环境管理软件。MiniConda3最新版只包含conda及其依赖项如果您更愿意拥有conda以及超过720个开源软件包&…...

Apache Answer,最好的开源问答系统

Apache Answer是一款适合任何团队的问答平台软件。无论是社区论坛、帮助中心还是知识管理平台&#xff0c;你可以永远信赖 Answer。 目前该项目在github超过10K星&#xff0c;系统采用go语言开发&#xff0c;安装配置简单&#xff0c;界面清洁易用&#xff0c;且开源免费。项目…...

【C】内存分配

首先&#xff0c;回顾一下内存分配。所有程序都必须预留足够的内存来存储程序使用的数据。这些内存中有些是自动分配的&#xff1a; float x; int place[100]; 这些声明预留了足够的空间&#xff0c;还为内存提供了一个标识符&#xff0c;可以使用x或place识别数据。 1、mal…...

MySQL 从零开始:03 基本入门语句

文章目录 1、连接数据库1.1 命令提示符登陆1.2 MySQL 8.0 Command Line Client 登陆1.3 MySQL Workbench 登陆 2、基本语句2.1 查看所有库2.2 创建库2.3 删除库2.4 选择数据库2.5 查看表2.6 创建表2.7 删除表2.8 改表名2.9 清空表 在上一小节中介绍了 MySQL 数据库的安装&#…...

井盖异动传感器,守护脚下安全

随着城市化进程的加速&#xff0c;城市基础设施的安全问题日益受到关注。其中&#xff0c;井盖作为城市地下管道的重要入口&#xff0c;其安全问题不容忽视。然而&#xff0c;传统的井盖监控方式往往存在盲区&#xff0c;无法及时发现井盖的异常移动。为此&#xff0c;我们推出…...

复合机器人作为一种新型的智能制造装备高效、精准和灵活的生产方式

随着汽车制造业的快速发展&#xff0c;对于高效、精准和灵活的生产方式需求日益增强。复合机器人作为一种新型的智能制造装备&#xff0c;以其独特的优势在汽车制造中发挥着越来越重要的作用。因此&#xff0c;富唯智能顺应时代的发展趋势&#xff0c;研发出了ICR系列的复合机器…...

重置 Docker 中 Gitlab 的账号密码

1、首先进入Docker容器 docker exec -it gitlab bash 2、连接到 gitlab 的数据库 需要谨慎操作 gitlab-rails console -e production 等待加载完后会进入控制台 ------------------------------------------------------------------------------------------------------…...

任务类型划分

以下内容来自于ChatGPT内存密集型应用和IO密集型应用是两种不同类型的计算应用&#xff0c;它们在资源需求和性能特点上有所不同。 内存密集型应用&#xff08;Memory-Intensive Applications&#xff09;&#xff1a; 特点&#xff1a; 这类应用主要依赖大量的内存资源来执行任…...

docker搭建部署mysql并挂载指定目录

Docker是一种轻量级、可移植的容器化平台&#xff0c;可以简化应用程序的部署和管理。在本文中&#xff0c;我们将探讨如何使用Docker来搭建和部署MySQL数据库&#xff0c;并将数据和配置文件挂载到外部目录&#xff0c;以实现数据持久化和方便的配置管理。 1: 安装Docker 首…...

即将推出的 OpenWrt One/AP-24.XY:OpenWrt 和 Banana Pi 合作路由器板

OpenWrt开发人员正在与Banana Pi合作开发OpenWrt One/AP-24.XY路由器板。OpenWrt 是一个轻量级嵌入式 Linux 操作系统&#xff0c;支持近 1,800 个路由器和其他设备。然而&#xff0c;这将是第一块由 OpenWrt 直接开发的路由器板。 该主板将基于 MediaTek MT7981B (Filogic 82…...

【uniapp-小程序-分享图5/4】

utils.js //裁剪分享的图片为5:4 const makeCanvas (imgUrl) > {console.log("imgUrl",imgUrl);return new Promise((resolve, reject) > {// 获取图片信息,小程序下获取网络图片信息需先配置download域名白名单才能生效uni.getImageInfo({src: imgUrl,succe…...

【响应式编程】前置知识和相关技术的总结

前置知识 这些概念都与响应式编程密切相关。&#x1f98c; 1. 并发和多线程编程&#xff1a;响应式编程需要处理并发性&#xff0c;它允许多个操作独立地并行执行。这使得应用程序可以在不同的线程、进程或设备上处理多个事件。 2. 事件驱动编程&#xff1a;响应式编程是一种…...

K8S--安装MySQL8(单机)

原文网址&#xff1a;K8S--安装MySQL8&#xff08;单机&#xff09;-CSDN博客 简介 本文介绍K8S部署MySQL8&#xff08;单机&#xff09;的方法。 ----------------------------------------------------------------------------------------------- 分享Java真实高频面试题…...

CMake+QT+大漠插件的桌面应用开发

文章目录 CMakeQT大漠插件的桌面应用开发说明环境项目结构配置编译环境代码 CMakeQT大漠插件的桌面应用开发 说明 在CMake大漠插件的应用开发——处理dm.dll&#xff0c;免注册调用大漠插件中已经说明了如何免注册调用大漠插件&#xff0c;以及做了几个简单的功能调用&#x…...

OpenCV-24双边滤波

一、概念 双边滤波对于图像的边缘信息能够更好的保存。其原理为一个与空间距离相关的高斯函数与一个灰度距离相关的高斯函数相乘。 空间距离&#xff1a;指的是当前点与中心点的欧式距离。空间域的高斯函数及其数学形式为&#xff1a; 其中&#xff08;xi&#xff0c;yi&…...

AI智能分析网关V4:太阳能+4G智慧水库远程可视化智能监管方案

一、背景需求分析 由于水库位置分散的原因&#xff0c;水库视频监控建设在立杆、布线等方面都存在一定的难度&#xff0c;且需要人力、物力的前期投入和后期维护。目前水库的监管存在一定的问题&#xff0c;管理人员工作强度大但管理质量并不高&#xff0c;人为巡检无法实时发…...

第8章-第8节-Java中的文件类File的简单介绍

1、我们已经写过File的相关代码&#xff1a; BufferedReader bf new BufferedReader(new FileReader(new File("aa.txt"))); 2、其实FIle这个类自身也是非常强大的&#xff0c;封装了很多操作文件/目录的方法&#xff0c;今天我们就需要去详细的学习这个类&#x…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

Android第十三次面试总结(四大 组件基础)

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

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

SpringAI实战:ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

从零开始了解数据采集(二十八)——制造业数字孪生

近年来&#xff0c;我国的工业领域正经历一场前所未有的数字化变革&#xff0c;从“双碳目标”到工业互联网平台的推广&#xff0c;国家政策和市场需求共同推动了制造业的升级。在这场变革中&#xff0c;数字孪生技术成为备受关注的关键工具&#xff0c;它不仅让企业“看见”设…...

PydanticAI快速入门示例

参考链接&#xff1a;https://ai.pydantic.dev/#why-use-pydanticai 示例代码 from pydantic_ai import Agent from pydantic_ai.models.openai import OpenAIModel from pydantic_ai.providers.openai import OpenAIProvider# 配置使用阿里云通义千问模型 model OpenAIMode…...