当前位置:首页 > Javascript技术文章 > JS中Attr的用法详解

实例详解JS中Attr用法

  • 发布时间:
  • 作者:码农之家原创
  • 点击:150

这篇文章主要知识点是关于js、attr、JS Attribute属性操作详解 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下java相关资源

JavaScript权威指南 查看详情

JS中Attr的用法详解

具体代码如下所示:

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#btn").click(function(){
      //使用attr(name)获取属性值:
      alert($("p").attr("title"));//你最喜欢的水果是。
      alert($("ul li:eq(1)").attr("title"));//橘子汁
      alert($("ul li:eq(1)").attr("alt"));//123
      //使用attr(name, value)改变属性值:
      //$("ul li:eq(1)").attr("title", "还是吗?");//将第二个li的title的值改变
      //使用attr(name, fn)设置属性的函数值
      $("ul li:eq(1)").attr("title", function(){
          return "我就不信";
      });//将第二个li的title的值改变
      alert($("ul li:eq(1)").attr("title"));//我就不信
      //使用attr(name, properties)将一个“名/值”形式的对象设置为所有匹配元素的属性
      $("ul li:eq(1)").attr({title: "第一个", alt: "第二个"});
      alert($("ul li:eq(1)").attr("title"));//第一个
      alert($("ul li:eq(1)").attr("alt"));//第二个
    });
  });
</script>
<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
<ul>
  <li title="苹果汁">苹果</li>
  <li title="橘子汁" name="好吃" alt="123">橘子</li>
  <li title="菠萝汁">菠萝</li>
</ul>
<input type="button" value="点击" id="btn"/>

总结

以上所述是小编给大家介绍的JS中Attr的用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

JS Attribute属性操作详解

Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍。

attributes:获取一个属性作为对象

getAttribute:获取某一个属性的值

setAttribute:建立一个属性,并同时给属性捆绑一个值

createAttribute:仅建立一个属性

removeAttribute:删除一个属性

getAttributeNode:获取一个节点作为对象

setAttributeNode:建立一个节点

removeAttributeNode:删除一个节点

attributes可以获取一个对象中的一个属性,并且作为对象来调用,注意在这里要使用“[]”,IE在这里可以使用“()”,考虑到兼容性的问题,要使用“[]”。关于attributes属性的使用方式上,IE和FF有巨大的分歧,在此不多介绍。

attributes的使用方法:(IE和FF通用)

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").attributes["value"];
document.write(d.name);
document.write(d.value);
//显示value aaa
</script>

getAttribute,setAttribute,createAttribute,removeAttribute四兄弟的概念比较容易理解,使用方法也比较简单,唯一需要注意这几点:

1、createAttribute在使用的时候不需要基于对象的,document.createAttribute()就可以。

2、setAttribute,createAttribute在使用的时候不要使用name,type,value等单词,IE和FF的反应都奇怪的难以理解。

3、createAttribute在使用的时候如果只定义了名字,没有d.nodeValue = "hello";语句定义值,FF会认为是一个空字符串,IE认为是undefined,注意到这点就可以了。

getAttribute的使用方法:

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").getAttribute("value");
document.write(d);
//显示 aaa
</script>

setAttribute的使用方法:(你会发现多了一个名为good的属性hello)

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").setAttribute("good","hello");
alert(document.getElementById("t").innerHTML)
</script>

createAttribute的使用方法:(多了一个名为good的空属性)

<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
      window.onload = function (){
        var oBox = document.getElementById('box');
        alert( document.body.innerHTML );
        oBox.setAttribute('value','name');
        alert( document.body.innerHTML );
        attr = document.createAttribute('hallo');
        alert( document.body.innerHTML );/*同上*/
        attr.nodeValue = 'world';/*对自定义属性进行编辑*/
        alert( document.body.innerHTML );/*同上*/
        oBox.setAttributeNode(attr);/*对标签插入自定义属性*/
        alert( document.body.innerHTML );/*改变*/
      };
    </script>
  </head>
  <body>
    <ul id="box">
    </ul>
  </body>

removeAttribute的使用方法:(少了一个)

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").removeAttribute("value");
alert(document.getElementById("t").innerHTML)
</script>

getAttributeNode,setAttributeNode,removeAttributeNode三个方法的特点是都直接操作一个node(节点),removeAttributeNode在一开始的时候总会用错,但是充分理解了node的含义的时候,就能够应用自如了。

getAttributeNode的使用方法:

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").getAttributeNode("value"); 
document.write(d.name);
document.write(d.value);
//显示 value aaa
</script>

setAttributeNode的使用方法:

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.createAttribute("good");
document.getElementById("sss").setAttributeNode(d);
alert(document.getElementById("t").innerHTML);
</script>

removeAttributeNode的使用方法:

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").getAttributeNode("value")
document.getElementById("sss").removeAttributeNode(d); 
alert(document.getElementById("t").innerHTML);
</script>
更多的关于attributes属必性问题,可在w3school中查询!

以上这篇JS Attribute属性操作详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到echarts中箱线图的分析与绘、 让JS验证密码不能为空的实、 JavaScript中的call、apply方法、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:推荐Bootstrap免费字体和图标网站

下一篇:JavaScript的6种继承方式总结

展开 +

收起 -

Attr用法 相关内容
第三方JavaScript编程

第三方JavaScript应用程序是自包含的应用组件,通常都是小脚本或插件,能够为Web站点增加功能。它们往往是由独立的组织或个人提供的,代码和文件都是来自于远程的Web地址。 《第三方JavaS

查看详情
Web前端开发精品课 JavaScript基础教程

《JavaScript基础教程》 共分为2大部分,第1部分是JavaScript基础知识,主要学习JavaScript基础概念如变量、运算符、表达式等。第二部分是JavaScript进阶知识,主要学习DOM、事件操作以及各种开发技

查看详情
JavaScript函数式编程指南

这书关键介绍怎样根据ECMAScript6将函数式编程关键技术于编码,以减少编码的多元性。这书共三一部分內容。*一部分函数式观念是为第二一部分的学习培训作铺垫的,这一部分引入了对函数式

查看详情
JavaScript编程全解

JavaScript编程全解 全方位地介绍了JavaScript开发中的各个主题,无论是前端还是后端的JavaScript开发者都可以在本书中找到自己需要的内容。本书对HTML5、Web API、Node.js及WebSocket等最新的热门技术也

查看详情
JavaScript和jQuery实战手册

JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

查看详情
JavaScript基础教程

本书是经典的JavaScript入门书,以易学便查、图文并茂、循序渐进和善于用常见任务讲解语言知识而著称。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式

查看详情
精通JavaScript

精通JavaScript(第2版) 是iQuery之父的经典之作,是深入学习JavaScript技术的绝佳教材,涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技

查看详情
Attr用法 学习笔记
网友NO.757790

JQuery中attr方法和removeAttr方法用法实例

本文实例讲述了JQuery中attr方法和removeAttr方法用法。分享给大家供大家参考。具体如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title/titlestyle type="text/css"div{width:100px;margin:0px auto;border:1px solid red;}/stylescript src="jquery-1.6.2.min.js" type="text/javascript"/scriptscript type="text/javascript"$(function () { $("#btnChange").click(function () { var $divs = $("div"); //----1.举例1 //$divs.eq(0).attr("MyAttr", "Ronaldo"); //eq返回指定下标的JQuery对象(注意:此时$divs中有两个div的dom元素) //$divs.eq(1).attr("MyAttr", "Ronaldo1"); //alert($divs.attr("MyAttr")); //读取MyAttr属性,注意,只会读取出第一个元素的该属性 //----2.举例2 使用JSon格式设置attr //$divs.eq(0).attr({ "MyAttr": "Ronaldo", "Age": "19" }); //$d……

网友NO.996486

jQuery学习之prop和attr的区别示例介绍

1、.prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2、 .prop( propertyName, value ) .prop( map ) .prop( propertyName, function(index, oldPropertyValue) ) 给匹配元素集合设定一个或多个属性 .prop()和 .attr()区别 下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使用 Attributes模块的变化是移除了attributes和properties之间模棱两可的东西,但是在jQuery社区中引起了一些混乱,因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一些bug,很难维护。jQuery1.6.1对Attributes模块进行了更新,并且修复了几个bug。 elem.checked true (Boolean) Will change with checkbox state $(elem).prop("checked") true (Boolean) Will change with checkbox state elem.getAttribute("checked") "checked" (String) Initial state of the checkbox; does not change $(elem).attr("checked")(1.6……

网友NO.988163

Spring配置中transactionAttributes的使用方法介绍

最近碰到这个问题,在使用spring提供的JpaTemplate进行查询时,如果数据量超过100 条,查询效率就会明显降低。由于开始时使用JPA内部的双向关联,造成各实体内部关联过多,从而影响所有的操作,因此怀疑是因为JPA的关联关系所致。但是去掉关联关系后的效果不显著。 查找spring的相关配置,发现原来关于“transactionAttributes”有问题。原来的配置如下: bean id="baseTransactionProxy" class="org.springframework.transaction.interceptor.TransactionProxyFactoryBean" lazy-init="true" abstract="true" property name="transactionManager" ref bean="transactionManager" / /property property name="transactionAttributes" props prop key="sav*"PROPAGATION_REQUIRED/prop prop key="update*"PROPAGATION_REQUIRED/prop prop key="delete*"PROPAGATION_REQUIRED/prop prop key="get*"PROPAGATION_REQUIRED,readOnly/prop prop key="find*"PROPAGATION_REQUIRED,readOnly/prop /props /property /bean 使用上述配置……

网友NO.710832

浅谈使用Python内置函数getattr实现分发模式

本文研究的主要是使用Python内置函数getattr实现分发模式的相关问题,具体介绍如下。 getattr 常见的使用模式是作为一个分发者。举个例子,如果你有一个程序可以以不同的格式输出数据,你可以为每种输出格式定义各自的格式输出函数,然后使用唯一的分发函数调用所需的格式输出函数。 例如,让我们假设有一个以 HTML、XML 和普通文本格式打印站点统计的程序。输出格式在命令行中指定,或者保存在配置文件中。statsout 模块定义了三个函数: output_html 、 output_xml 和 output_text 。然后主程序定义了唯一的输出函数,如下: import statsoutdef output(data, format="text"): output_function = getattr(statsout, "output_%s" % format) return output_function(data) output 函数接收一个必备参数 data,和一个可选参数 format。如果没有指定 format 参数,其缺省值是 text 并完成普通文本输出函数的调用……

网友NO.409249

jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法

本文实例讲述了jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法。分享给大家供大家参考,具体如下: 先看如下代码: /** * 全选 */ function checkAll() { $("input[name=ids]").attr("checked", true); } /** * 全不选 */ function uncheckAll() { $("input[name=ids]").attr("checked", false); } 问题描述: 初始状态复选框没有全选,点击全选按钮调用checkAll方法,实现了全选,然后点击全不选按钮,实现了全不选,然后再次点击全选按钮,结果却木有全选,再反复点击木有任何反应。 解决方法: google之: 把使用prop方法代替attr方法, /** * 全选 */function checkAll() { $("input[name=ids]").prop("checked", true);} 至此问题解决! 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery form操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757