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

javascript选择器的封装，只需要写元素名或css类及id都可以选择到元素

news 2025/7/7 23:16:34

//模仿jquery选择器样式，只需要写元素名或css类及id都可以选择到元素

<html><head><meta http-equiv="Content-Type:text/html;charset=utf=8"/><link rel="shortcut icon" href="#"/><title>封装选择器</title></head><style type="text/css">.context {color:black;font-size: 16px;width: 300px;height: 300px;}.div{border: 1px solid blue;}</style><body><div class="context div" >这是文本内容<ul><li class="listyle"><input type="text" name="user" value=""/></li><li class="listyle"><input type="password" name="pwd" value=""/></li><li class="listyle"><input type="password" name="pwd1" value=""/></li></ul></div><script type="text/javascript">Function.prototype.addMethods=function(name,fn){this.prototype[name]=fn;}function selectEle(selector){var selector=this.trim(selector);this.elements=[];var node;if(selector.indexOf(' ')!==-1){node=this.getClass(selector)[0];if(node){this.elements.push(node);}else if(node=this.getTagName(selector)){if(node.length>1){for(var i=0;i<node.length;i++){this.elements.push(node[i]);}}}else{throw "请输入正确的选择符";}}else if(selector.indexOf('[')!==-1){var selector=selector.slice(1,-1);node=this.getAttr(selector);//console.log(this.getAttr(selector));if(node){this.elements.push(node);}else{alert("请输入正确的选择符");}}else{if(/^[#|.]/.test(selector)){node=this.getCss(selector);if(node){this.elements.push(node);}else{alert("请输入正确的选择符");}}else{node=this.getTagName(selector);if(node.length==1){this.elements.push(node[0]);}else if(node.length>1){for(var i=0;i<node.length;i++){this.elements.push(node[i]);}}else{alert('请输入正确的选择符');}}   }return this.elements;}selectEle.addMethods('getClass',function(selector){return document.getElementsByClassName(selector);});selectEle.addMethods('getCss',function(selector){try{return document.querySelector(selector);}catch(err){alert(err);}});selectEle.addMethods('getTagName',function(selector){try{return document.querySelectorAll(selector);}catch(err){alert(err);}});selectEle.addMethods('getAttr',function(selector){try{var tag=document.body.getElementsByTagName('*');var ele=[];if(selector.indexOf('=')==-1){for(var i=0;i<tag.length;i++){if(tag[i].getAttribute(selector)!=undefined && tag[i].tagName !="SCRIPT"){ele.push(tag[i]);}}}else{var selector=selector.split('=');for(var i=0;i<tag.length;i++){var att=tag[i].getAttribute(selector[0]);//console.log(att);if(att && att!=="text/javascript" && att!=="text/css"){if(att.toString().toLocaleLowerCase()===selector[1].toString().toLocaleLowerCase()){ele.push(tag[i]);}}}}return ele;}catch(err){alert(err);}});//只是为测试IE7/8写的临时兼容去空白函数selectEle.addMethods('trim',function(str){return str.replace(/^\s\s*/,'').replace(/\s\s*$/,'');});var $=function(args){return new selectEle(args);}console.log($('li'));</script>  </body>
</html>

相关文章：

javascript选择器的封装，只需要写元素名或css类及id都可以选择到元素

//模仿jquery选择器样式&#xff0c;只需要写元素名或css类及id都可以选择到元素 <html><head><meta http-equiv"Content-Type:text/html;charsetutf8"/><link rel"shortcut icon" href"#"/><title>封装选择器&l…...

编程日记 2023/11/18 16:54:46

机器学习第7天：逻辑回归

文章目录 介绍 概率计算 逻辑回归的损失函数 单个实例的成本函数 整个训练集的成本函数 鸢尾花数据集上的逻辑回归 Softmax回归 Softmax回归数学公式 Softmax回归损失函数 调用代码 参数说明 结语 介绍 作用&#xff1a;使用回归算法进行分类任务 思想&#xff1a;…...

编程日记 2023/11/18 16:53:45

努力奋斗,遇上对的人

...

编程日记 2023/11/18 16:52:44

基于单片机音乐弹奏播放DS1302万年历显示及源程序

一、系统方案 1、本设计采用51单片机作为主控器。 2、DS1302计时显示年月日时分秒。 3、按键可以弹奏以及播放音乐&#xff0c;内置16首音乐。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 /时钟显示**/ void init_1602_ds1302() { write…...

编程日记 2023/11/18 16:51:43

ceph学习笔记

ceph ceph osd lspoolsrbd ls -p testpool#查看 ceph 集群中有多少个 pool,并且每个 pool 容量及利 用情况 rados dfceph -sceph osd tree ceph dfceph versionsceph osd pool lsceph osd crush rule dumpceph auth print-key client.adminceph orch host lsceph crash lsceph…...

编程日记 2023/11/18 16:49:41

SQLSERVER 遍历循环的两种方式很详细有源码(2)

2.游标循环 Create table WS_Student ( [Id] int primary key not null, [My_Cocode] [int], [My_SCocode] [int], [userId] [bigint], [SetCName] [varchar](50) NULL, [SetEName] [varchar](50) NULL, [SetPcode] [varchar](50) NULL, [Se…...

编程日记 2023/11/18 16:48:40

flutter背景图片设置

本地图片设置 1、在配置文件pubspec.yaml中&#xff0c;设置以下代码 assets:- assets/- assets/test/2、如果目录中没有assets文件夹&#xff0c;则创建一个文件夹&#xff0c;并且取名为assets&#xff0c;在此文件夹中存放图片资源即可&#xff0c;如果想分文件夹管理&…...

编程日记 2023/11/18 16:47:39

【运维 监控】Grafana + Prometheus，监控Linux

安装和配置Grafana与Prometheus需要一些步骤&#xff0c;下面是一个简单的指南&#xff1a; 安装 Prometheus&#xff1a; 使用包管理器安装 Prometheus。在 Debian/Ubuntu 上&#xff0c;可以使用以下命令&#xff1a; sudo apt-get update sudo apt-get install prometheus在…...

编程日记 2023/11/18 16:46:38

Sentinel底层原理（下）

1、概述 Sentinel的核心原理&#xff0c;也就是前面提到暗流涌动的SphU.entry(…)这行代码背后的逻辑。 Sentinel会为每个资源创建一个处理链条&#xff0c;就是一个责任链&#xff0c;第一次访问这个资源的时候创建&#xff0c;之后就一直复用&#xff0c;所以这个处理链条每…...

编程日记 2023/11/18 16:42:33

竞赛选题 疫情数据分析与3D可视化 - python 大数据

文章目录 0 前言1 课题背景2 实现效果3 设计原理4 部分代码5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 大数据全国疫情数据分析与3D可视化 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff0…...

编程日记 2023/11/18 16:41:32

macos 配置ndk环境

选择Android Studio下默认的ndk环境 mac电脑的ndk默认路径一般是 /Users/user_name/Library/Android/sdk/ndk/version_code 其中user_name为自己电脑的用户名&#xff0c;version_code为自己ndk安装的版本号&#xff0c;比如我这里电脑的ndk路径就是 /Users/zhangsan/Libra…...

编程日记 2023/11/18 16:38:29

【linux】进行间通信——共享内存+消息队列+信号量

共享内存消息队列信号量 1.共享内存1.1共享内存的原理1.2共享内存的概念1.3接口的认识1.4实操comm.hppservice.cc &#xff08;写&#xff09;clint.cc &#xff08;读&#xff09; 1.5共享内存的总结1.6共享内存的内核结构 2.消息队列2.1原理2.2接口 3.信号量3.1信号量是什么3…...

编程日记 2023/11/18 16:37:26

PlantUML基础使用教程

环境搭建 IDEA插件下载 打开IEDA系列IDE&#xff0c;从FIle–>Settings–>Plugins–>Marketplace 进入到插件下载界面&#xff0c;搜索PlantUML&#xff0c;安装PlantUML Integration和PlantUML Parser两个插件&#xff0c;并重启IDE 安装和配置Graphviz 进入官网…...

编程日记 2023/11/18 16:36:24

Redis：新的3种数据类型Bitmaps、HyperLoglog、Geographic

目录 Bitmaps简介常用命令bitmaps与set比较 HyperLoglog简介命令 Geographic简介命令 Bitmaps 简介 位操作字符串。 现代计算机使用二进制&#xff08;位&#xff09;作为信息的基本单位&#xff0c;1个字节等于8位&#xff0c;例如“abc”字符串是有3个字节组成&#xff0c…...

编程日记 2023/11/18 16:35:23

promise时效架构升级方案的实施及落地 | 京东物流技术团队

一、项目背景 为什么需要架构升级 promise时效包含两个子系统&#xff1a;内核时效计算系统&#xff08;系统核心是时效计算&#xff09;和组件化时效系统&#xff08;系统核心是复杂业务处理以及多种时效业务聚合&#xff0c;承接结算下单黄金流程流量&#xff09;&#xff…...

编程日记 2023/11/18 16:34:22

es的使用方法以及概念

Elasticsearch&#xff08;简称为ES&#xff09;是一个开源的搜索引擎&#xff0c;它构建在Lucene搜索引擎之上。它提供了一个分布式、多租户的全文搜索引擎&#xff0c;具有强大的实时分析能力。以下是关于Elasticsearch的一些基本概念和使用方法&#xff1a; 基本概念&#…...

编程日记 2023/11/18 16:33:21

WPF xaml Command用法介绍

WPF (Windows Presentation Foundation) 中的命令设计模式是一种用于分离用户界面逻辑和业务逻辑的方法。在WPF中&#xff0c;这种模式通过命令接口&#xff08;如 ICommand&#xff09;实现&#xff0c;使得用户界面组件&#xff08;如按钮、菜单项等&#xff09;可以触发不直…...

编程日记 2023/11/18 16:32:20

微信小程序动态生成表单来啦！你再也不需要手写表单了！

dc-vant-form 由于我们在小程序上涉及到数据采集业务&#xff0c;需要经常使用表单&#xff0c;微信小程序的表单使用起来非常麻烦&#xff0c;数据和表单是分离的&#xff0c;每个输入框都需要做数据处理才能实现响应式数据&#xff0c;所以我开发了dc-vant-form&#xff0c;…...

编程日记 2023/11/18 16:31:18

顺序表（数据结构与算法）

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…...

编程日记 2023/11/18 16:30:17

【大连民族大学C语言CG题库练习题】——判断一个矩阵是另一个矩阵的子矩阵

【问题描述】 从标准输入中输入一个N&#xff08;N<9&#xff09;阶矩阵和一个M&#xff08;M<N&#xff09;阶矩阵&#xff0c;判断矩阵M是否是N的子矩阵&#xff0c;若是则输出M在N中的起始位置&#xff0c;若不是则输出-1。若矩阵M能与N中某一区域完全相等&#xff0…...

编程日记 2023/11/18 16:29:15

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/7/7 6:59:35

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/6/23 2:48:54

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/7/7 12:52:32

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/6/20 11:09:49

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/7/6 6:16:10

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/7/7 1:55:00

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2025/7/7 0:36:22

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/7/6 3:16:52

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2025/7/6 11:38:40

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2025/7/6 1:50:36