【前端】:jQuery下

前言: 接上一篇博客: 【前端】:jQuery上

 

一、jQuery属性操作

① attr（设置或返回自定义属性值）

input、select、textarea框中的内容, 可以通过attr来获取，但是如果你在input输入框中输入新的值，用attr是取不到input框新输入的值的!! 此时取到的仍是原来input框的文本内容(value). 请看下面的例子:

<input />

原本text框的内容是123，用attr()或val()都可以获取值，但当我将text框的内容改为12334时，用attr()取到的值仍是123!!! 此时要想到到新输入的值就必须用val()

② removeAttr（删除自定义属性）

<input  name=“James”/>

> $('#i1')
< [<input id=​"i1" type=​"button" value=​"开关" name=​"James">​]
> $('#i1').removeAttr('name')
< [<input id=​"i1" type=​"button" value=​"开关">​]

③ prop（专门用于checkbox，radio）

<input  />

④ removeProp（用来删除由.prop()方法设置的属性集）

<input  />

> $('input:checkbox').prop('disabled',true)
< [<input id=​"i1" type=​"checkbox" checked=​"checked" disabled>​]
> $('input:checkbox').removeProp('disabled')
< [<input id=​"i1" type=​"checkbox" checked=​"checked">​]

再讲一个点: prop（专门用于checkbox，radio）,为什么专用于checkbox,radio?? 我上网查了下，查到这句话: jquery老版本没有prop方法，有了prop方法后统一对checkbox，radio用prop方法，其他表单元素沿用用attr方法，对单复选按钮要用attr的话可能导致动态元素或者多次事件不生效(问题实例: 用attr设置checked属性  然后用remveoveAttr去掉checked 但是在火狐上发现代码虽然是显示checked 但是页面上也没显示选中)。

其实我是不信的，于是我在谷歌和360浏览器下测试，发现是没问题的(是jQuery版本对此升级??)

我也比较懒，没去下载火狐浏览器测试下哈哈~~ 具体可以看看这篇博客: radio、checkbox选中问题

 

二、jQuery CSS

1. CSS

① css（获取和设置匹配元素的样式属性）

<div>
    <span>And Again</span>
</div>

# 获取样式值
> $('span').css('color')
< "rgb(0, 0, 0)"

# 设置样式值
> $('span').css('color','red')
< [<span style=​"color:​ red;​">​And Again​</span>​]
> $('span').css({'color':'#dddddd','background':'blue'})
< [<span style=​"color:​ red;​">​And Again​</span>​]
> $('span')
< [<span style=​"color:​ rgb(221, 221, 221)​;​ background:​ blue;​">​And Again​</span>​]

View Code