一、jQuery 属性操作方法
用于获得或设置元素的DOM属性
方法 | 描述 |
addClass() | 向匹配的元素添加指定的类名。 |
attr() | 设置或返回匹配元素的属性和值。 |
hasClass() | 检查匹配的元素是否拥有指定的类。 |
html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
removeAttr() | 从所有匹配的元素中移除指定的属性。 |
removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
toggleClass() | 从匹配的元素中添加或删除一个类。 |
val() | 设置或返回匹配元素的值。 |
1. arrt() 方法
定义和用法
attr() 方法设置或返回被选元素的属性值。
根据该方法不同的参数，其工作方式也有所差异。
返回属性值
返回被选元素的属性值。
语法
$(selector).attr(attribute)attribute —— 规定要获取其值的属性。
设置属性/值
设置被选元素的属性和值。
语法
$(selector).attr(attribute,value)attribute —— 规定属性的名称。
value —— 规定属性的值。
使用函数来设置属性/值
设置被选元素的属性和值。
语法
$(selector).attr(attribute,function(index,oldvalue))attribute —— 规定属性的名称。
function(index,oldvalue) —— 规定返回属性值的函数。该函数可接收并使用选择器的 index 值和当前属性值。
设置多个属性/值对
为被选元素设置一个以上的属性和值。
语法
$(selector).attr({attribute:value, attribute:value ...})attribute:value —— 规定一个或多个属性/值对。
2. removeAttr() 方法
- 定义和用法 removeAttr() 方法从被选元素中移除属性。 语法
$(selector).removeAttr(attribute) attribute —— 必需。规定从指定元素中移除的属性。
实例:
从任何 p 元素中移除 id 属性：
$("button").click(function(){
$("p").removeAttr("id");
});3. val() 方法
定义和用法
- val() 方法返回或设置被选元素的值。
- 元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
- 如果该方法未设置参数，则返回被选元素的当前值。 语法
$(selector).val(value)value —— 可选。规定被选元素的新内容。
返回 Value 属性
返回第一个匹配元素的 value 属性的值。
语法
$(selector).val()设置 Value 属性的值
$(selector).val(value)value —— 设置 Value 属性的值。
使用函数设置 Value 属性的值
$(selector).val(function(index,oldvalue)) function(index,oldvalue) —— 规定返回要设置的值的函数。
index —— 可选。接受选择器的 index 位置。
oldvalue —— 可选。接受选择器的当前 Value 属性。
4. html() 方法
定义和用法
- html() 方法返回或设置被选元素的内容 (inner HTML)。
- 如果该方法未设置参数，则返回被选元素的当前内容。
返回元素内容
当使用该方法返回一个值时，它会返回第一个匹配元素的内容。
语法
$(selector).html()设置元素内容
当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。
语法
$(selector).html(content)content —— 可选。规定被选元素的新内容。该参数可包含 HTML 标签。
使用函数来设置元素内容
使用函数来设置所有匹配元素的内容。
语法
$(selector).html(function(index,oldcontent))function(index,oldcontent) —— 规定一个返回被选元素的新内容的函数。
index —— 可选。接收选择器的 index 位置。
oldcontent —— 可选。接收选择器的当前内容。
其它方法
1. addClass() 方法
$(selector).addClass(class)
使用函数来添加类
$(selector).addClass(function(index,oldclass))2. hasClass() 方法
$(selector).hasClass(class)3. toggleClass() 方法
$(selector).toggleClass(class,switch)
使用函数来切换类
$(selector).toggleClass(function(index,class),switch)jQuery 样式函数
1. 设置/移除 Class属性
addClass(value)
removeClass(value)
toggleClass(value)2. 获取/设置 样式属性
css(name)
css(name, value)3.获取/设置 高度
height()
height(val)4.获取/设置 宽度
width()
width(val)5. 其它样式函数
方法 | 描述 |
innerWidth() | 方法返回元素的宽度（包括内边距） |
innerHeight() | 方法返回元素的高度（包括内边距） |
outerWidth() | 方法返回元素的宽度（包括内边距和边框） |
outerHeight() | 方法返回元素的高度（包括内边距和边框） |
outerWidth(true) | 方法返回元素的宽度（包括内边距、边框和外边距） |
outerHeight(true) | 方法返回元素的高度（包括内边距、边框和外边距） |
