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

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

news 2026/4/2 16:44:06

一、筛选器方法

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

零基础鸿蒙应用开发第二十二节：类的继承与多态入门

【学习目标】理解继承的核心意义，掌握ArkTS中extends关键字的使用规则，区分“单继承”特性在鸿蒙开发中的适配场景；掌握super关键字的核心作用（调用父类构造函数、调用父类方法），规避继承中的常见语法错误…...

编程新知 2026/4/2 16:40:23

利用trl库实现DeepSeek-R1的GRPO训练：从数据处理到模型验证全流程解析

1. 理解GRPO训练与trl库的核心价值 GRPO（Generalized Reinforcement Policy Optimization）是近年来在强化学习领域兴起的一种训练方法，它通过多维度奖励机制来优化大语言模型的输出质量。我在实际项目中发现，相比传统的PPO&#x…...

编程新知 2026/4/2 16:36:17

终极视频修复指南：如何使用Untrunc轻松恢复损坏的MP4/MOV文件

终极视频修复指南：如何使用Untrunc轻松恢复损坏的MP4/MOV文件【免费下载链接】untrunc Restore a truncated mp4/mov. Improved version of ponchio/untrunc 项目地址: https://gitcode.com/gh_mirrors/un/untrunc 你是否曾经遇到过珍贵的视频文件突然无法播…...

编程新知 2026/4/2 16:13:37

芯片设计Signoff前必看！数字后端工程师的5大验证避坑清单（含CTS实战案例）

芯片设计Signoff前必看！数字后端工程师的5大验证避坑清单（含CTS实战案例） 在数字后端设计的最后冲刺阶段，每个工程师都经历过那种如履薄冰的体验——明明所有检查项都已通过，却在流片前夜发现某个角落的时序违例。这种…...

编程新知 2026/4/2 14:03:33

DWA算法参数互相影响揭秘：为什么调大直线速度后你的机器人不会转弯了？

DWA算法参数互相影响揭秘：为什么调大直线速度后你的机器人不会转弯了？ 在移动机器人导航领域，DWA（Dynamic Window Approach）算法因其高效性和实用性被广泛应用。然而，许多开发者在调整参数时都会遇到一个典…...

编程新知 2026/4/2 13:40:42

颠覆黑苹果配置传统：革新式极简EFI生成方案，突破技术壁垒

颠覆黑苹果配置传统：革新式极简EFI生成方案，突破技术壁垒【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 你是否也曾被黑苹果配…...

编程新知 2026/4/2 13:18:29

构建智能压枪系统：罗技鼠标宏的底层技术与实战优化

构建智能压枪系统：罗技鼠标宏的底层技术与实战优化【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生罗技鼠标宏项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 问题剖析：后坐力控制的…...

编程新知 2026/4/2 12:40:07

BilibiliDown：基于Java的B站视频下载技术方案与实现解析

BilibiliDown：基于Java的B站视频下载技术方案与实现解析【免费下载链接】BilibiliDown (GUI-多平台支持) B站哔哩哔哩视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirrors…...

编程新知 2026/4/2 12:15:38

OpenClaw人人养虾：LiteLLM 统一网关

LiteLLM 是一个开源的 LLM API 统一网关（Unified Gateway），支持 100 模型提供商，提供统一的 OpenAI 兼容 API 格式。安装 LiteLLM pip 安装 pip install litellm[proxy] Docker 安装 docker run -p 4000:4000 \-e OPENAI_AP…...

编程新知 2026/4/2 12:07:27

别再买错卡了！手把手教你用Arduino Uno和MFRC522模块DIY智能门禁（附完整代码和避坑指南）

从零搭建Arduino RFID门禁：硬件选购、代码优化与避坑全指南第一次接触Arduino和RFID技术时，我被琳琅满目的硬件选择和复杂的代码搞得晕头转向。特别是当兴冲冲买回一堆组件后，发现卡片根本无法被识别——原来是因为忽略了频率匹配这个关键细…...

编程新知 2026/4/2 9:08:43

一、 筛选器方法

二、 操作标签