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实现字体颜色渐变效果的方法
Mar 29 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery实现滑动开关效果
Aug 02 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来实现网络服务
2009/09/15 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
js获取form的方法
2015/05/06 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
小程序实现上下切换位置
2020/11/16 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
python模块常用用法实例详解
2019/10/17 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
python中reload重载实例用法
2020/12/15 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
计生专干事迹
2014/05/28 职场文书
爱护花草树木的标语
2014/06/11 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
葬礼主持词
2015/07/02 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS