[toc]
### jQuery CSS方法
1. 单个样式添加
```
$(function(){
$("div").css("width", "100px");
$("div").css("height", "100px");
$("div").css("background", "#ff0000");
})
```
2. 多个样式添加
```
$("div").css({
width: "100px",
height: "100px",
backgroundColor: "#00ff00"
})
```
3. `addClass()`、`removeClass()`、`toggleClass()`
### jQuery盒子模型
1. ` .width()`、`.height()`
为匹配的元素集合中获取第一个元素的当前计算宽度值或高度值,给每个匹配的元素设置宽度值或高度值;
![](https://box.kancloud.cn/8068b276f2d56da4ad832fb80122b989_350x239.png)
2. `.innerWidth()`、`.innerHeight()`
为匹配的元素集合中获取第一个元素的当前计算宽度值或高度值,包括padding,但是不包括border;
![](https://box.kancloud.cn/ba6670cc38dac823b8743e8a6aaaf7e8_337x217.png)
3. `.outerWidth()`、`.outerHeight()`
获取元素集合中第一个元素的当前计算宽度值或高度值,包括padding和border(注:返回一个整数(不包含“px”)表示的值,或如果在一个空集合上调用该方法,则会返回 null;
4. `.outerWidth(true)`、`.outerHeight(true)`
获取元素集合中第一个元素的当前计算宽度值或高度值,包括padding、border和margin(注:返回一个整数(不包含“px”)表示的值,或如果在一个空集合上调用该方法,则会返回 null)
![](https://box.kancloud.cn/4b33329043ca3abaa2f34dc5c307489c_325x244.png)
- H5笔记
- 1. Htm5与Html4的区别
- 2. Html5新增的主体结构元素
- 3. Html5新增的非主体结构元素
- 4. Html5表单新增元素与属性
- JavaScript笔记
- 1.函数
- 2. 异常处理和事件处理
- 3. DOM对象
- 4. 事件详解
- 5. 内置对象
- 6. DOM对象控制HTML元素详解
- 7. 浏览器对象
- 8. 面向对象详解
- jQuery笔记
- 1. jQuery简介和语法
- 2. jQuery选择器和事件
- 3. jQuery效果之隐藏与显示、淡入淡出、滑动、回调
- 4. jQuery HTML之捕获、设置、元素添加、元素删除
- 5. jQuery CSS操作及jQuery的盒子模型
- 6. jQuery之遍历与元素的过滤