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
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
如何使用jQuery操作Cookies方法解析
Sep 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
封装一个PDO数据库操作类代码
2009/09/09 PHP
php模板引擎技术简单实现
2016/03/15 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
详解python中的Turtle函数库
2018/11/19 Python
Python删除n行后的其他行方法
2019/01/28 Python
python实现文件的备份流程详解
2019/06/18 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
护理自我鉴定范文
2013/10/06 职场文书
成教毕业生自我鉴定
2013/10/23 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
党员干部承诺书范文
2014/03/25 职场文书
安全生产计划书
2014/05/04 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis