jQuery操作attr、prop、val()/text()/html()、class属性

 更新时间:2019年05月23日 15:19:06   作者:行走的阳光  
这篇文章主要介绍了jQuery操作attr、prop、val()/text()/html()、class属性 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

1.1 arr操作

  设置单个属性

// 第一个参数:需要设置的属性名
// 第二个参数:对应的属性值
// $obj.attr(name, value);
// 用法举例、
$('img').attr('alt','不错哦');

  获取属性

// 传需要获取的属性名称,返回对应的属性值
// $obj.attr(name)
// 用法举例
var oTitle = $('img').attr('title');
alert(oTitle);

  移除属性

// 参数:需要移除的属性名,
// $obj.removeAttr(name);
// 用法举例
$('img').removeAttr('title');

2.prop操作

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

// 设置属性
$(':checked').prop('checked',true);
// 获取属性
$(':checked').prop('checked');// 返回true或者false

3.val()/text()/html()值操作

$obj.val()    获取或者设置表单元素的value属性的值
$obj.html()   对应innerHTML
$obj.text()    对应innerText

以上三个方法:不传参数 表示获取值; 传递一个参数值,表示设置

4.class操作

    添加样式类

// name:需要添加的样式类名,注意参数不要带点.
// $obj.addClass(name);
// 例子,给所有的div添加one的样式。
$('div').addClass('one');

    移除样式类

// name:需要移除的样式类名
// $obj.removeClass('name');
// 例子,移除div中one的样式类名
$('div').removeClass('one');

    判断是否有某个样式类

// name:用于判断的样式类名,返回值为true false
// $obj.hasClass(name)
// 例子,判断第一个div是否有one的样式类
$('div').hasClass('one');

    切换样式类

// name:需要切换的样式类名,如果有,移除该样式,如果没有,添加该样式。
// $obj.toggleClass(name);
// 例子
$('div').toggleClass('one');

5.隐式迭代(批量操作自动遍历)

    1.设置操作的时候(绑定事件),如果是多个元素,那么给所有的元素设置相同的值。

    2.获取操作的时候,如果是多个元素,那么只会返回第一个元素的值。

    3.如果想要获取多个值,需要手动进行遍历操作 

总结

以上所述是小编给大家介绍的jQuery操作attr、prop、val()/text()/html()、class属性,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • jQuery实现下滑菜单导航效果代码

    jQuery实现下滑菜单导航效果代码

    这篇文章主要介绍了jQuery实现下滑菜单导航效果代码,通过jquery操作鼠标事件及页面样式动态操作实现下滑菜单导航功能,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • jquery单击事件和双击事件冲突解决方案

    jquery单击事件和双击事件冲突解决方案

    这篇文章主要为大家分享了jquery单击和双击事件冲突解决方案,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jquery实现简单实用的轮播器

    jquery实现简单实用的轮播器

    这篇文章主要为大家详细介绍了jquery实现简单实用的轮播器制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 基于JQuery的日期联动实现代码

    基于JQuery的日期联动实现代码

    基于JQuery的日期联动实现代码,需要的朋友可以参考下。
    2011-02-02
  • jqueryMobile使用示例分享

    jqueryMobile使用示例分享

    这里是本人学习jQuery Mobile的过程,现在将学习过程中的实例一一展现出来,希望能帮到更多的新手。本系列中实例都经过了本人的亲自测试。
    2016-01-01
  • jquery属性,遍历,HTML操作方法详解

    jquery属性,遍历,HTML操作方法详解

    下面小编就为大家带来一篇jquery属性,遍历,HTML操作方法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JQuery自适应窗口大小导航菜单附源码下载

    JQuery自适应窗口大小导航菜单附源码下载

    本文给大家分享jquery自适应窗口大小导航菜单,也是一款响应式的导航菜单,有深色样式、浅色样式、自定义样式,接下来,需要的学习的小伙伴参考此文吧
    2015-09-09
  • 基于jquery实现页面滚动时顶部导航显示隐藏

    基于jquery实现页面滚动时顶部导航显示隐藏

    这篇文章主要介绍了基于jquery实现页面滚动时顶部导航显示隐藏效果,当页面向下滚动的时候,导航菜单动态隐藏,页面滚动到顶部时,导航菜单动态显示,淘宝也采用过此效果,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery编程中的一些核心方法简介

    jQuery编程中的一些核心方法简介

    这篇文章主要介绍了jQuery编程中的一些核心方法,jQuery是当下人气最高的JavaScript库,需要的朋友可以参考下
    2015-08-08
  • jQuery使用hide方法隐藏指定元素class样式用法实例

    jQuery使用hide方法隐藏指定元素class样式用法实例

    这篇文章主要介绍了jQuery使用hide方法隐藏指定元素class样式,实例分析了jQuery中hide隐藏class样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03

最新评论