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中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jquery插件实现图片悬浮
Apr 16 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
php工具型代码之印章抠图
2018/07/18 PHP
php创建类并调用的实例方法
2019/09/25 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
Vue中props的详解
2019/05/16 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
js实现随机点名
2021/01/19 Javascript
python类和函数中使用静态变量的方法
2015/05/09 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
python做反被爬保护的方法
2019/07/01 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
个人评价范文分享
2014/01/11 职场文书
社区综治工作汇报
2014/10/27 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书