jQuery学习笔记：属性

刺骨的言语ヽ痛彻心扉 2022-02-02 07:45 268阅读 0赞

一、**属性**  
1、**attr(name)**  
取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。  
返回值 Object  
参数   
name (String) : 属性名称  
示例：

$(document).ready( function () \{  
 var  src  =  $( " img " ).attr( " src " );  // 返回文档中第一个图像的src属性值   
  alert(src);  
\});

2、**attr(properties)**  
将一个“名/值”形式的对象设置为所有匹配元素的属性。  
这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。  
或者你可以直接使用.addClass( class ) 和 .removeClass( class ).  
返回值 jQuery  
参数   
properties (Map) : 作为属性的“名/值对”对象  
示例：

![ContractedBlock.gif][] Code

3、**attr(key,value)**  
为所有匹配的元素设置一个属性值。  
返回值 jQuery  
参数   
key (String) : 属性名称  
value (Object) : 属性值  
示例：

$(document).ready( function () \{  
$( " img " ).attr( " src " , " /images/test1.jpg " );  // 为所有图像设置src和alt属性   
 \});

4、**attr(key,fn)**  
为所有匹配的元素设置一个计算的属性值。  
不提供值，而是提供一个函数，由这个函数计算的值作为属性值。  
返回值 jQuery  
参数   
key (String) : 属性名称  
fn (Function) : 返回值的函数 范围:当前元素, 参数: 当前元素的索引值  
示例：

$(document).ready( function () \{  
$( " img " ).attr( " title " ,  function () \{  return  this .src; \});  
\});

5、**removeAttr(name)**  
从每一个匹配的元素中删除一个属性  
返回值 jQuery  
参数   
name (String) : 要删除的属性名  
示例：

$(document).ready( function () \{  
$( " img " ).removeAttr( " src " );  // 将文档中图像的src属性删除    
 \});

二、**css类**  
1、**addClass(class)**  
为每个匹配的元素添加指定的类名。  
返回值 jQuery  
参数   
class (String) : 一个或多个要添加到元素中的CSS类名，请用空格分开  
示例：

// 为匹配的元素加上 'selected highlight'两个类    
 $(document).ready( function () \{  
$( " p " ).addClass( " selected highlight " );  
\});

2、**removeClass(class)**  
从所有匹配的元素中删除全部或者指定的类。  
返回值 jQuery  
参数   
class (String) : (可选) 一个或多个要删除的CSS类名，请用空格分开  
示例：

$(document).ready( function () \{  
 // 从匹配的元素中删除 'selected' 类   
  $( " p " ).removeClass( " selected " );  
 // 删除匹配元素的所有类   
  $( " div " ).removeClass( " highlight " );  
\});

3、**toggleClass(class)**  
如果存在（不存在）就删除（添加）一个类。  
返回值 jQuery  
参数   
class (String) :CSS类名  
示例：

![ContractedBlock.gif][] Code

4、**toggleClass( class, switch )**  
如果开关switch参数为true则加上对应的class，否则就删除。  
返回值 jQuery  
参数   
class (String) :要切换的CSS类名  
switch (Boolean) :用于决定元素是否包含class的布尔值。  
示例：

var  count  =  0 ;  
$( " p " ).click( function () \{  
$( this ).toggleClass( " highlight " , count \++  %  3  ==  0 );  // 每点击三下加上一次 'selected' 类    
  \});

三、**html代码**  
1、**html()**  
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。  
返回值 String  
参数   
id (String) : 用于搜索的，通过元素的 id 属性中给定的值  
示例：

$(document).ready( function () \{  
 var  oHtml  =  $( " div " ).html();  
alert(oHtml);  
\});

2、**html(val)**  
设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。  
返回值 jQuery  
参数   
val (String) : 用于设定HTML内容的值  
示例：

$(document).ready( function () \{ 
$( " div " ).html( " Hello Again " ); 
alert($( " div " ).html()); 
\});

四、**文本**  
1、**text()**  
取得所有匹配元素的内容。  
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。  
返回值 String  
示例：

$(document).ready( function () \{  
 var  oText  =  $( " div " ).text();  
alert(oText);  
\});

2、**text(val)** 
设置所有匹配元素的文本内容 
与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体). 
返回值 jQuery 
参数 
val (String) : 用于设置元素内容的文本 
示例：

$(document).ready( function () \{ 
$( " div " ).text( " Some new text. " ); 
 var oText = $( " div " ).text(); 
alert(oText); 
\});

五、**值**  
1、**val()**  
获得第一个匹配元素的当前值。  
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。  
返回值 String,Array  
参数   
id (String) : 用于搜索的，通过元素的 id 属性中给定的值  
示例：

![复制代码][copycode.gif]

// 获得单个select的值和多选select的值。 
 $(document).ready( function () \{ 
$( " p " ).append( 
 " Single: " \+ $( " \#single " ).val() \+ 
 " Multiple: " \+ $( " \#multiple " ).val().join( " , " ) 
); 
\});

![复制代码][copycode.gif]

文档片段：

![ContractedBlock.gif][] Code

2、**val(val)**  
设置每一个匹配元素的值。  
在 jQuery 1.2, 这也可以为select元件赋值  
返回值 jQuery  
参数   
val (String) : 要设置的值。  
示例：

// 设定文本框的值    
 $(document).ready( function () \{  
$( " input " ).val( " hello world! " );  
 var  oValue  =  $( " input " ).val();  
alert(oValue);  
\});

3、**val(val)** 
check,select,radio等都能使用为之赋值 
返回值 jQuery 
参数 
val (Array<String>) : 用于 check/select 的值 
示例：

// 设定一个select和一个多选的select的值    
 $(document).ready( function () \{  
$( " \#single " ).val( " Single2 " );  
$( " \#multiple " ).val(\[ " Multiple2 " ,  " Multiple3 " \]);  
$( " input " ).val(\[ " check2 " ,  " radio1 " \]);  
\});

文档片段：

![ContractedBlock.gif][] Code

到这里，你是不是又对dom操作省心了不少？想起以前天怒人怨的dom笨拙的操作方式...呵呵，解放了，oh yeah。

本文转自JeffWong博客园博客，原文链接：http://www.cnblogs.com/jeffwongishandsome/archive/2009/08/08/1541202.html，如需转载请自行联系原作者

[ContractedBlock.gif]: /images/20220202/2ef955e138484db2b4cca088b8f0d9cf.png
[copycode.gif]: /images/20220202/0aa5f1202e8941c595d1fef571f76086.png