jQuery的属性设置

在一个项目中,js代码起到重要作用,同时css代码也是一样。css代码是由很多标签组成,而标签本身并不是很多,但它们却可以组成很多你想象不到的布局,而改变它们的便是标签的特性。
一个标签可以代表是一个元素,也就是说每个元素都含有多个元素特性,这些特性也就是属性,用途就是用来给对应元素附加信息,那属性究竟是什么?属性是标签中例如class、id、style、src等存在于标签自身内的这些字符。在这些属性内设置属性值从而改变该元素的样式达到想要的结果。
js也能改变属性值,就比如说jQuery中的attr()和removeAttr()。
attr()可以更改属性值,而removeAttr()是移除属性值。attr()方法是jQuery中封装的方法,而在js中的DOM方法也有它,不过原生的操作比较麻烦,jQuery封装的方法可以更加便捷。
现在我们对于html布局一般都会采用一些插件的布局,这样省去了css代码,变得更加简洁,而设置的元素属性就是通过插件的内置属性。在原有布局上这些布局都是原有布局,而用js代码还可以让它改变样式。
在这里插入图片描述
上面是一个简单的bootstrap的布局,然后我们看到ContBox,它有很多个类名,attr()方法可以将这些属性都获取到:
在这里插入图片描述
像这样用attr()方法传入一个属性名(attr(属性名)),就可以直接获取到属性内的所有值,或许这样并不太好理解为什么要获取,那么换一个img图片,img标签是图片的标签,通过一个src路径获取到图片便可以显示出来,而获取这些路径往往都是很常见的,选择到这个img用一个attr获取到src里面的属性值便可以获取到这个图片的路径了。
在这里插入图片描述
如果不太直观那么输出一下这个获取,结果是可以获取的。
在这里插入图片描述
它自身含有的背景属性bg-success是一个绿色的背景,然后我们用attr来改变一下它的class属性。
在这里插入图片描述
理论上感觉是将背景换了一个颜色,可实际上并非如此,
在这里插入图片描述
这是原本的布局,当点击添加属性按钮的时候想实现的效果是将这个背景颜色改为自己设置的那个背景,然而并不理想:
在这里插入图片描述
结果背景确实是变成了红色,可是元素本身的属性却全都不见了,到这里就要进行反省了,attr()方法是干嘛用的?attr()是改变属性值的,改变一个属性值,在这里对于这个元素来说,class内所有的类名统一为class属性内的属性值,所以当选择到class改变属性值确实没错,但更改并不是一个类名,而是整个属性值,要改变它这里的背景,那么你就必须将它本身的其它类名加上去:
在这里插入图片描述
像这样其它类名不变,只改变一个背景,那么达到的效果就是你想要的效果,不过这样子就比较麻烦了:
在这里插入图片描述
在这里class内的所有对于attr来说只能看作是一个整体,它改变的也是一个整体,如果说改变一个src路径这样的属性就非常常用,而更改class的属性却不会用attr。
用attr()更改属性,同时也可以达到removeAttr()移除属性的效果,选择到指定的属性名,然后更改属性值为空便可以达到一个移除属性值的效果。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值