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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 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版)
2012/08/21 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
繁简字转换功能
2006/07/19 Javascript
javascript 常用关键字列表集合
2007/12/04 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
python模块之re正则表达式详解
2017/02/03 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python的debug实用工具 pdb详解
2019/07/12 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
社区党支部承诺书
2015/04/29 职场文书
校车安全管理责任书
2015/05/11 职场文书
指导教师推荐意见
2015/06/05 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js