jQuery 属性操作和样式函数

一、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)	方法返回元素的高度（包括内边距、边框和外边距）