jquery 之 css 的 attr 和 prop

1.css样式赋值 （css方法是可以链式调用的）

字符串样式：

$('div').css('width','100px')

多样式兼容：

• 普遍写法 (options)

$('div').css({width:'100px',height:'100px'})

• 属性值 += / -= 的形式 （animate）

在原有基础上增减量

$('div')
    .css({width:'100px',height:'100px',background:'red'})
    .css({width:'+=100px'})

2.css样式取值

• 宽度取值：

$('div').css('width')  

• 背景颜色取值示例：

console.log( $('div').css('background') ) 打印结果如下图

3. jquery 之 attr

attr 是基于 setAttribute 和 getAttribute 封装的

取值：

$('div').attr('class') 取 class 类名的值
$('div').attr('tzh') 取自定义类名的值

-attr input 取值示例：

<!-- 只要有checked属性，无论值任意填写，都是被选中状态 -->
<input type="checkbox" checked='null'> 

console.log($('input').attr('checked')) //  只要有 checked 属性打印的都是 checked

赋值：

$('div').attr('id','demo') 设置 id 的值 demo 

• jquery 之 prop

prop 是基于 dom 操作的，只能操作特性的类名（class、id等），非特性不能操作 ( 例如自定义属性 )

取值：

$('div').prop('class') 

• prop input 取值示例：

	<!-- 只要有checked属性，无论值任意填写，都是被选中状态 -->
	<input type="checkbox" checked='null'> 

console.log($('input').prop('checked'))  //只要存在这个属性就打印 true .

赋值：
class类赋值：

$('input').prop('class','demo')

注意非特性：例如 $(‘div’).prop(‘tzh’,‘nihao’) 通过这种形式赋值，html页面不会显示的，但是通过浏览器控制台去执行 $(‘div’).prop(‘tzh’) 能够打印出 ‘nihao’