jQuery
属性操作
1)属性2)CSS 类3)HTML代码/文本/值
1.属性
(1)attr(name|properties|key,value|fn)
设置或返回被选元素的属性值。 name:属性名称 properties:作为属性的“名/值对”对象 key,value:属性名称,属性值 key,function(index, attr): 1:属性名称。 2:返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。
(2)removeAttr(name)
从每一个匹配的元素中删除一个属性name:要删除的属性名.将文档中图像的src属性删除HTML 代码:jQuery 代码:$("img").removeAttr("src");结果:[ ]
(3)prop(name|properties|key,value|fn)
获取在匹配的元素集中的第一个元素的属性值。参数name 描述:选中复选框为true,没选中为falsejQuery 代码:$("input[type='checkbox']").prop("checked");参数properties 描述:禁用页面上的所有复选框。jQuery 代码:$("input[type='checkbox']").prop({ disabled: true});参数key,value 描述:禁用和选中所有页面上的复选框。jQuery 代码:$("input[type='checkbox']").prop("disabled", false);$("input[type='checkbox']").prop("checked", true);通过函数来设置所有页面上的复选框被选中。jQuery 代码:$("input[type='checkbox']").prop("checked", function( i, val ) { return !val;});
2.css类
(1)addClass(class|fn)
为每个匹配的元素添加指定的类名。给li加上不同的classHTML 代码:
- Hello
- Hello
- Hello
(2)removeClass([class|fn])
从所有匹配的元素中删除全部或者指定的类。从匹配的元素中删除 'selected' 类jQuery 代码:$("p").removeClass("selected");删除匹配元素的所有类jQuery 代码:$("p").removeClass();删除最后一个元素上与前面重复的classjQuery 代码:$('li:last').removeClass(function() { return $(this).prev().attr('class');});
(3)toggleClass(class|fn[,sw])
如果存在(不存在)就删除(添加)一个类。为匹配的元素切换 'selected' 类jQuery 代码:$("p").toggleClass("selected");每点击三下加上一次 'highlight' 类HTML 代码:jQuery 代码:jQuery 代码:var count = 0;$("p").click(function(){$(this).toggleClass("highlight", count++ % 3 == 0);});
3.HTML代码/文本/值
(1)html([val|fn])
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回p元素的内容。jQuery 代码:$('p').html();设置所有 p 元素的内容jQuery 代码:$("p").html("Hello world!");使用函数来设置所有匹配元素的内容。jQuery 代码:$("p").html(function(n){return "这个 p 元素的 index 是:" + n;});
(2)text([val|fn])
取得所有匹配元素的内容。返回p元素的文本内容。jQuery 代码:$('p').text();设置所有 p 元素的文本内容jQuery 代码:$("p").text("Hello world!");使用函数来设置所有匹配元素的文本内容。jQuery 代码:$("p").text(function(n){return "这个 p 元素的 index 是:" + n;});
(3)val([val|fn|arr])
获得匹配元素的当前值。设定一个select和一个多选的select的值HTML 代码: check1 check2 radio1 radio2jQuery 代码:$("#single").val("Single2");$("#multiple").val(["Multiple2", "Multiple3"]);$("input").val(["check2", "radio1"]);