4，控制元素属性和样式

推荐的学习资源来自：张子秋http://www.cnblogs.com/zhangziqiu/tag/jQuery%e6%95%99%e7%a8%8b/

概要：

       学习jQuery控制元素的属性和样式。

内容：

       属性控制：

              $(“input”).each(function(){this.value=”按钮”;});

       操作元素属性：

              JavaScript中使用getAttribut和setAttribut。

              jQuery中使用：

                     attr(name):$(“img”).attr(“src”)返回第一个图的src

                     attr(properties):$(“img”).attr({src:”test.png”,alt:”testImage”});所有图像

                     attr(key,value):$(“img”).attr(“src”,”test.png”)所有

                     attr(key,fn):$(“img”).attr(“title”,function(){returnthis.src})

                     removeAttr(“src”):移除

 

 

       样式控制:

              css(name):$(“p”).css(“color”)返回第一段color的值

              css(properties):$(“p”).css({color:”#ff0011”,background:”blue”})所有

              css(name,value):$(“p”).css(“color”,”red”)

 

在编辑时候的属性和值不同于浏览器显示的页面和值。

        alert("attr(\"width\"):" + $("#testDiv").attr("width")); //undifined

        alert("css(\"width\"):" + $("#testDiv").css("width")); //auto(ie6) 或 1264px(ff)

        alert("width():" + $("#testDiv").width()); //正确的数值1264

        alert("style.width:" +  $("#testDiv")[0].style.width ); //空值

 

       所以jQuery提供一些方法获取常用属性：

              Width([val]):无参数为获取第一个的宽，有参时为对所有的设置

              Height([val])

              innerHeight()

              innerWidth()//为获取内部高和宽

              outerHeight([bool])

              outerWidth([bool])//获取第一个匹配的外部高和宽，true为包括边框

 

       位置控制：

              Offser():获取当前窗口的相对偏移

                            Varo=$(“p:last”).offset();

                            Vart=o.Top();var l=o.Left();

              Position()获取相对父元素的偏移

              scrollTop()

              scrollTop(val)//滚动条

              scrollLeft()

              scrollLeft(val)