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

最新推荐文章于 2024-03-12 11:38:47 发布

壁橱里的老王

最新推荐文章于 2024-03-12 11:38:47 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/Jessie_J_Wang/article/details/7359926

版权

Web 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

jQuery

23 篇文章 0 订阅

订阅专栏

DOM

16 篇文章 0 订阅

订阅专栏

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>

壁橱里的老王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔录4（jQuery学习笔记——DOM【2.CSS DOM】）

DOM操作分3个方面：DOM Core， HTML- DOM , CSS- DOMCSS-DOM简单来说就是读取和设置style对象的各种属性。在jQuery学习笔录3中已经说了一些关于CSS-DOM的事，今天接着说：offset() --获取元素在当前视窗的相对偏移，有2个属性，top、left：var offset=$('p').offset;var left=offset
复制链接

扫一扫