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


Posted in jQuery onMay 23, 2019

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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
jquery+php后台实现省市区联动功能示例
May 23 #jQuery
jQuery Migrate 插件用法实例详解
May 22 #jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 #jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 #jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 #jQuery
Vue项目中使用jquery的简单方法
May 16 #jQuery
JQuery常见节点操作实例分析
May 15 #jQuery
You might like
五个PHP程序员工具
2008/05/26 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
PHP缓冲区用法总结
2016/02/14 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
深入了解JS之作用域和闭包
2020/06/16 Javascript
iview实现图片上传功能
2020/06/29 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
PyTorch-GPU加速实例
2020/06/23 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
会计助理的岗位职责
2013/11/29 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
美术教学感言
2014/02/22 职场文书
经典商业广告词
2014/03/13 职场文书
质量提升方案
2014/06/16 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
财务会计实训报告
2014/11/05 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL