目录
1. 获取/设置 元素内容
2. 获取/设置 元素属性
3. 获取/设置 元素样式
4. 获取/设置 元素位置和大小
- 获取/设置 元素内容
.html 【不能使用在表单元素上】
获取集合中第一个匹配元素的HTML内容
$("#test").html()
设置每一个匹配元素的HTML内容（可以是 标签、文本）
内部使用的是DOM对象的innerHTML （替换原来的HTML内容）
$("#test").html("<b>Hello world!</b>")
$("#test").html(function(i,oldhtml){
return '<p>增加新的文本内容</p>' + oldhtml
})
.text 【不能使用在表单元素】
获取集合中所有匹配元素的文本内容（按顺序拼接在一起）（包括子孙元素）
var text=$("#test").text()
设置每一个匹配元素的文本内容 (去除原来的所有子孙元素)
$("#test").text("Hello world!");
$("#test").text(function(i,oldText){
return "Old text: " + oldText + " New text: Hello world!
(index: " + i + ")";
});
.val【只能使用在表单元素：input, select, textarea等】
获取匹配的元素集合中第一个元素的当前value值
如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值。当没有选择项被选中，它返回null。
$("#test").val()
设置每一个匹配表单元素的值
$("#test3").val("Dolly Duck");
$("#test3").val(function(i,oldValue){
return "Old value: " + oldValue + " New value: Hello world!
(index: " + i + ")";
});
兼容:
火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器。
- 获取/设置/移除 元素属性
类似DOM对象的getAttribute方法、setAttribute方法和removeAttribute方法
获取
$("#test").attr("href")
设置
$("#test").attr("href","http://www.w3school.com.cn/jquery");
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
移除
$("p").removeAttr("id");
- 获取/设置 元素样式
是否拥有该样式
$("p:first").hasClass("intro");
// ---------方式一（常用）---------
添加样式类
$("h1,h2,p").addClass("blue");
$("#div1").addClass("redStyle blueStyle");
$("#div1").addClass(function(index, className){
// index : 集合中每个元素的位置
// 找到元素样式类名中包含了hello的元素（对指定元素添加类型）
if(-1 !== className.indexOf('hello')){
//this指向匹配元素集合中的当前元素
$(this).addClass('redStyle blueStyle')
}
});
删除样式类
$("h1,h2,p").removeClass(); // 所有
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").removeClass(function(index,className){
//className = aa bb imoocClass
//把div的className赋给下一个兄弟元素div上作为它的class
$(this).next().addClass(className)
//删除自己本身的blue
return 'blue'
});
切换添加删除样式类 如果存在（不存在）就删除（添加）
$("h1,h2,p").toggleClass("blue");
$("#table tr:even").toggleClass("c", true); true添加,false删除
$("h1,h2,p").toggleClass( function(index, class, switch){});
$("h1,h2,p").toggleClass( function(index, class, switch){},true);
// ---------方式二---------
获取匹配元素集合中的第一个元素的样式属性的计算值
$("p").css("background-color"); // gb(135, 206, 250)
$("p").css("backgroundColor")
$("p").css(['width','height']); // 对象
设置所有
$("p").css({"background-color":"yellow","font-size":"200%"});
$("p").css("width",function(index,value){
//value带单位，先分解
value = value.split('px');
//返回一个新的值，在原有的值上，增加50px
return (Number(value[0]) + 50) + value[1];
})
$("p").css({
'font-size' :"15px",
"background-color" :"#40E0D0",
"border" :"1px solid red"
})
1. 支持驼峰写法与大小写混搭的写法，内部做了容错的处理
2. 浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
3. 当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50}) 与 .css("width","50px"})一样
.css 和addClass的区别
1、可维护性：
.addClass()可维护性更高。addClass()的本质是: 通过定义多个class类的样式规则，然后给元素添加/删除。
.css()的本质是: 通过JavaScript大量代码来改变元素的样式
2、样式的优先级：
.css优先级（内联）高于.addClass（内部、外部）
3、灵活性：
.css()更灵活。通过.css()方式可以很容易动态的去改变一个样式的属性，不需要在去繁琐的定义个class类的规则。一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过.css()方法处理的
4、样式值获取：
.addClass()不能获取到指定样式属性的值（只是增加、删除class类）
.css()可以获取到指定的样式值。
动态样式未知时使用.css,样式固定/切换时使用.addClass
- 获取/设置 元素位置和大小
位置
x=$("#div1").position();
x.left
x.top
获取/设置 元素的宽高（不包括内边距、边框或外边距）
$("#div1").width()
$("#div1").height()
获取/设置 元素的宽高（包括内边距，不包括边框、外边距）
$("#div1").innerWidth()
$("#div1").innerHeight()
获取/设置 元素的宽度/高度（包括内边距、边框、外边距）
$("#div1").outerHeight()
$("#div1").outerWidth()
$(document).width()、$(document).height()、$(window).width()、$(window).height()
最近定位的祖先元素
$("#div1").offsetParent()
左移
$("#div1").scrollLeft(100);
上移
$("#div1").scrollTop(100);
当前偏移
x=$("#div1").offset();
