jQery获取属性
1. 属性
方法 | 描述 |
---|---|
attr() | 设置或返回被选元素的属性值 |
removeAttr() | 要删除的属性名 |
prop() | 获取在匹配的元素集中的第一个元素的属性值。 |
removeProp() | 用来删除由.prop()方法设置的属性集 |
代码“小栗子”
//attr()
$("img").attr("src");//返回文档中所有图像的src属性值。
$("img").attr({ src: "test.jpg", alt: "Test Image" });//为所有图像设置src和alt属性。
$("img").attr("src","test.jpg");//为所有图像设置src属性。
$("img").attr("title", function() { return this.src });//把src属性的值设置为title属性的值。
//removeAttr()
$("img").removeAttr("src");//将文档中图像的src属性删除
//prop()
$("input[type='checkbox']").prop("checked");//选中复选框为true,没选中为false
$("input[type='checkbox']").prop({disabled: true});//禁用页面上的所有复选框。
$("input[type='checkbox']").prop("disabled", false);//禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("checked", true);
$("input[type='checkbox']").prop("checked", function( i, val ) {return !val;});//通过函数来设置所有页面上的复选框被选中
//removeProp()
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
//设置一个段落数字属性,然后将其删除。
2. css类
方法 | 描述 |
---|---|
addClass() | 为每个匹配的元素添加指定的类名 |
removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
toggleClass() | 如果存在(不存在)就删除(添加)一个类。 |
代码“小栗子”
//addClass()
$("p").addClass("selected");//为匹配的元素加上 'selected' 类
$("p").addClass("selected1 selected2");
$('ul li:last').addClass(function() { return 'item-' + $(this).index();});//给li加上不同的class
//removeClass()
$("p").removeClass("selected");//从匹配的元素中删除 'selected' 类
$("p").removeClass();//删除匹配元素的所有类
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});//删除最后一个元素上与前面重复的class
//toggleClass()
$("p").toggleClass("selected");//为匹配的元素切换 'selected' 类
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});//每点击三下加上一次 'highlight' 类
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});//根据父元素来设置class属性
3. HTML代码/文本/值
方法 | 描述 |
---|---|
html() | 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 |
text() | 取得所有匹配元素的内容。 |
val() | 获得匹配元素的当前值。 |
代码“小栗子”
//html()
$('p').html();//返回p元素的内容。
$("p").html("Hello <b>world</b>!");//设置所有 p 元素的内容
$("p").html(function(n){
return "这个 p 元素的 index 是:" + n;
});//使用函数来设置所有匹配元素的内容。
//text()
$('p').text();//返回p元素的文本内容。
$("p").text("Hello world!");//设置所有 p 元素的文本内容
$("p").text(function(n){
return "这个 p 元素的 index 是:" + n;
});//使用函数来设置所有匹配元素的文本内容。
//val()
$("input").val();//获取文本框中的值
$("input").val("hello world!");//设定文本框的值
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});//设定文本框的值
$("#single").val("Single2");//设定一个select和一个多选的select的值
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);