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

11.6 知识总结（筛选器方法、操作标签、事件）

news 2025/10/24 22:27:46

一、筛选器方法

document.getElementById()------>标签对象------------>直接就是标签
$(document.getElementById()) -------> jQuery对象-------->可以使用jQuery提供的方法
jQuery(document.getElementById()) -------> jQuery对象-------->可以使用jQuery提供的方法
$ === jQuery

每日一问：如何把jQuery对象转为标签对象？

$()[0]

$("#id")===jQuery("#id")

二、操作标签

2.1 样式类

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

css类

css("color","red")//DOM操作：tag.style.color="red"

2.2 位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

注：

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

示例：返回顶部

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>位置相关示例之返回顶部</title><style>.c1 {width: 100px;height: 200px;background-color: red;}.c2 {height: 50px;width: 50px;position: fixed;bottom: 15px;right: 15px;background-color: #2b669a;}.hide {display: none;}.c3 {height: 100px;}</style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div><button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>$("#b1").on("click", function () {$(".c1").offset({left: 200, top:200});});$(window).scroll(function () {if ($(window).scrollTop() > 100) {$("#b2").removeClass("hide");}else {$("#b2").addClass("hide");}});$("#b2").on("click", function () {$(window).scrollTop(0);})
</script>
</body>
</html>

2.3 尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

2.4 文本操作

2.4.1 HTML代码：

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

2.4.2 文本值：

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

2.4.3 值：

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

2.5 属性操作

2.5.1 用于ID等或自定义属性：

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

2.5.2 用于checkbox和radio

prop() // 获取属性
removeProp() // 移除属性

2.6 文档处理

2.6.1 添加到指定元素内部的后面

let $pEle = $('<p>')
$pEle.text('你好啊草莓要不要来几个?')
$pEle.attr('id','d1')
$('#d1').append($pEle) # 内部尾部追加

createElement('p') -----------> $('<p>')
appendChild() -----------> append()

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

2.6.2 添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

2.6.3 移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

三、事件

3.1 常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
input监控
$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了shift键')
}
})

11.6 知识总结（筛选器方法、操作标签、事件）

一、筛选器方法 document.getElementById()------>标签对象------------>直接就是标签 $(document.getElementById()) -------> jQuery对象-------->可以使用jQuery提供的方法 jQuery(document.getElementById()) -------> jQuery对象-------->可以使用jQue…...

编程日记 2023/11/6 22:55:55

Devchat插件：AI智能编程助手，让你告别脏活累活。

文章目录前言注册登录DevChat的安装和配置DevChat插件安装DevChat插件配置 DevChat的简单使用后记前言随着人工智能技术的不断发展和普及，它正在深刻影响着各行各业，并逐渐成为改变世界的重要力量。在软件开发领域，人工智能技术也给开发者…...

编程日记 2023/11/6 22:54:53

0-1矩阵列互斥问题——回溯法 Python实现

三、 0-1 矩阵的列集互斥问题。给定一个 m n m \times n mn 的 0-1 矩阵 A \mathrm{A} A 。定义列互斥为: 对于矩阵 A A A 中的任意两列 i i i 和 j j j, 如果在对应的每一行上, i i i 和 j j j 不存在同时为 1 的情况, 则称列 i \mathrm{i} i 和 j \mathrm{j} j 互斥…...

编程日记 2023/11/6 22:52:51

wandb 安装本地部署使用教程

1、官网注册 wandb.ai是一个为机器学习开发者提供的开发工具平台，可以帮助用户跟踪实验，管理和版本数据，以及与团队协作，从而更专注于构建最佳模型。 wandb官网： https://wandb.ai 首先我们打开官网注册号自己的账号并…...

编程日记 2023/11/6 22:51:50

飞桨平台搭建PP-YOLOE模型

一、创建项目此博客仅是运行PP-YOLOE源码，这里以变压器渗漏数据集为例COCO数据集太大了，跑不动，V100训练预估计得7天左右，即便是A100也得4天半，变压器渗漏油数据集跑一个小时左右，还可以接受，…...

编程日记 2023/11/6 22:50:48

Js重点内容

一，什么是js javascript是运行在客户端（浏览器，可预览）的编程语言二，主要的功能用来给静态页（html网页）增加一些动态功能（比如轮播图、tab切换） 三，应用…...

编程日记 2023/11/6 22:49:47

图形化ping工具gping

一、介绍 gping能够以折线图的方式，实时展示 ping 的结果，支持 Windows、Linux 和 macOS 操作系统。并且支持多个目标同时Ping同时展示折线图方便对比。下面扩展一下ICMP及ICMP隧道。 ICMP消息结构： ICMP消息是由一个类型字段、一个代码字段、…...

编程日记 2023/11/6 22:48:46

快速安装虚拟机centos7.5

vbox 快速导入安装centos7.5 环境准备 vbox安装（下载地址） ova镜像（下载地址）（默认是192.168.56.10 加nat网卡） 链接：https://pan.baidu.com/s/164Iprh_80HCQmKCU6V-RTw 提取码：if…...

编程日记 2023/11/6 22:46:44

2023.11.4 Idea 配置国内 Maven 源

目录配置国内 Maven 源重新下载 jar 包配置国内 Maven 源 <mirror><id>alimaven</id><name>aliyun maven</name><url>http://maven.aliyun.com/nexus/content/groups/public/</url><mirrorOf>central</mirrorOf> …...

编程日记 2023/11/6 22:45:43

DAY11 字符串处理函数

1.测字符串长度函数头文件： #include <string.h> 函数定义： size_t strlen(const char *s); 函数功能： 测字符指针 s 指向的字符串中字符的个数，不包括 ’\0’ void fun01() {char *num "hello";int len …...

编程日记 2023/11/6 22:44:42

Web自动化测试 —— PageObject设计模式！

一、page object 模式简介 1.1、传统 UI 自动化的问题无法适应 UI 频繁变化无法清晰表达业务用例场景大量的样板代码 driver/find/click 二、page object 设计原则 2.1、POM 模式的优势降低 UI 变化导致的测试用例脆弱性问题让用例清晰明朗，与具体实现无关 2.…...

编程日记 2023/11/6 22:43:41

七月论文审稿GPT第2版：从Meta Nougat、GPT4审稿到Mistral、LongLora

前言如此前这篇文章《学术论文GPT的源码解读与微调：从chatpaper、gpt_academic到七月论文审稿GPT》中的第三部分所述，对于论文的摘要/总结、对话、翻译、语法检查而言，市面上的学术论文GPT的效果虽暂未有多好，可至少还过得去&am…...

编程日记 2023/11/6 22:42:40

Unreal Engine 学习笔记（1）—— 日夜交替

1.创建关卡文件新建关卡空白关卡保存关卡（命名为NewWorld） 2.创建蓝图类创建蓝图类（继承自Actor） 命名为SunAndMoon 3.编辑SunAndMoon蓝图类添加SkyAtmosphere添加SkyLight添加DirectionalLight将DirectionalLight重命名为…...

编程日记 2023/11/6 22:41:38

leetcode:189. 轮转数组(python3解法)

难度：中等给定一个整数数组 nums，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4]解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转 3…...

编程日记 2023/11/6 22:40:36

基于PHP + MySQL实现的文章内容管理系统源码+数据库，采用前后端分离的模板和标签化方式

文章内容管理系统 dc-article是一个通用的文章内容管理系统，基于开源的caozha-admin开发，采用前后端分离的模板和标签化方式，支持文章内容管理、栏目分类管理、评论管理、友情链接管理、碎片管理、远程图片获取器等功能。可以使用本系统很轻…...

编程日记 2023/11/6 22:39:35

这可能是全网最晚的低代码技术总结

低代码的发展一向结伴着质疑前行，一些人认为低代码平台限制了开发人员的创新能力，使得开发过程变得过于简单，缺乏深度的定制和灵活性。他们担心，低代码平台可能只适合于简单的应用程序，无法满足复杂业务需求。另一面&a…...

编程日记 2023/11/6 22:38:34

leetcode2054

leetcode 2054 #include <iostream> #include <vector> #include <tuple> #include <algorithm>using namespace std;struct Event {// 时间戳int ts;// op 0 表示左边界，op 1 表示右边界int op;int val;Event(int _ts, int _op, int _v…...

编程日记 2023/11/6 22:36:33

c面向对象编码风格（上）

面向对象和面向过程的基本概念面向对象和面向过程是两种不同的编程范式，它们在软件开发中用于组织和设计代码的方式。面向过程编程（Procedural Programming）是一种以过程（函数、方法）为核心的编程方式。在面向过程…...

编程日记 2023/11/6 22:35:31

【星海出品】VUE（六）

插槽Slots 传递属性 attribute App,vue <script> import SlotsBase from "./components/SlotsBase.vue" import SlotsTow from "./components/SlotsTow.vue" export default {components:{SlotsBase,SlotsTow},data(){return{message: "父集 m…...

编程日记 2023/11/6 22:34:29

华为政企闪存存储产品集

产品类型产品型号产品说明 maintainProductOceanStor Dorado 2000 SAS 128GB华为OceanStor Dorado 2000是一款简单、可靠、绿色的全闪存存储系统，极简部署、智能运维、轻量便捷，功能齐全，广泛适用于虚拟化、数据库、办公自动化、分支机构等…...

编程日记 2023/11/6 22:32:28

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文｜魏琳华编｜王一粟一场大会，聚集了中国多模态大模型的“半壁江山”。智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...

编程新知 2025/10/24 2:57:14

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...

编程新知 2025/10/21 1:26:37

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/10/16 10:02:33

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败网络不同，需要使用镜像源按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...

编程新知 2025/10/24 16:08:31

智能AI电话机器人系统的识别能力现状与发展水平

一、引言随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/10/22 13:48:59

SQL慢可能是触发了ring buffer

简介最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

云原生安全实战：API网关Kong的鉴权与限流详解

🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...

编程新知 2025/10/24 9:57:27

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/10/24 19:30:46

一、 筛选器方法

二、 操作标签