jQuery属性与样式控制专题讲座.ppt

jQuery属性与样式控制 目录 属性 属性操作 类控制 内容的获取与更改 样式 CSS函数 位置 尺寸 属性的控制 属性操作 attr(name|properties|key,value|fn) 设置或返回被选元素的属性值。 例如： $(img).attr(src); 返回文档中第一个图像的src属性值。 例如：$(img).attr({ src: test.jpg, alt: Test Image }); 为所有图像设置src和alt属性。 removeAttr(name) 从每一个匹配的元素中删除一个属性 prop(name|properties|key,value|fn) 类似attr的用法 例如： $(img).attr(src); 返回文档中所有图像中的第一个图像的src属性值。 例如：$(img).attr({ src: test.jpg, alt: Test Image }); 为所有图像设置src和alt属性。 removeProp(name) 用来删除由.prop()方法设置的属性集 类控制 addClass(class|fn) 为每个匹配的元素添加指定的类名。一个或多个要添加到元素中的CSS类名，请用空格分开。 例如： $(p).addClass(selected1 selected2); removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。 toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类。 内容的获取与更改 html() 取得第一个匹配元素的html内容。 html(val|fn) 设置所有匹配元素的html内容。 text() 取得所有匹配元素包含的文本内容的组合。 text([val|fn]) 设置所有匹配元素的文本内容。 仅限于：block类型元素使用，如：div, p , h val() 获得匹配元素的当前值。 val([val|fn|arr]) 设置所有匹配元素的值。 仅限于：inline类型的元素使用，如：input 样式的控制 CSS函数 css(name|pro|[,val|fn]) 访问或设置匹配元素的样式属性。 例如：$(p).css(color); 获取color值 例如：$(p).css(color,red); 设置元素的字体颜色为红色 例如：$(p).css({ color: #ff0011, background: blue }); 例如：$(p).css({ width: function(index, value) { return parseFloat(value) * 1.2; }, height: function(index, value) { return parseFloat(value) * 1.2; } }); 位置 offset([coordinates]) $(#d2).offset() 获取匹配元素中的第一个元素在当前视口的相对偏移。 返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。 $(#d2).offset({left:300,top:20}); 设置匹配元素的相对偏移。 $(div).offset(function(i,oldPosition){ return {left:oldPosition.left+200,top:oldPosition.top} }); position() 获取匹配元素相对父元素的偏移。 位置 scrollTop([val]) 获取或设置匹配元素相对滚动条顶部的偏移。 scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移。 尺寸 width([val]) 取得第一个匹配元素当前计算的宽度值（px）， 或者设置所有匹配元素的宽度。 height([val]) 取得第一个匹配元素当前计算的高度值（px）， 或者设置所有匹配元素的高度。 例子：以 10 像素的幅度增加 p 元素的宽度 $(p).width(function(n,c){ return c+10; }); 尺寸 innerWidth([val]) 取得第一个匹配元素当前内部区域宽度值（包括补白、不包括边框）。或者设置所有匹配元素内部区域宽度。 innerWidth([val]) 取得第一个匹配元素当前内部区域高度值（包括补白、不包括边框）。或者设置所有匹配元素内部区域高度。