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 11 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 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 分库分表hash算法
2009/11/12 PHP
PHP学习笔记之二
2011/01/17 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
详解python 发送邮件实例代码
2016/12/22 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
用pycharm开发django项目示例代码
2019/06/13 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
应届毕业生自我评价分享
2013/12/15 职场文书
《菜园里》教学反思
2014/04/17 职场文书
幸福家庭标语
2014/06/27 职场文书
IT工程师岗位职责
2014/07/04 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
自我管理的活动方案
2014/08/25 职场文书
讲党性心得体会
2014/09/03 职场文书
个人自查自纠材料
2014/10/14 职场文书
慰问信格式规范
2015/03/23 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python