jquery学习笔记-jQuery *** 纵DOM元素属性 attr()和removeAtrr()方法

jquery学习笔记-jQuery *** 纵DOM元素属性 attr()和removeAtrr()方法,第1张

概述jQuery中 *** 纵元素属性的方法: jquery中 *** 纵元素属性的方法:  attr(): 读或写匹配元素的属性值.removeAttr(): 从匹配的元素中移除指定的属性.  attr()方法 读 *** 作attr()读 *** 作. 读取的是匹配元素中第1个元素的指定属性值.  格式: .attr(attributename),返回值类型:String.读取不存在的属性会返回undefined.   注意选择器的选择结果多是1个集合,这里仅仅获得的是集合中第1个元素的该属性值.  看例子:

<!DOCTYPE HTML><HTMLhead> script type="text/JavaScript" src="/jquery/jquery.Js"></script="text/JavaScript"> $(document).ready(function () { $("button).click( () { alert($(p).attr(Title));//获得属性 this code can only get the first element's attribute. }); }); </bodyp Title="Title1">paragraph 1p="Title2">paragraph 2br/>button>get Title>

  运行结果:d框显示: Title1.   想要分别获得每个元素的属性,需要使用jquery的循环结构,比如.each().map()方法.  上面的例子可以改成:

<script type="text/JavaScript"> $(document).ready(function () { $("button").click(function () { //get attribute for every element in selection. $("p").each(function () { alert($(this).attr("Title")); }); }); });</script>

@H_419_234@  便可分别获得每一个元素的属性.

 attr()方法 写 *** 作attr()写 *** 作. 为匹配元素的1个或多个属性赋值.  1般格式: .attr(attributename,value),即为属性设置value.  返回值类型:jquery.也即支持链式方法调用.  履行写 *** 作的时候,0)">如果指定的属性名不存在,将会增加1个该名字的属性,即增加自定义属性,其名为属性名,其值为value值.  写属性是为匹配集合中的每个元素都进行 *** 作的,见例子:(){ $(#button1(){ $(,Hello World); }); }); input ="button" ID="button1" value="button1"input>This is a paragraph.div>This is a div.>This is another paragraph.>This is another div.  点击按钮以后所有的p都加上了Title="Hello World”的属性.  写 *** 作还有以下两种格式:  .attr(attributes)  下面分别介绍.
.attr(attributes):  这里attributes类型是PlainObject,可以用于1次性设置多个属性.  甚么是PlainObject呢,简单理解就是大括号包围的键值对序列.可以参考问后链接说明.键和值之间用冒号(:)分隔,每一个键值对之间用逗号(,)分隔.
  注意: 设置多个属性值时,属性名的引号是可选的(可以有,也能够没有).但是class属性是个例外,必须加上引号.  例子: () { $(); }); $(#button2div).attr({: some Title for divhelloWorld}); }); }); ="button2"="button2"  点击两个按钮以后,元素变成:

  其中<div>的hello是1个新增的自定义属性,其value为World..attr(attributename,function(index,oldValue)):
  使用1个function来设置属性值.function的第1个参数是index,第2个参数是该属性之前的值.style>div {color: blue;}span redb Font-weight bolder}$(document).ready( () {$().attr(ID (index,oldAttr) {if (oldAttr) {return div-ID" + index oldAttr;} else { index;}}).each(spanthis).HTML((ID = '<b>+ .ID + </b>'));});});>div ID="someID">Zero-th span>First >Second >

@H_419_234@  上面的例子,对应的页面结果以下:

  当使用1个方法来设定属性值的时候,如果这个set的function没有返回值,或返回了undefined,当前的值是不会被改变的.  即 *** 作会被疏忽.  还是上面的例子,attr()其中的function返回undefined:  以下:function () { $("div").attr("ID",function (index,oldAttr) { return undefined; }).each(function () { $("span",255); line-height:1.5!important">this).HTML("(ID = '<b>" + this.ID + "</b>')"); }); });</script>

   返回的页面效果以下:

  即没有进行任何修改 *** 作,还是保持原来的属性值.  注意:jquery不能修改<input>和<button>的type属性,如果修改会在阅读器报错.  这是由于IE阅读器中不能修改type属性.removeAttr()方法  移除匹配元素集合中每个元素的指定属性.removeAttr()方法调用的是JavaScript的removeAttribute()方法,但是它能用jquery对象直接调用,并且它斟酌到并处理了各个阅读器上的属性名称可能不统1的问题.input[type=button]).removeAttr(); }); }); 总结

以上是内存溢出为你收集整理的jquery学习笔记-jQuery *** 纵DOM元素属性 attr()和removeAtrr()方法全部内容,希望文章能够帮你解决jquery学习笔记-jQuery *** 纵DOM元素属性 attr()和removeAtrr()方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1018227.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存