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

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

news 2025/9/8 0:05:47

一、筛选器方法

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

centos 7 部署awstats 网站访问检测

一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

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

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

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

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

Go 语言接口详解

Go 语言接口详解核心概念接口定义在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...

编程新知 2025/8/13 18:32:28

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。二、核心实现方案 1. 环境配置 （1）使用React Native…...

编程新知 2025/8/19 2:57:37

工程地质软件市场：发展现状、趋势与策略建议

一、引言在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/6/17 23:10:20

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言生活的美好，总是藏在那些你咬牙坚持的日子里。硬件：OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写，"1306" 是产品编号。驱动 OLED 屏幕的 IIC 总线数据传输格式示意图 …...

编程新知 2025/8/31 20:34:05

数据链路层的主要功能是什么

数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装封装： 将网络层下发…...

编程新知 2025/6/16 23:36:50

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目，所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/8/23 22:05:50

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念线程安全（Thread Safety） 线程安全是指在多线程环境下，某个函数、类或代码片段能够被多个线程同时调用时，仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/7/6 22:10:07

一、 筛选器方法

二、 操作标签