jQuery操作属性

最新推荐文章于 2024-06-19 19:53:31 发布

原创最新推荐文章于 2024-06-19 19:53:31 发布 · 605 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript

这篇博客详细介绍了jQuery中attr、prop、val、text和html等方法的使用，包括如何设置和获取属性，以及如何移除属性。特别强调了对于boolean类型属性如checked、selected应使用prop方法。此外，还提到了表单元素value属性的处理以及innerHTML和innerText的等价操作。

attr操作

设置单个属性

// 第一个参数：需要设置的属性名

// 第二个参数：对应的属性值

$obj.attr(name, value);

// 用法举例

$('img').attr('title','哎哟，不错哦');

$('img').attr('alt','哎哟，不错哦');

设置多个属性

// 参数是一个对象，包含了需要设置的属性名和属性值

$obj.attr(obj)

// 用法举例

$('img').attr({

   title:'哎哟，不错哦',

   alt:'哎哟，不错哦',

   style:'opacity:.5'

});

获取属性

// 传需要获取的属性名称，返回对应的属性值

$obj.attr(name)

// 用法举例

var oTitle = $('img').attr('title');

alert(oTitle);

移除属性

// 参数：需要移除的属性名，

$obj.removeAttr(name);

// 用法举例

$('img').removeAttr('title');

prop操作

在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。

// 设置属性

$(':checked').prop('checked',true);

// 获取属性

$(':checked').prop('checked');// 返回true或者false

val()/text/()html()

$obj.val() 获取或者设置表单元素的value属性的值

$obj.html() 对应innerHTML

$obj.text() 对应innerText/textContent，处理了浏览器的兼容性