jQuery学习笔记：属性

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

Code
$(document).ready(function() {
    $("img").attr({ src: "images/test1.jpg", alt: "it is a img test " }); //为所有图像设置src和alt属性
    var src = $("img").attr("src"); //返回文档中第一个图像的src属性值
    alert(src);
});

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
//<p>Hello</p><p class="selected">Hello Again</p>
//toggleClass方法执行后结果：
//<p class="selected">Hello</p>, <p>Hello Again</p>
$(document).ready(function() {
$("p").toggleClass("selected");
});

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
    <div>
        <p></p>
        <br />
        <select id="single">
            <option>Single</option>
            <option>Single2</option>
        </select>
        <select id="multiple" multiple="multiple">
            <option selected="selected">Multiple</option>
            <option>Multiple2</option>
            <option selected="selected">Multiple3</option>
        </select>
    </div>

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
    <div>
        <select id="single">
            <option>Single</option>
            <option>Single2</option>
        </select>
        <select id="multiple" multiple="multiple">
            <option selected="selected">Multiple</option>
            <option>Multiple2</option>
            <option selected="selected">Multiple3</option>
        </select><br />
        <input type="checkBox" value="check1" />
        check1
        <input type="checkBox" value="check2" />
        check2
        <input type="radio" value="radio1" />
        radio1
        <input type="radio" value="radio2" />
        radio2
    </div>

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

jQuery学习笔记：属性

相关推荐