jQuery学习笔录4（jQuery学习笔记——DOM【2.CSS DOM】）

DOM操作分3个方面：DOM Core， HTML- DOM , CSS- DOM

CSS-DOM简单来说 就是读取和设置style对象的各种属性。

在jQuery学习笔录3中已经说了一些关于CSS-DOM的事，今天接着说：

offset() --获取元素在当前视窗的相对偏移，有2个属性，top、left：

var offset=$('p').offset;
var left=offset.left;
var top=offset.top;
console.log(left)

position()--获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点的相对偏移。有2个属性top、left：

var position=$("p").position
var left=position.left

scrollTop() 和 scrollLeft()--获取元素的滚动条距顶端的距离和距左侧的距离。

var $p=$("p");
var scrollTop=$p.scrollTop();
console.info(scrollTop)

$("p").scrollTop(300)//设置滚动条到距顶端300的位置 

下面是2个案例

鼠标滑到图片上，图片高度上抬高：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryCSS_DOM.aspx.cs" Inherits="jQueryDom_jQueryCSS_DOM" %>





    
    
    


    

    

     

     

     

     

     
    
    

鼠标滑到链接，出现tips，和上面的例子差不多：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryCSS_DOM.aspx.cs" Inherits="jQueryDom_jQueryCSS_DOM" %>





    
    
    


    

    

     TIPs