目录
1. 获取/设置 元素内容
2. 获取/设置 元素属性
3. 获取/设置 元素样式
4. 获取/设置 元素位置和大小
获取/设置 元素内容
获取/设置 元素中的文本内容（所有子孙元素的文本内容）
不能使用在表单元素
var text=$("#test").text() 所有
$("#test").text("Hello world!");
$("#test").text(function(i,oldText){
return "Old text: " + oldText + " New text: Hello world!
(index: " + i + ")";
});
获取/设置 元素中的内容（包括标签和文本内容）
不能使用在表单元素
$("#test").html() 第一个
$("#test").html("<b>Hello world!</b>")
$("#test").html(function(i,oldhtml){
return '<p>增加新的文本内容</p>' + oldhtml
})
获取/设置 表单输入值（用来读取表单元素的"value"值）
只能使用在表单元素
如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值
$("#test").val() 第一个
$("#test3").val("Dolly Duck");
兼容:
火狐不支持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, currentClass){
//找到类名中包含了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); 是否应该添加或删除
$("h1,h2,p").toggleClass( function(index, class, switch){});
$("h1,h2,p").toggleClass( function(index, class, switch){},true);
// ---------方式二---------
获取
$("p").css("background-color");
$("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"
})
浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
.css 和addClass的区别
1、可维护性：
.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。
css方法是通过JavaScript大量代码进行改变元素的样式
通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦
2、灵活性：
通过.css()方式可以很容易动态的去改变一个样式的属性，不需要在去繁琐的定义个class类的规则。一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过.css()方法处理的
3、样式值：
.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。
4、样式的优先级：
.css优先级（内联）要高于.addClass（内部、外部）
动态样式时使用.css,样式固定的使用.addClass
获取/设置 元素位置和大小
位置
x=$("p").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()
最近定位的祖先元素
$("p").offsetParent()
左移
$("div").scrollLeft(100);
上移
$("div").scrollTop(100);
当前偏移
x=$("p").offset();
网友评论