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

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

//模仿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>
http://www.lryc.cn/news/234307.html

相关文章:

  • 机器学习第7天:逻辑回归
  • 努力奋斗,遇上对的人
  • 基于单片机音乐弹奏播放DS1302万年历显示及源程序
  • ceph学习笔记
  • SQLSERVER 遍历循环的两种方式很详细有源码(2)
  • flutter背景图片设置
  • 【运维 监控】Grafana + Prometheus,监控Linux
  • Sentinel底层原理(下)
  • 竞赛选题 疫情数据分析与3D可视化 - python 大数据
  • macos 配置ndk环境
  • 【linux】进行间通信——共享内存+消息队列+信号量
  • PlantUML基础使用教程
  • Redis:新的3种数据类型Bitmaps、HyperLoglog、Geographic
  • promise时效架构升级方案的实施及落地 | 京东物流技术团队
  • es的使用方法以及概念
  • WPF xaml Command用法介绍
  • 微信小程序动态生成表单来啦!你再也不需要手写表单了!
  • 顺序表(数据结构与算法)
  • 【大连民族大学C语言CG题库练习题】——判断一个矩阵是另一个矩阵的子矩阵
  • C#WPF控制模板实例
  • MATLAB Simulink和S7-1200PLC MOBUSTCP通信
  • 五、函数的介绍
  • 【广州华锐互动VRAR】VR元宇宙技术在气象卫星知识科普中的应用
  • F. Alex‘s whims Codeforces Round 909 (Div. 3) 1899F
  • 面试题-5
  • 车载以太网-ARP
  • Kafka学习笔记(三)
  • JVM-HotSpot虚拟机对象探秘
  • 大模型技术的发展:开源和闭源,究竟谁强谁弱又该何去何从?
  • Python学习笔记--自定义元类