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