首页 > 代码库 > jQuery慢慢啃(三)
jQuery慢慢啃(三)
1.attr(name|properties|key,value|fn)设置或返回被选元素的属性值。
$("img").attr("src");//获取属性
$("img").attr({ src: "test.jpg", alt: "Test Image" });//设置多个属性
$("img").attr("src","test.jpg");//设置单个属性
$("img").attr("title", function() { return this.src });//设置title值为函数返回值
2.removeAttr(name)从每一个匹配的元素中删除一个属性
$("img").removeAttr("src");
3.prop(name|properties|key,value|fn)
$("input[type=‘checkbox‘]").prop("checked");//获取元素属性值
$("input[type=‘checkbox‘]").prop({disabled: true});//map设置元素属性值
$("input[type=‘checkbox‘]").prop("disabled", false);//设置元素属性值
$("input[type=‘checkbox‘]").prop("checked", function( i, val ) { return !val;});//此处i表示元素所在索引,val代表元素的属性值
.attr()和.prop()都不应该被用来取值/设值。使用.val()方法代替
.prop()方法应该被用来处理boolean attributes/properties以及在html(比如:window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。
4.removeProp(name)用来删除由.prop()方法设置的属性集
var $para = $("p"); $para.prop("luggageCode", 1234);
$para.removeProp("luggageCode");
5.addClass(class|fn)为每个匹配的元素添加指定的类名。
$("p").addClass("selected");//添加一个类
$("p").addClass("selected1 selected2");//添加2个类
$(‘ul li‘).addClass(function(index, class) {return ‘item-‘ + $(this).index();});// 对集合中的元素加上不同的类,其中函数第一个参数是索引,第二个参数是对应的原来的类名值
6.removeClass([class|fn])从所有匹配的元素中删除全部或者指定的类。
$("p").removeClass("selected");
$("p").removeClass();//删除所有类
$(‘li:last‘).removeClass(function() {return $(this).prev().attr(‘class‘);});//用函数删除
7.toggleClass(class|fn[,sw])如果存在(不存在)就删除(添加)一个类。
$("p").toggleClass("selected");//切换类
var count = 0;//根据点击次数切换类
$("p").click(function(){$(this).toggleClass("highlight", count++ % 3 == 0); });
$(‘div.foo‘).toggleClass(function() {//根据其他条件切换类名
if ($(this).parent().is(‘.bar‘)
{ return ‘happy‘; }
else { return ‘sad‘; }
});
8.html([val|fn])取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档
$(‘p‘).html();返回p元素的内容。
$("p").html("Hello <b>world</b>!");//设置所有 p 元素的内容
$("p").html(function(n){return "这个 p 元素的 index 是:" + n; });//使用函数来设置所有匹配元素的内容。
9.text([val|fn])取得所有匹配元素的内容。
$(‘p‘).text();//返回p元素的文本内容
$("p").text("Hello world!");//设置所有 p 元素的文本内容
$("p").text(function(n){return "这个 p 元素的 index 是:" + n; });//使用函数来设置所有匹配元素的文本内容。
10.val([val|fn|arr])获得匹配元素的当前值。
$("input").val();//获取文本框中的值
$("input").val("hello world!");//设定文本框的值
$(‘input:text.items‘).val(function() {return this.value + ‘ ‘ + this.className;});//设定文本框的值
<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="http://www.mamicode.com/check1"/> check1
<input type="checkbox" value="http://www.mamicode.com/check2"/> check2
<input type="radio" value="http://www.mamicode.com/radio1"/> radio1
<input type="radio" value="http://www.mamicode.com/radio2"/> radio2
执行:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
jQuery慢慢啃(三)