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

来源：互联网发布：linux系统启动命令编辑：程序博客网时间：2024/04/29 22:01

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").positionvar 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" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server">    <title>DOM 案例--鼠标滑动，图片放大</title>    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>    <style>    ul li    {        display:inline;     }    #tooltip    {        height:200px;        width:300px;    }    .positions    {        position:absolute;        top:30px;        left:40px;        width:30px;        height:40px;    }    </style></head><body>    <form id="form1" runat="server" >    <div id="divParent">     <ul>     <li><a href="../image/camera.jpg" class="tooltip" id="a1" title="sony"><img src="../image/camera.jpg" alt="sony" /></a></li>     <li><a href="../image/htc.jpg" class="tooltip" title="htc"><img src="../image/htc.jpg" alt="htc" /></a></li>     <li><a href="../image/iphone.jpg" class="tooltip" title="iphone"><img src="../image/iphone.jpg" alt="iphone"  /></a></li>     </ul>    </div>    </form></body></html><script>//jquery定义的方法$(function(e){var t=$("#a1");});$("a.tooltip").mouseover(function(e){        var title=this.title        //鼠标划上，显示title        //1创建一个div        var tooltip="<div id='tooltips'><img src='"+this.href+"' alt='产品预览'/>"+title+"</div>";//或者写死，this is 。。。你懂得        //2 将div 追加到页面文档上，怎么追加？        $("body").append(tooltip);         //3 设置div坐标，CSS         console.info("1")        $("#tooltips").addClass("positions").show("fast");         console.info("2")}).mouseout(function(){//鼠标划出，隐藏title        $("#tooltips").remove();})</script>

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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryCSS_DOM.aspx.cs" Inherits="jQueryDom_jQueryCSS_DOM" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title>DOM 案例--鼠标滑动，动态加div标签，CSS</title>    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>    <style>    ul li    {        display:inline;     }    </style></head><body>    <form id="form1" runat="server">    <div>     <a href="#" class="tooltip" title="this is a tip for me NO.1">TIPs</a>    </div>    </form></body></html><script>$("a.tooltip").mouseover(function(e){var x=100;var y=200;//鼠标划上，显示title//1创建一个div，title的内容写在里面,怎么建div？var tooltip="<div id='tooltip'>"+this.title+"</div>";//或者写死，this is 。。。你懂得//2 将div 追加到页面文档上，怎么追加？$("body").append(tooltip); //3 设置div坐标，CSS$("#tooltip").css({         "top":(e.pageY+y)+"px",        "left":(e.PageX+x)+"px"}).show("fast");}).mouseout(function(){//鼠标划出，隐藏title$("#tooltip").remove();})</script>