现在的位置: 首页 > 综合 > 正文

jQuery学习笔记:属性

2012年06月25日 ⁄ 综合 ⁄ 共 4775字 ⁄ 字号 评论关闭

一、属性
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) : 作为属性的“名/值对”对象
示例:

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类名
示例:

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("")
);
});

文档片段:

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"]);
});

文档片段:

Code

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

抱歉!评论已关闭.