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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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通过header实现文本文件下载的代码
2010/08/08 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
php strftime函数的详细用法
2018/06/21 PHP
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
javascript的BOM
2016/05/03 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
JS实现瀑布流布局
2017/10/21 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
合作协议书格式范本
2016/03/21 职场文书
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python