文档章节

js如何只获得Element自定义属性(自己手写在标签上的规定属性),不是自定义属性$(obj).attr("xx")

BeGit
 BeGit
发布于 2017/07/20 10:36
字数 307
阅读 42
收藏 0

1.遍历某element元素获得属性时,属性包含的信息有很多来自原型链上的属性和方法,而这些信息有时候我们是不需要的。用下面的方法只获得我们手写在标签上的自己指定的信息。

2.获得我们手写在标签上的值:

<!doctype html>
<html lang="en">
 <head>
 
  <title>Document</title>
   <script type="text/javascript" src="jquery-1.6.js"></script>
 </head>
 <body>
    <input type="checkbox" name="cbx_check" id="c1" value="v1"  p1="p1" p2="p2" p3="p3"/>
    
    <script type="text/javascript">  

        function getElementAttrObj(elementObj) {  
            var elementAttrObj = {};

            if(elementObj){
                var el = elementObj;
                var atts = el.attributes;  
                var el_specified_key_val_str = '';
                for (var i =0,len = atts.length; i < len; i++) {  
                    var att = atts[i];  
                    //console.info(att.specified+"-"+att.name + '-' + att.value );
                    debugger;
                    var att_name = att.name.toLowerCase();
                    //规定属性
                    if (att.specified || att_name == 'value') {  
                        el_specified_key_val_str += ',"' + att.name + '":"' + att.value + '"';
                    }  
                }  
                //属性对象
                if(el_specified_key_val_str){
                    el_specified_key_val_str = el_specified_key_val_str.substr(1);
                    var el_specified_str = "{";
                    el_specified_str += el_specified_key_val_str;
                    el_specified_str += "}";
                    elementAttrObj = eval('(' +  el_specified_str + ')');
                    //console.info(el_specified_key_val_str);
                }
            }

            return elementAttrObj;
        }  

        var el = document.getElementById("c1");
        var elementAttrObj = getElementAttrObj(el);  
        var str = "";
            for(p in elementAttrObj){
                str += p + ":" + elementAttrObj[p] + ",";
            }
            alert(str);  

    
          
       //jquery的方法  
    /*
        $("#c1").each(function () {  
            var arr = [];  
            var attrs = $(this).get(0).attributes;  
            for (i = 0; i < attrs.length; i++) {  
                att = attrs[i];  
                if (att.specified && att.name.toLowerCase().indexOf("data-") != -1) {  
  
                    arr.push(att.name + ":" + att.value);  
                    $(this).get(0).removeAttribute(att.name);  
                }  
            }  
            var str = arr.join("");  
            alert(str);  
        }) 
      */    
    </script>  

 </body>
</html>
 

© 著作权归作者所有

BeGit
粉丝 20
博文 92
码字总数 70143
作品 0
顺义
后端工程师
私信 提问
JavaScript的原型及原型链

许多人对JavaScript的原型及原型链仍感到困惑,网上的文章又大多长篇大论,令读者不明觉厉。本人小学时语文拿过全校第一名,我将用最简洁明了的文字介绍JavaScript的原型及原型链。 什么是原...

smalldragonluo
2013/10/22
0
5
4)jQuery的基础部分和js的部分

1:js: 包含三部分: ESMAScript:基础语法 Array() 索引 、length、push()、pop() DOM: 获取DOM的三种方式: (1)Id (2)Class (3)标签获取 TayName BOM: 入口函数: 等待这文...

tty之星
2018/07/20
0
0
jQuery中attr()和prop()方法的一些区别理解

昨天在开发的时候同事帮忙写了一小段JS代码,取数据的时候用到了以前都没用过的的这种形式,后来看了手册才知道在HTML5中可以对元素进行自定义属性。格式类似于,然后可以用JQ中的方法进行存取...

一个向往前端的后端工程师
2018/08/27
0
0
JavaScript获取和控制CSS样式对照表

大家都知道,用document.getElementById(‘element’).style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们...

曾杨
2014/02/09
0
0
javascript之DOM操作

一、document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> 我是第一个P</p> <p id="p2"> 我是第二个P</p> </div> window.onload = function () { var str = document......

烹饪师
2015/08/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Kubernetes云供应商架构的未来

首先,我想分享SIG的使命,因为我们用它来指导我们现在和将来的工作。从我们的章程中直接来看,SIG的使命是简化,开发和维护云供应商集成,作为Kubernetes集群的扩展或附加组件。这背后的动机...

Linux就该这么学
36分钟前
2
0
线程池没你想的那么简单

前言 原以为线程池还挺简单的(平时常用,也分析过原理),这次是想自己动手写一个线程池来更加深入的了解它;但在动手写的过程中落地到细节时发现并没想的那么容易。结合源码对比后确实不得...

crossoverJie
43分钟前
55
0
Scientific Linux开发停止 相关设备将迁移至CentOS上

在经历了将近14年的版本更迭之后,这个专注于科学领域的GNU/Linux发行版本不会发布下个重大版本更新--Scientific Linux 8了。 目前维护该发行版本的成员最终决定是时候休息了,今后将不再发布...

linuxCool
48分钟前
2
0
Redux

Redux概念 Redux = Reducer + Flux,数据层框架,将所有数据都存储到store中 Redux的工作流程 Antd的使用 安装npm install antd --save import 'antd/dist/antd.css'import { Input, Butto......

星闪海洋
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部