jQuery学习笔记:属性

简介:

一、属性
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( " <p>Hello Again</p> " );
    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( " <b>Some</b> new text. " );
    
var  oText  =  $( " div " ).text();
    alert(oText);
});

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

复制代码
// 获得单个select的值和多选select的值。 
$(document).ready( function () {
    $(
" p " ).append(
  
" <b>Single:</b>  "   +  $( " #single " ).val()  +
  
"  <b>Multiple:</b>  "   +  $( " #multiple " ).val().join( " " )
);
});
复制代码

文档片段:

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,如需转载请自行联系原作者

目录
相关文章
|
7月前
|
JSON JavaScript 前端开发
jQuery$工具方法和CSS的属性经及方法
jQuery$工具方法和CSS的属性经及方法
42 0
|
7月前
|
JavaScript 前端开发 API
jQuery的attr()方法和JavaScript的属性操作
jQuery的attr()方法和JavaScript的属性操作
45 0
|
7月前
|
JavaScript 前端开发
Javascript知识【jQuery属性操作&案例:重写复选框操作】
Javascript知识【jQuery属性操作&案例:重写复选框操作】
|
8天前
|
缓存 JavaScript
|
10天前
|
JavaScript
jQuery中如何来获取和设置属性?
jQuery中如何来获取和设置属性?
|
10天前
|
存储 缓存 JavaScript
jQuery中获取和设置属性
jQuery中获取和设置属性
23 0
|
10天前
|
JavaScript 前端开发 API
JQuery的attr()属性和JS的属性的方法
JQuery的attr()属性和JS的属性的方法
11 0
|
10天前
|
JavaScript 前端开发
jquery的属性样式
jquery的属性样式
10 1
|
10天前
|
JavaScript
jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
22 2
|
7月前
|
JavaScript 前端开发
前端基础 -JQuery之 对属性的操作
前端基础 -JQuery之 对属性的操作
30 0