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插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
Python列表与元组的异同详解
2019/07/02 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
三下乡个人总结
2015/03/04 职场文书
世界名著读书笔记
2015/06/25 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers