jq第三天(位置)

css(name|pro|[,val|fn])

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("p").css(
                    "color","red"
            
            );
        });
    });
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $(".ns").css(
                    { color:"red",background:"#2e6da4",width:"100px",height:"50px",}
                    //{color:"red",backgroundColor:"#2e6da4",width:"100px",height:"50px",}
                    //CSS中background-color使用-连接符的在css()里面首字母大写
            );
        });
    });
</script>


位置
offset([coordinates])

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
         /*   $("p").offset(function(n,c){
                newPos=new Object();
                newPos.left=c.left+100;
                newPos.top=c.top+100;alert(n);alert(c);alert(newPos.top);       关于js面向对象http://www.cnblogs.com/gaojun/archive/2013/10/24/3386552.html 
                return newPos;
            });*/
         $(".ns").offset({left:100})
            alert($(".ns").offset().top)

        });
    });
</script>

position()

获取匹配元素相对父元素的偏移。

返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

jQuery中position()与offset()区别

position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。

offset()始终返回相对于浏览器文档的距离，它会忽略外层元素。

下边看个简单的例子，这里外层的div元素(position:relative)仅一个：

<script type="text/javascript">
    $(document).ready(function(){
        var vposition = $("#inner").position();
        alert(vposition.left);   //输出：1
        alert(vposition.top);    //输出：2
        var voffset = $("#inner").offset();
        alert(voffset.left);   //输出：$("#outer").offset().left+1=9
        alert(voffset.top);    //输出：$("#outer").offset().top+2=10
    });
</script>
<style type="text/css">
    .nss{background-color: rgba(46, 80, 135, 0.13);width:100px; height:50px;}
</style>
<div id="outer" style="position:relative;left:0px;top:0px;background-color: #a2ff35;width:100px; height:50px;">
    <div id="inner" style="position:absolute;left:1px;top:2px;background-color: green;width:100px; height:50px;">
    </div>

</div>

scrollTop([val])

获取匹配元素相对滚动条顶部的偏移。

此方法对可见和隐藏元素均有效。

scrollLeft([val])

获取匹配元素相对滚动条左侧的偏移。

此方法对可见和隐藏元素均有效。

 

 

<script type="text/javascript">

    $(document).ready(function(){
        $(".btn1").click(function(){
            $("div").scrollTop(100);
        });
        $(".btn2").click(function(){
            alert($("div").scrollTop());
        });
        $(".btn3").click(function(){
            $("div").scrollLeft(100);
        });
        $(".btn4").click(function(){
            alert($("div").scrollLeft());
        });
    });
</script>
<style type="text/css">
    .nss{background-color: rgba(46, 80, 135, 0.13);width:100px; height:50px;}
</style>

<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
    The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
    The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
    The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
    The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
    The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div>
<button class="btn1">把 scroll top offset 设置为 100px</button>
<br />
<button class="btn2">获得 scroll top offset</button>
<br />
<button class="btn3">把 scroll top offset 设置为 100px</button>
<br />
<button class="btn4">获得 scroll top offset</button>