jQuery学习笔记(4)-设置元素的属性和样式

一、前言

本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式

二、“DOM属性”与元素属性

1.运行一下代码

<img src="/images/logo_small.gif" class="img_logo" />

2.分析代码

元素属性src:/images/logo_small.gif

元素属性class:img_logo

DOM属性currentSrc:http://localhost/images/logo_small.gif

DOM属性className:img_logo

三、操作“DOM属性”

1.使用each函数来遍历jQuery包装集

<img src="/images/logo_small.gif" class="img_logo" />
<script>
$("img").each(function (index) {
alert("index:" + index + "|className:" + this.className + "|alt:" + this.alt);
this.alt = "图片";
alert("index:" + index + "|className:" + this.className + "|alt:" + this.alt);
});
</script>

2.each函数的说明

each( callback )  Returns: jQuery包装集

对包装集中的每一个元素执行callback方法,其中callback方法接收一个参数,表示当前遍历的索引值,从0开始

四、操作“元素属性”

1.在JavaScript中可以使用getAttribute和setAttribute来操作元素的“元素属性”

<img src="/images/logo_small.gif" class="img_logo" />
<script>
var img = document.getElementsByClassName("img_logo")[0];
alert(img.getAttribute("src"));
img.setAttribute("src", "http://www.cnblogs.com");
alert(img.getAttribute("src"));
</script>

2.jQuery中使用attr()包装集函数,操作包装集中所有元素的属性

$("img").attr("src"); 返回文档中第一个匹配图像的src属性值
$("img").attr({ src: "test.jpg", alt: "Kimisme" }); 所有图像设置src和alt属性
$("img").attr("src","test.jpg") 所有图像设置src属性
$("img").attr("title", function() { return this.src }); 所有匹配图像的src属性的值设置为title属性的值
$("img").removeAttr("src"); 将文档中图像的src属性删除

五、修改css样式

$("p").addClass("selected");

$("p").addClass("colorRed borderBlue");
为匹配的元素加上 'selected' 类

添加两个class
$("p").hasClass("selected") 判断包装集是否有class = selected
$("p").removeClass("selected");

$("p").removeClass();
从匹配的元素中删除 'selected' 类

移除所有class
$("p").toggleClass("selected"); 为匹配的元素切换 'selected' 类
var count = 0; $("p").click(function () { $(this).toggleClass("highlight", count++ % 3 == 0); }); 每三次点击切换高亮样式

六、设置常用属性

1.高和宽相关

$("p").height(); 获取第一个匹配的段落的高
$("p").height(20); 把所有段落的高设为 20px
$("p").width() 获取第一个匹配的段落的宽
$("p").width(20); 将所有段落的宽设为 20px
innerHeight( )  
innerWidth( )  
outerHeight( [margin] )  
outerWidth( [margin] )  

jQuery学习笔记(4)-设置元素的属性和样式

2.位置相关

var p = $("p");var offset = p.offset();console.log(offset.top+","+offset.left); 获取匹配元素在当前窗口的相对偏移(18,6)
var p = $("p");var position = p.position();console.log(position.top + "," + position.left); 获取匹配元素相对父元素的偏移(0,8)
var p = $("p");var scrollTop = p.scrollTop();console.log(scrollTop); 获取匹配元素相对滚动条顶部的偏移(0)
var p = $("p");var scrollTop = p.scrollTop(300); 设定垂直滚动条值
var p = $("p");var scrollLeft = p.scrollLeft();console.log(scrollLeft); 获取匹配元素相对滚动条左侧的偏移(0)
var p = $("p");var scrollLeft= p.scrollLeft(300); 设置相对滚动条左侧的偏移

七、参考文章

http://www.cnblogs.com/zhangziqiu/archive/2009/05/05/jQuery-Learn-4.html

上一篇:Unity3D ShaderLab压缩混合纹理贴图


下一篇:【jQuery】总结:筛选器、控制隐藏、操作元素style属性