写作本篇文章的意义:jQuery的教程千千万,却没有英文版的API讲的系统、到位,一些话用中文翻译过来味道就变了,所以我将英文版的API的一些常用的方法单独提出来放在这里,并用自己的实践+理解陈述,在大家懒得查看官网的时候可以做为参考。
属性的作用的原文描述:These methods get and set DOM attributes of elements.即用来获取/设置DOM元素的属性的值;我们经常需要在页面中从元素中取值和设值,这些方法使用频次“非常高”!所以掌握它是成为牛逼工程师必须的基本功啦!
||| .addClass()
Description: Adds the specified class(es) to each element in the set of matched elements.
添加指定的类到匹配元素集合中的每一个元素。
1、.addClass(className)
类型:String
一个或多个类(用空格隔开)添加到匹配的元素的class属性。
2、.addClass(function)
类型:Function(Integer index , String currentClassName)==>String
一个函数返回一个或多个空格分隔的类名称添加到现有的类名(s)。 接收元素的索引位置的设置和现有的类名(s)作为参数。 在函数内this是指当前元素的集合。
3、examples:
①一次添加多个类:
$("p").addClass("myClass yourClass");
②切换元素的类从一个到另一个:
$("p").removeClass("myClass noClass").addClass("yourClass");
所有p段落中的myClass和noClass都被移除,yourClass则被加入到所有匹配的p元素中。
③接收一个function函数:
$("ul li").addClass(function( index ){ return "item-"+index; })
如果给定无序列表中的两个<li>元素,那么上面的函数的作用是将在第一个<li>中加入item-0类,第二个<li>中加入item-1类。
||| .attr()
Description:Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
获取匹配元素集合的属性的第一个元素的值,或者设置一个或多个属性给匹配的每个元素。
.attr(attributeName);//只获取匹配元素集合的第一个元素的属性值,想要获取多个值可以利用jQuery的.each()或.map()方法
.attr(attributeName,value);//设置值
①获取属性值:
<body> <input checked="checked" type="checkbox" /> <label for="check1" >check me</label> <script> $("input").change(function(){ var $input=$("input[id=‘check1‘]"); $("p").html("通过.attr(‘checked‘)获取checked的值:"+$input.attr("checked")+<br> "通过.prop(‘checked‘)获取checked的属性值:"+$input.prop("checked")+<br> "通过.is(‘:checked‘)获取checked的属性值:"+$input.is(":checked")+<br> } </script> </body> 结果: Check me .attr( ‘checked‘ ): checked//取值 .prop( ‘checked‘ ): true//判断 .is( ‘:checked‘ ): true//判断
上面针对checkbox的情况,相对比较特殊,.attr()是取得属性的值,.prop()在checked, selected, disabled三个DOM元素属性取值时,返回的结果是布尔型,其他情况下都是返回属性值。
示例:
<style> em { color: blue; font-weight: bold; } div { color: red; } </style> <script src="http://www.mamicode.com/https:/code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p> The title of the emphasis is:<div></div> <script> var title = $( "em" ).attr( "title" ); //var title=$("em").prop("title");与.attr()效果一样 $( "div" ).text( title ); </script>
当设置checkbox的选中情况时:
<body> <input type="checkbox" checked="checked"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox" checked="checked"> <script> $( "input[type=‘checkbox‘]" ).attr("checked",false); $("input[type=‘checkbox‘]").prop("checked",false);//与.attr()效果一样 </script> </body>
②设置属性值:
.attr(attributeName,value):这种方法设置属性值非常方便,,且看:
<img src="http://www.mamicode.com/1.jsp" alt="this is a photo" />
<script>
$("#greatPhoto").attr("alt","come form my world!");
</script>
设置多个属性值:
$( "#greatPhoto" ).attr({ alt: "Beijing Brush Seller", title: "photo by Kelly Clark" });
用函数来设置值: