<!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. TCP状态

    TCP状态 TCP连接中包含不同的状态,如何通过状态来判断程序问题尤为重要. 三次握手 图中的connection部分为三次握手. 四次握手 图中的close部分为四次握手. CLOSE_WAIT 服 ...

  2. 用java开发微信公众号：测试公众号与本地测试环境搭建（一）

    本文为原创,原始地址为:http://www.cnblogs.com/fengzheng/p/5023678.html 俗话说,工欲善其事,必先利其器.要做微信公众号开发,两样东西不可少,那就是要有一 ...

  3. 初学者--bootstrap（一）----在路上（1）

    bootstrap: 是目前最受欢迎的前端框架,并基于HTML.CSS.JavaScript 等,而且他是为了适应并兼容各个电子设备,是对媒体查询的封装. 1.什么是媒体查询   他 是响应式布局的方 ...

  4. 外接程序“VMDebugger”未能加载或者导致了异常。是否希望移除该外接程序？

    收工~

  5. UITableView 一直显示滚动条(ScrollBar Indicators)、滚动条Width(宽度)、滚动条Color(颜色)

    在 IOS 中,对 UIScrollView 的滚动条(ScrollBar Indicators)的自定义设置接口,一直都是很少的.除了能自定义简单的样式(UIScrollViewIndicatorS ...

  6. eclipse build workspace太慢或者 js出错问题解决

    1.js文件错误解决办法 右键项目->properties->Builders(注:JavaScript Validator也会引起 build workspace太慢) 2.Eclips ...

  7. Huffman树进行编码和译码

    //编码#include<iostream> #include<cstdio> #include<cstring> #include<cstdlib> ...

  8. Java设计模式之模板模式（Template ）

    前言: 最近学习了Glide开源图片缓存框架,在学习到通过使用ModelLoader自定义数据源的时候,Glide巧妙的使用了Java的模板模式来对外暴露处理不同的Url数据源,今天来学习总结一下模板 ...

  9. 使用ikmv将jar转换为dll，在.NET中直接调用

    ikmv百科介绍 ikvm官网 使用ikvm前需要先安装java. ikvm的使用比较简单,到官网下载ikvm需要的组件,解压后在path中配置 %IKVM_HOME%\bin 在cmd中使用命令 i ...

  10. canvas学习笔记

    html5的新标签:canvas; 作用:标签定义图形,比如图表和其他图像:标签只是图形容器,您必须使用脚本来绘制图形.默认大小:宽300px,高150px; 背景知识:概念最初由苹果公司提出的,用于 ...