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

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

news 2025/7/7 12:13:40

一、筛选器方法

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

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法最新版…...

编程新知 2025/7/5 20:45:35

使用VSCode开发Django指南

使用VSCode开发Django指南一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/7/6 11:27:02

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/7/6 1:11:45

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...

编程新知 2025/6/17 2:24:14

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...

编程新知 2025/6/21 9:48:10

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发下面是 Solidity 合约开发的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为以太坊（Ethereum）平台编写智能合约的高级编…...

编程新知 2025/6/21 12:34:41

Java入门学习详细版（一）

大家好，Java 学习是一个系统学习的过程，核心原则就是“理论实践坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/6/21 6:15:03

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码五、报告文件爬取5.1 提…...

编程新知 2025/7/6 10:04:23

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

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

编程新知 2025/7/6 14:31:08

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/7/7 4:31:28

一、 筛选器方法

二、 操作标签