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序列化后的表单值转换成Json
Jun 16 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery实现简单评论区功能
Oct 26 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
Ajax PHP简单入门教程代码
2008/04/25 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
ExpressJS入门实例
2015/01/14 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
python实现文件的备份流程详解
2019/06/18 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
Structs界面控制层技术
2013/10/11 面试题
建筑工程自我鉴定
2013/10/18 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
公司授权委托书范本
2014/04/03 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
婚礼秀策划方案
2014/05/19 职场文书
党章培训心得体会
2014/09/04 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS