您的位置：首页 > Web前端 > JQuery

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

2012-05-05 11:24 274 查看

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

相关文章推荐

新的分享

章节导航