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

  <title>jquery css事件编程  位置 操作</title>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

  <style type="text/css">

        div{position:absolute;width:100px;height:100px;left:100px;top:100px;border:1px solid red;}

  </style>

  <script  type="text/javascript" src="jquery-1.7.1.min.js"></script>

  <script type="text/javascript">

    /* 位置

        offset()   //获取元素的所在位置，返回一个json对象，包含top和left两个属性

        offset(coordinates) //设置位置要求参数是一个json对象，必须包含top和left属性

    */

        window.onload=function(){

            $('#btnOk').click(function(){

            /*  //获取元素所在位置

                var json=$('#div1').offset();

                alert(json.top+':'+json.left);

                */

        //设置元素位置要求参数是一个json对象，必须包含top和left属性

            $('#div1').offset({left:'200',top:'200;'});

            });

        };

  </script>

 </head>

 <body>

    <div id="div1">test1</div>

 <input type="button" id='btnOk' value='确定'  />

 </body>

</html>

jquery css事件编程 位置 操作的更多相关文章

  1. jquery css事件编程 尺寸设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 深入学习jQuery元素尺寸和位置操作

    × 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...

  3. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  4. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  5. JQuery（选择器、事件、DOM操作）

    一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...

  6. jQuery css操作

    jQuery操作css的元素样式 1.访问匹配元素的样式属性 来个小案例: <div id="div" style="width:200px;height:200p ...

  7. jQuery入门基础（事件、DOM操作）

    http://www.w3school.com.cn/b.asp 一.事件 1.常规事件——把js事件前面的on去掉 比如:js:onclick——JQuery:click 下面是 jQuery 中事 ...

  8. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  9. jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

随机推荐

  1. [.net 面向对象程序设计进阶] (11) 序列化(Serialization)(三) 通过接口 IXmlSerializable 实现XML序列化 及 通用XML类

    [.net 面向对象程序设计进阶] (11) 序列化(Serialization)(三) 通过接口 IXmlSerializable 实现XML序列化 及 通用XML类 本节导读:本节主要介绍通过序列 ...

  2. MySQL 启动服务报错解决方案

    标签:ERROR! The server quit without updating PID file (/var/lib/mysql/localhost.localdomain.pid) 概述 文章 ...

  3. [ASP.NET MVC 小牛之路]15 - Model Binding

    Model Binding(模型绑定)是 MVC 框架根据 HTTP 请求数据创建 .NET 对象的一个过程.我们之前所有示例中传递给 Action 方法参数的对象都是在 Model Binding ...

  4. C语言 · 出现次数最多的数

    问题描述 编写一个程序,读入一组整数,这组整数是按照从小到大的顺序排列的,它们的个数N也是由用户输入的,最多不会超过20.然后程序将对这个数组进行统计,把出现次数最多的那个数组元素值打印出来.如果有两 ...

  5. Angular1还是Angular2

    Angular1还是Angular2 学完angular1,尝试去看了下angular2,虽然号称更强更快,可是这基于ES6和TypeScript的全新框架让人完全招架不住,而且我只是需要angula ...

  6. Birt报表存储过程多选参数的设置

    Birt对存储过程的操作是很简单的一行语句,只需要在Data Set中写上类似这样 {call CAMPAIGN_REAL_TIME_MONITOR(?,?)} 如下图 本报表是存在两个参数,一个允许 ...

  7. Qt Undo Framework Demo

    Qt Undo Framework Demo eryar@163.com Abstract. Qt’s Undo Framework is an implementation of the Comma ...

  8. Android studio每次启动卡在fetching Android sdk compoment information的解决方案

    网上有人给出了方案:1)进入刚安装的Android Studio目录下的bin目录.找到idea.properties文件,用文本编辑器打开.2)在idea.properties文件末尾添加一行: d ...

  9. js学习内容的整理

    1.jquery动态添加Table中的一行 function addTableRow(tableId){var html = '<tr>\ ......\ </tr>" ...

  10. 详解 ML2 Core Plugin（I） - 每天5分钟玩转 OpenStack（71）

    我们在 Neutron Server 小节学习到 Core Plugin,其功能是维护数据库中 network, subnet 和 port 的状态,并负责调用相应的 agent 在 network ...