【转】 jQuery学习笔记:属性
一、属性
1、attr(name)
取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。
返回值 Object
参数
name (String) : 属性名称
示例:
var src = $("img").attr("src"); //返回文档中第一个图像的src属性值
alert(src);
});
2、attr(properties)
将一个“名/值”形式的对象设置为所有匹配元素的属性。
这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。
或者你可以直接使用.addClass( class ) 和 .removeClass( class ).
返回值 jQuery
参数
properties (Map) : 作为属性的“名/值对”对象
示例:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
3、attr(key,value)
为所有匹配的元素设置一个属性值。
返回值 jQuery
参数
key (String) : 属性名称
value (Object) : 属性值
示例:
$("img").attr("src","/images/test1.jpg"); //为所有图像设置src和alt属性
});
4、attr(key,fn)
为所有匹配的元素设置一个计算的属性值。
不提供值,而是提供一个函数,由这个函数计算的值作为属性值。
返回值 jQuery
参数
key (String) : 属性名称
fn (Function) : 返回值的函数 范围:当前元素, 参数: 当前元素的索引值
示例:
$("img").attr("title", function() { return this.src; });
});
5、removeAttr(name)
从每一个匹配的元素中删除一个属性
返回值 jQuery
参数
name (String) : 要删除的属性名
示例:
$("img").removeAttr("src"); //将文档中图像的src属性删除
});
二、css类
1、addClass(class)
为每个匹配的元素添加指定的类名。
返回值 jQuery
参数
class (String) : 一个或多个要添加到元素中的CSS类名,请用空格分开
示例:
$(document).ready(function() {
$("p").addClass("selected highlight");
});
2、removeClass(class)
从所有匹配的元素中删除全部或者指定的类。
返回值 jQuery
参数
class (String) : (可选) 一个或多个要删除的CSS类名,请用空格分开
示例:
//从匹配的元素中删除 'selected' 类
$("p").removeClass("selected");
//删除匹配元素的所有类
$("div").removeClass("highlight");
});
3、toggleClass(class)
如果存在(不存在)就删除(添加)一个类。
返回值 jQuery
参数
class (String) :CSS类名
示例:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
4、toggleClass( class, switch )
如果开关switch参数为true则加上对应的class,否则就删除。
返回值 jQuery
参数
class (String) :要切换的CSS类名
switch (Boolean) :用于决定元素是否包含class的布尔值。
示例:
$("p").click(function() {
$(this).toggleClass("highlight", count++ % 3 == 0); //每点击三下加上一次 'selected' 类
});
三、html代码
1、html()
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
返回值 String
参数
id (String) : 用于搜索的,通过元素的 id 属性中给定的值
示例:
var oHtml = $("div").html();
alert(oHtml);
});
2、html(val)
设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
返回值 jQuery
参数
val (String) : 用于设定HTML内容的值
示例:
$("div").html("<p>Hello Again</p>");
alert($("div").html());
});
四、文本
1、text()
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
返回值 String
示例:
var oText = $("div").text();
alert(oText);
});
2、text(val)
设置所有匹配元素的文本内容
与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).
返回值 jQuery
参数
val (String) : 用于设置元素内容的文本
示例:
$("div").text("<b>Some</b> new text.");
var oText = $("div").text();
alert(oText);
});
五、值
1、val()
获得第一个匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。
返回值 String,Array
参数
id (String) : 用于搜索的,通过元素的 id 属性中给定的值
示例:
$(document).ready(function() {
$("p").append(
"<b>Single:</b> " + $("#single").val() +
" <b>Multiple:</b> " + $("#multiple").val().join(", ")
);
});
文档片段:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
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 的值
示例:
$(document).ready(function() {
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
});
文档片段:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
到这里,你是不是又对dom操作省心了不少?想起以前天怒人怨的dom笨拙的操作方式...呵呵,解放了,oh yeah。