1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <title>jquery css事件编程  位置 操作</title>
  5.   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  6.   <style type="text/css">
  7.         div{position:absolute;width:100px;height:100px;left:100px;top:100px;border:1px solid red;}
  8.   </style>
  9.   <script  type="text/javascript" src="jquery-1.7.1.min.js"></script>
  10.   <script type="text/javascript">
  11.     /* 位置
  12.         offset()   //获取元素的所在位置，返回一个json对象，包含top和left两个属性
  13.         offset(coordinates) //设置位置要求参数是一个json对象，必须包含top和left属性
  14.     */
  15.         window.onload=function(){
  16.             $('#btnOk').click(function(){
  17.             /*  //获取元素所在位置
  18.                 var json=$('#div1').offset();
  19.                 alert(json.top+':'+json.left);
  20.                 */
  21.         //设置元素位置要求参数是一个json对象，必须包含top和left属性
  22.             $('#div1').offset({left:'200',top:'200;'});
  23.             });
  24.         };
  25.   </script>
  26.  </head>
  27.  <body>
  28.  
  29.     <div id="div1">test1</div>
  30.  
  31.  <input type="button" id='btnOk' value='确定'  />
  32.  </body>
  33. </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. 慎重管理SQL Server服务的登录（启动）账户和密码

    今天是大年初三,先跟大家拜个年,祝大家新年快乐.今天处理了一个alwaysOn问题——辅助副本因为磁盘空间不足一直显示[未同步——可疑],在日志中可以看到数据库处于挂起状态,与主副本失去同步.原以为只 ...

  2. Please Call Me NIO

    与其他语言相比,Java的IO功能显得异常复杂,各种流操作,通过程序员多次封装才可以达到操作文件的目的.自从jdk1.4之后,java提供了一个新的api完成IO操作,人称New IO(NIO),使用 ...

  3. Linux中grep搜索用法

    有测试文件test.txt一枚,内容如下 aaabbbcccAAADDDEEEabcsdfjasldjfbcdokmABC 一.基本搜索常用1.现在想把abc okm筛选出来 grep "a ...

  4. matlab 循环读入多个mat文件组合成一个mat文件

    今天做实验,需要到这个功能,在朋友的告知下,写了代码,在此留个标记 clc clear load('F:\效果对比\colorhist\1.mat'); a=ans; a=a'; : filename ...

  5. Math的三个将小数值舍入为整数方法

    舍入规则: Math.ceil():执行向上舍入,即它总是将数值向上舍入为最接近的整数: Math.floor():执行向下舍入,即它总是将数值向下舍入为最接近的整数: Math.round():执行 ...

  6. ASP.NET MVC5 网站开发实践(一) - 项目框架

    前几天算是开题了,关于怎么做自己想了很多,但毕竟没做过项目既不知道这些想法有无必要,也不知道能不能实现,不过邓爷爷说过"摸着石头过河"吧.这段时间看了一些博主的文章收获很大,特别是 ...

  7. MVC4做网站后台:栏目管理1、添加栏目-续

    栏目类型跟原来一样分为常规栏目.单页栏目和外部链接.根据栏目类型的不同要隐藏相应的表单和验证(服务器端验证).另外一个是父栏目必须是常规栏目才行,easyui-combotree要用到树形json数据 ...

  8. 外网访问原理分析 - 每天5分钟玩转 OpenStack（105）

    本节我们会将上节创建的 ext_net 连接到 router,并验证内外网的连通性. 更重要的,我们会分析隐藏在表象之下的原理. 将外网连接到 Neutron 的虚拟路由器,这样 instance 才 ...

  9. CSS兼容各浏览器的hack

    CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...

  10. html规范

    1 前言 HTML 作为描述网页结构的超文本标记语言,在百度一直有着广泛的应用.本文档的目标是使 HTML 代码风格保持一致,容易被理解和被维护. 2 代码风格 2.1 缩进与换行 [强制] 使用 4 ...