JQuery基本属性介绍
1 attr(name|properties|key,value|fn)概述设置或返回被选元素的属性值。参数nameStringV1.0属性名称properties MapV1.0作为属性的“名/值对”对象key,value String,ObjectV1.0属性名称,属性值key,function(index, attr) String,FunctionV1.11:属性名称。2:返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。示例参数name 描述:返回文档中所有图像的src属性值。jQuery 代码:$("img").attr("src");参数properties 描述:为所有图像设置src和alt属性。jQuery 代码:$("img").attr( src: "test.jpg", alt: "Test Image" );参数key,value 描述:为所有图像设置src属性。jQuery 代码:$("img").attr("src","test.jpg");参数key,回调函数 描述:把src属性的值设置为title属性的值。jQuery 代码:$("img").attr("title", function() return this.src );2 removeAttr(name)概述从每一个匹配的元素中删除一个属性1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);1.7版本在IE6下已支持删除disabled。参数nameStringV1.0要删除的属性名示例描述:将文档中图像的src属性删除HTML 代码:<img src="test.jpg"/>jQuery 代码:$("img").removeAttr("src");结果: <img /> 3 prop(name|properties|key,value|fn)概述获取在匹配的元素集中的第一个元素的属性值。随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误参数name StringV1.6属性名称properties MapV1.6作为属性的“名/值对”对象key,value String,ObjectV1.6属性名称,属性值key,function(index, attr) String,FunctionV1.61:属性名称。2:返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。示例参数name 描述:选中复选框为true,没选中为falsejQuery 代码:$("inputtype='checkbox'").prop("checked");参数properties 描述:禁用页面上的所有复选框。jQuery 代码:$("inputtype='checkbox'").prop( disabled: true);参数key,value 描述:禁用和选中所有页面上的复选框。jQuery 代码:$("inputtype='checkbox'").prop("disabled", false);$("inputtype='checkbox'").prop("checked", true);参数key,回调函数 描述:通过函数来设置所有页面上的复选框被选中。jQuery 代码:$("inputtype='checkbox'").prop("checked", function( i, val ) return !val;);4 removeProp(name)概述用来删除由.prop()方法设置的属性集随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误参数propertyNameStringV1.6要删除的属性名示例描述:设置一个段落数字属性,然后将其删除。HTML 代码:<p> </p>jQuery 代码: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"), ". ");结果:The secret luggage code is: 1234. Now the secret luggage code is: undefined. 5 addClass(class|fn)概述为每个匹配的元素添加指定的类名。参数classStringV1.0一个或多个要添加到元素中的CSS类名,请用空格分开function(index, class)FunctionV1.4此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。示例参数class 描述:为匹配的元素加上 'selected' 类jQuery 代码:$("p").addClass("selected");$("p").addClass("selected1 selected2");回调函数 描述:给li加上不同的classHTML 代码:<ul> <li>Hello</li> <li>Hello</li> <li>Hello</li></ul>jQuery 代码:$('ul li:last').addClass(function() return 'item-' + $(this).index(););6 toggleClass(class|fn,sw)概述如果存在(不存在)就删除(添加)一个类。参数classStringV1.0CSS类名class,switchString,BooleanV1.31:要切换的CSS类名. 2:用于决定元素是否包含class的布尔值。switchBooleanV1.4用于决定元素是否包含class的布尔值。function(index, class,switch), switch Function,BooleanV1.41:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。2: 一个用来判断样式类添加还是移除的 boolean 值。 示例参数class 描述:为匹配的元素切换 'selected' 类jQuery 代码:$("p").toggleClass("selected");参数class,switch 描述:每点击三下加上一次 'highlight' 类HTML 代码:<strong>jQuery 代码:</strong>jQuery 代码: var count = 0; $("p").click(function() $(this).toggleClass("highlight", count+ % 3 = 0); );回调函数 描述:根据父元素来设置class属性jQuery 代码:$('div.foo').toggleClass(function() if ($(this).parent().is('.bar') return 'happy' else return 'sad' );7 html(val|fn)概述取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。参数valStringV1.0用于设定HTML内容的值function(index, html)FunctionV1.4此函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值。示例无参数 描述:返回p元素的内容。jQuery 代码:$('p').html();参数val 描述:设置所有 p 元素的内容jQuery 代码:$("p").html("Hello <b>world</b>!");回调函数描述:使用函数来设置所有匹配元素的内容。jQuery 代码:$("p").html(function(n) return "这个 p 元素的 index 是:" + n; );8 text(val|fn)概述取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。参数valStringV1.0用于设置元素内容的文本function(index, text)FunctionV1.4此函数返回一个字符串。接受两个参数,index为元素在集合中的索引位置,text为原先的text值。示例无参数 描述:返回p元素的文本内容。jQuery 代码:$('p').text();参数val 描述:设置所有 p 元素的文本内容jQuery 代码:$("p").text("Hello world!");回调函数 描述:使用函数来设置所有匹配元素的文本内容。jQuery 代码:$("p").text(function(n) return "这个 p 元素的 index 是:" + n; );9 返回值:String,Arrayval(val|fn|arr)概述获得匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。参数valStringV1.0要设置的值。function(index, value)FunctionV1.4此函数返回一个要设置的值。接受两个参数,index为元素在集合中的索引位置,text为原先的text值。arrayArray<String>V1.0用于 check/select 的值示例无参数 描述:获取文本框中的值jQuery 代码:$("input").val();参数