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" %>

<!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>





你可能感兴趣的:(jquery)