JQ属性和CSS
1.attr(name|properties|key,value|fn)
设置或返回被选元素的属性值
$("img").attr("src");
返回文档中所有图像的src属性值
$("img").attr({ src: "test.jpg", alt: "Test Image" });
为所有图像设置src和alt属性
$("img").attr("src","test.jpg");
为所有图像设置src属性
$("img").attr("title", function() { return this.src });
把src属性的值设置为title属性的值
2.removeAttr(name)
从每一个匹配的元素中删除一个属性
$("img").removeAttr("src");
将文档中图像的src属性删除
3.prop(name|properties|key,value|fn)
获取在匹配的元素中的第一个元素的值
$("input[type='checkbox']").prop("checked");
选中复选框为true，没选中为false
$("input[type='checkbox']").prop({
disabled: true
});
禁用页面上的所有复选框。
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);
禁用和选中所有页面上的复选框
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
通过函数来设置所有页面上的复选框被选中。
4.renmoveProp(name)
用来删除由.prop()方法设置的属性集
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
设置一个段落数字属性，然后将其删除
5.addClass()
为每个匹配的元素添加指定的类名
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
为匹配的元素加上 'selected' 类
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
给li加上不同的class
6.removeClass()
从所有匹配的元素中删除全部或者指定的类。
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
删除最后一个元素上与前面重复的class
7.toggleClass()
如果存在（不存在）就删除（添加）一个类。
$("p").toggleClass("selected")
为匹配的元素切换 'selected' 类
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
每点击三下加上一次 'highlight' 类
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
根据父元素来设置class属性
8.html()
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
$('p').html();
返回p元素的内容
$("p").html("Hello <b>world</b>!");
设置所有 p 元素的内容
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});
使用函数来设置所有匹配元素的内容
9.text()
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
$('p').text();
返回p元素的文本内容
$("p").text("Hello world!");
设置所有 p 元素的文本内容
$("p").text(function(n){
return "这个 p 元素的 index 是：" + n;
});
使用函数来设置所有匹配元素的文本内容
10.value()
获得匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
$("input").val();
获取文本框中的值
$("input").val("hello world!");
设定文本框的值
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
设定文本框的值
<select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" value="check1"/> check1 <input type="checkbox" value="check2"/> check2 <input type="radio" value="radio1"/> radio1 <input type="radio" value="radio2"/> radio2
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
设定一个select和一个多选的select的值
CSS
1.css()
访问匹配元素的样式属性。
jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".
$("p").css("color");
取得第一个段落的color样式属性的值。
$("p").css({ "color": "#ff0011", "background": "blue" });
将所有段落的字体颜色设为红色并且背景为蓝色
$("p").css("color","red")
将所有段落字体设为红色
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
逐渐增加div的大小
2.offset
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
<p>Hello</p><p>2nd Paragraph</p>
$("p:last").offset({ top: 10, left: 30 });
获取第二段的偏移
3.positoon()
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
<p>Hello</p><p>2nd Paragraph</p>
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
结果
<p>Hello</p><p>left: 15, top: 15</p>
4.scrollTop()
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。
<p>Hello</p><p>2nd Paragraph</p>
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
<p>Hello</p><p>scrollTop: 0</p>
获取第一段相对滚动条顶部的偏移
$("div.demo").scrollTop(300);
设置相对滚动条顶部的偏移
5.scrollLeft()
获取匹配元素相对滚动条左侧的偏移。
此方法对可见和隐藏元素均有效。
$("div.demo").scrollLeft(300);
设置相对滚动条左侧的偏移
6.height()
取得匹配元素当前计算的高度值（px）。
在 jQuery 1.2 以后可以用来获取 window 和 document 的高
$("button").click(function(){
$("p").height(function(n,c){
return c+10;
});
});
以 10 像素的幅度增加 p 元素的高度
$("p").height(20)
把所有段落的高设为 20
7.width()
和高相对
8.innerHeight()
获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
此方法对可见和隐藏元素均有效。
<p>Hello</p><p>2nd Paragraph</p>
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
<p>Hello</p><p>innerHeight: 16</p>
获取第一段落内部区域高度
9.innerWidth()
和高相对
10.outHeight()
获取第一个匹配元素外部高度（默认包括补白和边框）。
此方法对可见和隐藏元素均有效。
<p>Hello</p><p>2nd Paragraph</p>
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>
获取第一段落外部高度。
11.ourWidth()
和高相对
