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插件制作 自增长输入框实现代码
Aug 17 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 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
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
php 使用array函数实现分页
2015/02/13 PHP
smarty中常用方法实例总结
2015/08/07 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
Javascript里使用Dom操作Xml
2006/09/20 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
详解Python中的array数组模块相关使用
2016/07/05 Python
python函数的5种参数详解
2017/02/24 Python
Python标准库sched模块使用指南
2017/07/06 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
中专毕业生自我鉴定
2013/11/21 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
技术员个人工作总结
2015/03/03 职场文书
Python预测分词的实现
2021/06/18 Python