用jquery操作属性和类名

用jquery操作属性和类名
文章分类:Web前端
attr( name )

参数:* String

返回值:* Object

取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果第一个匹配元素没有这个属性，则返回“undefined”

实例

取得页面中第一个em元素的title属性

var title = $("em").attr("title");
$("div").text(title);

attr( properties )

参数: * Map

返回值: * jQuery

将一个“名/值”形式的对象设置为所有匹配元素的属性。 这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果需要设置一个类属性，则必须使用类名作为名，或使用addClass和removeClass来操作

实例

给img元素添加多项属性

$("img").attr({
        src: "/images/hat.gif",
        title: "jQuery",
        alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));

attr( key, value )

参数:
    * String
    * Object

返回值:
    * jQuery

为所有匹配的元素设置一个属性值

实例

禁用所有索引数大于0的按钮

$("button:gt(0)").attr("disabled","disabled");

attr( key, fn )

参数:
    * String
    * Function

返回值:
    * jQuery

为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。fn参数可以带有一个参数，此参数为当前元素在jQuery集合中的索引数，fn中的this指代这个元素

实例

针对div元素在页面中的位置来添加id属性值

$("div").attr("id", function (arr) {
        return "div-id" + arr;
}).each(function () {
        $("span", this).html("(ID = '<b>" + this.id + "</b>')");
});

removeAttr( name )

参数:* String

返回值:* jQuery

从每一个匹配的元素中删除一个属性

实例

点击按钮后使此按钮的下一个输入框可编辑

$("button").click(function () {
        $(this).next().removeAttr("disabled").focus().val("editable now");
    });

addClass( class )
参数:
    * String(一个或多个class名，多个class以空格分开)

返回值:
    * jQuery

为每个匹配的元素添加指定的类名

实例

给匹配的元素添加“selected”类

$("p:last").addClass("selected");

给匹配的元素添加“selected”和“highlight”类

$("p:last").addClass("selected highlight");

hasClass( class )
参数:
    * String
返回值:
    * Boolean

在匹配的元素集合中，如果至少有一个元素具有指定的class类，则返回true，否则返回false

实例
在匹配的元素集合中找出class属性值为“selected”的元素

$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());

removeClass( class )
参数:
    * String (可选)
返回值:
    * jQuery

从所有匹配的元素中删除全部或者指定的类，多个类名之间用空格分开。如果不指定类名，则删除全部的类

实例

从匹配的元素集合中删除“blue”类

$("p:even").removeClass("blue");

从匹配的元素集合中删除“blue”和“under”类

$("p:odd").removeClass("blue under");

从匹配的元素集合中删除所有类属性

$("p:eq(1)").removeClass();

toggleClass( class )

参数:
    * String

返回值:
    * jQuery

如果存在（不存在）就删除（添加）一个类(只支持单独的类名)

实例

点击时切换p元素的highlight类的有无

$("p").click(function () {
        $(this).toggleClass("highlight");
});

html( )
返回值:
    * String

取得第一个匹配元素的html内容(使用innerHTML方法)。这个函数不能用于XML文档(虽然可以用于XHTML文档)。

实例

点击一个段落，将它的HTML代码转化成内容显示

$("p").click(function () {
        var htmlStr = $(this).html();
        $(this).text(htmlStr);
});

html( val )
参数:
    * String

返回值:
    * jQuery

设置每一个匹配元素的html内容。这个函数不能用于XML文档(虽然可以用于XHTML文档)。

实例

将每一个div元素中的代码设置为指定的HTML代码

$("div").html("<span class='red'>Hello <b>Again</b></span>");

将每一个div元素中的代码设置为指定的HTML代码，然后再添加文本和style属性

$("div").html("<b>Wow!</b> Such excitement...");
$("div b").append(document.createTextNode("!!!")).css("color", "red");

text( )
返回值:
    * String

取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效

实例

取得第一段中的文本，将文本作为HTML代码添加到最后一段中

var str = $("p:first").text();
$("p:last").html(str);

text( val )

参数:

    * String

返回值:

    * jQuery

设置所有匹配元素的文本内容。这个函数与html()函数类似，但是将给定的<和>字符转义以HTML字符实体代替

实例

将段落中的文本设置为<b>Some</b> new text.

$("p").text("<b>Some</b> new text.");

val( )

返回值:

    * String, Array

获得第一个匹配元素的当前值。在jQuery1.2中，此方法对包括select在内的所有元素都有效。对于多选项(multiple select)，则返回一个数组。

实例

取得输入框的值

$("input").keyup(function () {
        var value = $(this).val();
        $("p").text(value);
}).keyup();

从单选项中取得一个值，从多选项中取得一个数组

function displayVals() {
        var singleValues = $("#single").val();
        var multipleValues = $("#multiple").val() || [];
        $("p").html("<b>Single:</b> " + singleValues + " <b>Multiple:</b> " +  multipleValues.join(", "));
}

$("select").change(displayVals);
displayVals();

val( val )

参数:

    * String

返回值:

    * jQuery

设置每一个匹配元素的值。在jQuery 1.2中，此方法也可以设置select元素的值，但是需要指定恰当的选项值。

实例

设置输入框的值

$("button").click(function () {
        var text = $(this).text();
        $("input").val(text);
});

val( val )

参数:

    * Array[String]

返回值:

    * jQuery

选择或设置所有的单选按钮、复选框和下拉列表为指定的val值

实例

设置单选按钮、多选菜单和选择框

$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);