JQuery中使用CSS类操作class属性
css类中有addClass(class)、removeClass([class])、toggleClass(class)三个方法，分别例举实例说明下。
实例：addClass(class)
描述:为匹配的元素加上 'selected' 类
HTML 代码:
<p>Hello</p>jQuery 代码:
$("p").addClass("selected");
结果:
[ <p class="selected">Hello</p> ]
实例：addClass(function(index, class))
描述:给li加上不同的class
HTML 代码:
<ul><li>Hello</li><li>Hello</li><li>Hello</li></ul>
jQuery 代码:
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
解释：此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
实例：removeClass([class])
描述:从匹配的元素中删除 'selected' 类
HTML 代码:
<p class="selected first">Hello</p>
jQuery 代码:
$("p").removeClass("selected");
结果:
[ <p class="first">Hello</p> ]
实例：removeClass(function(index, class))
描述:删除最后一个元素上与前面重复的class
jQuery 代码:
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
实例：toggleClass(class)
描述:为匹配的元素切换 'selected' 类
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p>
jQuery 代码:
$("p").toggleClass("selected");
结果:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
JQuery利用CSS属性改变对象位置
利用css方法来获取和改变样式的值，offset()、position()、scrollTop()、scrollLeft()方法。
实例：offset()
描述:获取第二段的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
结果:
<p>Hello</p><p>left: 0, top: 35</p>
描述:获取第二段的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
$("p:last").offset({ top: 10, left: 30 });
实例：position()
描述:获取第一段的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</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>
注意：
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
实例：scrollTop()
描述:获取第一段相对滚动条顶部的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
结果:
<p>Hello</p><p>scrollTop: 0</p>
描述:设置相对滚动条顶部的偏移和向左的偏移
jQuery 代码:
$("div.demo").scrollTop(300);
$("div.demo").scrollLeft(300);
实例：scrollLeft()
描述:获取第一段相对滚动条左侧的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
结果:
<p>Hello</p><p>scrollLeft: 0</p>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
Jquery入门到精通(基础篇五)