Js原生元素选择器 _$获取id class attr 属性集合

虽然跟jQuery的实现比起来是不堪入目的。但在平时一些小项目或效果的实现中，对于js获取页面元素的操作，感觉就够用了，而不用总是依赖框架去实现一些页面的交互效果。

js截图

浏览器控制台

  1 <!DOCTYPE HTML>
  2    <html lang="en">
  3    <head>
  4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5    <title>Js自定义_$元素选择器</title>
  6    <style type="text/css">
  7    *{margin:0;padding: 0;}
  8    #content{background-color: #ccc;width: 98%;height: 2000px;padding: 1%;}
  9    #left, #center, #right{float: left;}
 10    #left{width: 20%;}
 11    #right{width: 30%;}
 12    #txt {background-color: green;padding: 5px;line-height: 1.5;color: #fff;}
 13
 14    #center{margin:0 1%;width: 48%;position: relative;}
 15    #content .dragDiv{border:1px solid #000;background-color: #fff;margin-bottom: 10px;width: 100%;}
 16    #content .dragDiv h1{background-color: green;font-size: 14px;height:25px;line-height: 1.5;color: #fff;cursor:move;}
 17    #dashedDiv{border: 2px dashed #000;z-index: 9;height: 200px;display: none;margin-bottom: 10px;}
 18
 19    </style>
 20
 21    <body>
 22  <div id="txt">虽然该css选择器跟jQuery的实现比起来是不堪一击的，尤其是在实现技巧、性能方面。但在平时一些小项目或效果的实现中，对于js获取页面元素的操作，感觉就够用了，而不用总是依赖框架去实现一些页面的交互效果。</div>
 23
 24
 25
 26  <div id="content">
 27
 28    <!-- left -->
 29    <div id="left" name="row"  class="title">
 30        <div class="dragDiv" size="font" name="dragDiv" style="height:200px;">
 31          <h1>Title1</h1>
 32          Content1...
 33        </div>
 34
 35         <div class="dragDiv" name="dragDiv" style="height:300px;">
 36          <h1>Title2</h1>
 37          Content2...
 38        </div>
 39    </div>
 40
 41    <!-- center -->
 42    <div id="center" name="row"  class="title">
 43        <div class="dragDiv" name="dragDiv" style="height:100px;">
 44          <h1 class="title" size="font" >Title3</h1>
 45          Content3...
 46        </div>
 47
 48         <div class="dragDiv" name="dragDiv" style="height:500px;">
 49          <h1>Title4</h1>
 50          Content4...
 51        </div>
 52    </div>
 53
 54    <!-- right -->
 55    <div id="right" name="row" size="font" >
 56        <div class="dragDiv" name="dragDiv" style="height:250px;">
 57          <h1 class="title">Title5</h1>
 58          Content5...
 59        </div>
 60
 61         <div class="dragDiv" name="dragDiv" style="height:310px;">
 62          <h1 class="title" size="font" >Title6</h1>
 63          Content6...
 64        </div>
 65    </div>
 66
 67    <!-- 虚线div -->
 68    <div id="dashedDiv"></div>
 69  </div>
 70
 71  <script type="text/javascript">
 72  /**
 73   * 简单css选择器 支持#id, .class, tagName.className, attr=name
 74   * @param {String}
 75   * @return {object || Array} 单个元素或元素集合
 76   */
 77  var _$ = function(object){
 78    if(object === undefined ) return;
 79    var getArr = function(name,tagName,attr){
 80          var tagName = tagName || '*',
 81              eles = document.getElementsByTagName(tagName),
 82              clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
 83              attr = attr || clas,
 84              Arr = [];
 85          for(var i=0;i<eles.length;i++){
 86            if(eles[i].getAttribute(attr)==name){
 87              Arr.push(eles[i]);
 88            }
 89          }
 90          return Arr;
 91        };
 92
 93    if(object.indexOf('#') === 0){  //#id
 94      return document.getElementById(object.substring(1));
 95    }else if(object.indexOf('.') === 0){  //.class
 96      return getArr(object.substring(1));
 97    }else if(object.match(/=/g)){  //attr=name
 98      return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
 99    }else if(object.match(/./g)){ //tagName.className
100      return getArr(object.split('.')[1],object.split('.')[0]);
101    }
102  }
103
104
105
106  var a = _$("#right"),
107      b = _$("#center"),
108      c = _$(".dragDiv"),
109      d = _$(".title"),
110      e = _$("h1.title"),
111      f = _$("name=dragDiv"),
112      g = _$("size=font");
113
114 console.log(a);
115 console.log(b);
116 console.log(c);
117 console.log(d);
118 console.log(e);
119 console.log(f);
120 console.log(g);
121  </script>
122
123  </body>
124  </html

转载于:https://www.cnblogs.com/dtdxrk/archive/2013/05/20/3088915.html

Js原生元素选择器 _$获取id class attr 属性集合相关推荐

html js 选择器,h.js - dom元素选择器
dom元素选择器使用h(selector)可以快速的选择dom元素,支持下面几种选择方式: 1.id选择器 2.类选择器 3.标签选择器 4.原生对象选择器选择器语法及返回语法: h('选择器') ...
js原生后代选择器_HTML5的JavaScript选择器介绍
在HTML5出现之前使用JavaScript查找DOM元素,有以下三种原生的方法: getElementById:根据指定元素的id属性返回元素 getElementsByName:返回所有指定nam ...
js原生后代选择器_js 后代选择器
CSS规范 - 命名规则使用类选择器,放弃ID选择器ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用.NEC特殊字符:"-"连字符"-"在 ...
js原生后代选择器_JavaScript DOM查询，原生js实现元素子节点的获取
每个网页都是一个dom树,网页中所有的内容都是这个树上的一个节点.JavaScript的工作就是操作这些节点,对节点进行查增删改操作,或是给节点绑定事件. 网页 dom树要操作dom节点,首先要获取 ...
JS获取id节点修改属性和元素
<html><head><meta charset="utf-8"><title></title></head&g ...
js原生后代选择器_jQuery的后代选择器ancestor descendant介绍和示例解析
jQuery的ancestor descendant选择器(后代选择器)用于匹配ancestor元素内所有的descendant元素,将其封装为jQuery对象并返回. 注意:选择器descendan ...
js原生后代选择器_CSS 后代选择器
具体应用后代选择器的功能极其强大.有了它,可以使 HTML 中不可能实现的任务成为可能. 假设有一个文档,其中有一个边栏,还有一个主区.边栏的背景为蓝色,主区的背景为白色,这两个区都包含链接列表.不 ...
JS: 关于元素大小和距离的有关的属性总结
2019独角兽企业重金招聘Python工程师标准>>> Element的属性中关于距离的属性偏移量 offsetHeight:元素在垂直方向上所占空间的大小,包括(上下边框和水平滚 ...
前端js数组元素的筛选，修改，新增属性小技巧一---前端数据筛选filter()函数，更新数组map()函数；
举个简单的例子(对数组的筛选,比如说3的倍数的值取出来): var a = [1,2,3,4,5,6,7];a = a.filter(function(value){var flag = true;i ...

Js原生元素选择器 _$获取id class attr 属性集合

Js原生元素选择器 _$获取id class attr 属性集合相关推荐

最新文章

热门文章