首页 > 代码库 > JQ属性和CSS
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()
和高相对
JQ属性和CSS