首页 > 代码库 > jQuery 属性+CSS
jQuery 属性+CSS
一、属性
1.attr(name|properties|key,value|fn)(设置或返回被选元素的属性值)
$("img").attr("src") //获取属性值$("img").attr("src","mumu.png") //数字属性值$("img").attr({src:"mumu.png",alt:"无法加载"}) //修改多个属性值
2.removeAttr(name)(从每一个匹配的元素中删除一个属性)
Html代码：
<img src="mumu.png">
jQuery 代码：
$("img").removeAttr("src")结果：
<img>
3.prop(name|properties|key,value|fn)(获取在匹配的元素集中的第一个元素的属性值)
jQuery 代码：
$("input[type=‘checkbox‘]").prop("checked")
4.removePrope(name)(用来删除由.prop()方法设置的属性集)
Html代码：
jQuery 代码：
结果：
5.addClass(class|fn)(为每个匹配的元素添加指定的类名)
Html代码：
<p>mumu</p>
jQuery 代码：
$("p").addClass("selected")结果：
<p class="selected">mumu</p>
6.removeClass([class|fn])(从所有匹配的元素中删除全部或者指定的类。)
$("p").removeClass("selected") //删除一个class$("p").removeClass() //删除所有的class$(‘li:last‘).removeClass(function() {return $(this).prev().attr(‘class‘); }); //回调函数
7.toggleClass(class|fn[,sw])(如果存在（不存在）就删除（添加）一个类)
$("p").toggleClass("selected")//回调函数：根据父元素来设置class属性$("div.foo").toggleClass(funtion(){if($(this).parent().is(‘.bar‘)){return ‘happy‘;}else{return ‘sad‘;}});
8.html([val|fn])(取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档)
$("p").html() //返回p元素的内容$("p").html("mumu") //设置p元素的内容$("p").html(funtion(){retun "这个p元素的index是："+n;}) //回调函数
9.rext([val|fn])(取得所有匹配元素的内容)
$("p").text() //返回p元素的文本内容$("p").text("mumulan") //设置p元素的文本内容$("p").text(function(n){return "这个 p 元素的 index 是：" + n;}); //回调函数
10.val([val|fn|arr])(获得匹配元素的当前值)
$("input").val() //获取文本框的值$("input").val("mumu") //设置文本框的值$(‘input:text.items‘).val(function() {return this.value + ‘ ‘ + this.className;}); //回调函数
二、CSS
1.css(name|pro|[,val|fn])(访问匹配元素的样式属性)
$("p").css("color") //获取p元素的color样式属性的值$("p").css("color","red") //设置p元素color样式属性的值为red$(p).css(color:"#f00",background:"#ff0") //多个设置
//参数name，回调函数：逐渐增加div的大小
$("div").click(function() { $(this).css({ width: function(index, value) { return parseFloat(value) * 1.2; }, height: function(index, value) { return parseFloat(value) * 1.2; } });
});
2.jQuery.cssHooks(直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性)
(详情查看jQuery API)
3.offset([coordinates])(获取匹配元素在当前视口的相对偏移)
无参数：获取第二段的偏移
Html代码：
<p>mumu</p><p>2nd bigbang</p>
jQuery 代码：
var p = $("p:last");var offset = p.offset();p.html("left:"+offset.left+",rop:"+offset.top)
结果：
<p>Hello</p><p>left: 0, top: 35</p>
参数coordinates:设置第二段的偏移
Html代码：
<p>mumu</p><p>2nd bigbang</p>
jQuery 代码：
$("p:last").offset({top:10,lest:30})
4.position()(获取匹配元素相对父元素的偏移)
Html代码：
<p>mumu</p><p>2nd bigbang</p>
jQuery 代码：
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>
5.scrollTop([val])(获取匹配元素相对滚动条顶部的偏移)
无参数：获取第一段相对滚动条顶部的偏移
Html代码：
<p>mumu</p><p>2nd bigbang</p>
jQuery 代码：
var p = $("p:first");$("p:last").html("scrollTop:"+p.scrollTop());
结果：
<p>Hello</p><p>scrollTop: 0</p>
参数val：设置相对滚动条顶部的偏移
jQuery 代码：
$("div.demo").scrollTop(300);
6.scrollLeft([varl])(获取匹配元素相对滚动条左侧的偏移)
无参数：获取第一段相对滚动条左侧的偏移
Html代码：
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码：
var p = $("p:first");$("p:last").html("scrollLeft:"+p.scrollLeft())结果：
<p>Hello</p><p>scrollLeft: 0</p>
参数val:设置相对滚动条左侧的偏移
jQuery 代码：
$("div.demo").scrollLeft(300)
7.height([val|fn])(取得匹配元素当前计算的高度值（px）)
无参数：获取第一段的高
jQuery 代码：
$("p").height();参数val:把所有段落的高设为 20:
jQuery 代码：
$("p").height(20)
参数function(index,heghti):以 10 像素的幅度增加 p 元素的高度
jQuery 代码：
$("button").click(function(){ $("p").hetght(function(n,c){ Return c+10; });});
8.width([val|fn])(取得第一个匹配元素当前计算的宽度值（px）)
无参数：获取第一段的高
jQuery 代码：
$("p").width();参数val:把所有段落的高设为 20:
jQuery 代码：
$("p").width(20)参数function(index,heghti):以 10 像素的幅度增加 p 元素的高度
jQuery 代码：
$("button").click(function(){ $("p").width(function(n,c){ Return c+10; });});
9.innerHeight()(获取第一个匹配元素内部区域高度（包括补白、不包括边框）)
获取第一段落内部区域高度。
Html代码：
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码：
var p = $("p:first");$("p:last").text( "innerHeight:" + p.innerHeight() );
结果：
<p>Hello</p><p>innerHeight: 16</p>
10.innerWidht()(获取第一个匹配元素内部区域宽度（包括补白、不包括边框）)
获取第一段落内部区域宽度。
Html代码：
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码：
var p = $("p:first");$("p:last").text( "innerWidth:" + p.innerWidth() );
结果：
<p>Hello</p><p>innerWidth: 40</p>
11.outerHeight([options])(获取第一个匹配元素外部高度（默认包括补白和边框）)
(设置为 true 时，计算边距在内。)
获取第一段落外部高度
Html代码：
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码：
var p = $("p:first");$("p:last").text("outerHeight:"+p.outerHeight+",outerHeight(true)"+outerHeight(true));
结果：
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>
12.outerWidth([options])(获取第一个匹配元素外部宽度（默认包括补白和边框）)
(设置为 true 时，计算边距在内)
获取第一段落外部高度
Html代码：
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码：
var p = $("p:first");$("p:last").text("outerWidth:"+p.outerWidth+",outerWidth(true)"+outerWidth(true));
结果：
<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>
jQuery 属性+CSS