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加密密码到cookie的实现代码
Apr 18 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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生成带有雪花背景的验证码
2008/09/28 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
validator验证控件使用代码
2010/11/23 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
Django框架models使用group by详解
2020/03/11 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
护士的岗位职责
2013/12/04 职场文书
工作时间上网检讨书
2014/02/03 职场文书
劳动竞赛口号
2014/06/16 职场文书
抗震救灾标语
2014/06/26 职场文书
通信工程求职信
2014/07/16 职场文书
技术入股合作协议书
2014/10/07 职场文书
机关保密工作承诺书
2015/05/04 职场文书
保护动物的宣传语
2015/07/13 职场文书
2019各种承诺书范文
2019/06/24 职场文书