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 23 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
php按单词截取字符串的方法
2015/04/07 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
浅谈Python3中print函数的换行
2020/08/05 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
生产主管岗位职责
2013/11/10 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
卖房协议书样本
2014/10/30 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript