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 UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现高级检索功能
May 28 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jQuery实现影院选座订座效果
Apr 13 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
js快速排序的实现代码
2013/12/08 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
python列表推导式操作解析
2019/11/26 Python
利用python实现逐步回归
2020/02/24 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
户籍证明的格式
2014/01/13 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
古诗之感恩老师
2019/10/24 职场文书
深入理解Pytorch微调torchvision模型
2021/11/11 Python