jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。...一、滚动条有关属性的正确理解: 假设有以下Html代码: div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;..."> div style="height:750px;"> div> div> 由于内部的div标签高度比外部的长,并且外部的div允许自动出现垂直滚动条,所以用浏览器打开后... jquery-1.10.2.js"> IE 和 FF 下测试通过div> div> 代码解说: 内部div高度为750,外部div
(本文年代久远,请谨慎阅读)今天学习了JQuery的一些基本用法,包括JQuery选择器和JQuery包装集; 从现在开始,要慎重区分DOM对象和JQuery对象,两种对象的方法不同,属性不同,在使用中要特别注意...包装集:$(arrDiv[i]).html(‘div’+i);//arrDivp[i]是DOM对象,直接用$()转为JQuery对象后调用html方法; JQUERY包装集转DOM对象 通过索引访问到的...JQUERY包装集中的单个元素是DOM对象 通过包装集的某些遍历函数,例如each中传递的遍历函数中的this也是DOM元素1234var arrDiv = $('div');for( var i =...包装集 在此介绍一些基本的JQuery包装集及使用 ready()方法 在使用JQUERY时,当 DOM(文档对象模型) 已经加载完成时,就会发生 ready 事件。...对象,然后用对象的appendTo方法追加到testDiv这个被选元素的结尾,这个被选元素即某个控件, 如一个div块或者一个文本框,效果是在此控件后显示一个下拉框; 其他一些常用的操作JQUERY包装集的函数
text/html; charset=ISO-8859-1"> Insert title here jquery.../script> username: div...display: none;"> password: div
html: div id="open_close" style="display: none...;">hellodiv> jquery: function show(){ if($("#open_close").css("display") == "none"){ $("#open_close
现在有多行div,共用一个删除事件,点击删除的时候,会把页面所有的div全都删掉了,但是我只需要点击哪一行div里面的删除按钮,就删除哪一行,其实很简单,只需要写一个this事件即可。...cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> jquery.../2.1.1/jquery.min.js"> div id="stoparea"> div style="margin-bottom...> div> div> // 删除按钮事件 $(".editdelete
在某些需求中,你需要点击按钮显示某个div,并隐藏已经显示的按钮。同时点击另外一个按钮,又会隐藏已经显示的,并显示已经影藏的。
现在有多行div,共用一个删除事件,点击删除的时候,会把页面所有的div全都删掉了,但是我只需要点击哪一行div里面的删除按钮,就删除哪一行,其实很简单,只需要写一个this事件即可。 ?...cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> jquery.../2.1.1/jquery.min.js"> div id="stoparea"> div style="margin-bottom...> div> div> // 删除按钮事件 $(".editdelete
/* 网上找了资料都是对于event.clientX和offset().left进行了计算,但是去掉了这个计算方式,直接使用当前坐标也一样,效果都一样不太好 strHeader:标题 jquery定位字符串...strForm:窗体 jquery定位字符串 */ var isMove = false; //var x = 0; //var y = 0; //var offx = 0; //var offy =
html 代码: div id="exPara" style="display:none"> 22222222 div> jquery 代码
这是一个很简单的功能,jquery实现下拉框选中对应的div。 虽然简单但是会在项目之中经常会用到,尤其是统计的时候,按照不同类型或者不同的年月日来选择相对应的内容。 jquery实现下拉框选中对应的...div jquery.com/jquery-1.8.0.min.js"> div id="div1">111div> div id="div2" style="display:none;">222div> div id="div3"...style="display:none;">333div> div id="div4" style="display:none;">44444div> div id=
很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小时间不断的切换图标状态(箭头向里面,或者箭头向外面... jquery.com.../jquery-1.8.0.min.js"> #scale { background: #FFFFFF...400px; height: 200px } div...id="scale" style="">div> div id="updmap"> div> <script
这是一个很简单的功能,jquery实现下拉框选中对应的div。 虽然简单但是会在项目之中经常会用到,尤其是统计的时候,按照不同类型或者不同的年月日来选择相对应的内容。 ? jquery实现下拉框选中对应的...div jquery.com/jquery-1.8.0.min.js"> div id="div1">111div> div id="div2" style="display:none;">222div> div id="div3"...style="display:none;">333div> div id="div4" style="display:none;">44444div> div id=
摘要:本文简单介绍jquery判断一个div的边界是否超出另外一个div的边界,如果超出边界做出相应的处理。 1、实现效果 ? 判断前 ?...判断后 2、实现思路 实现类似的判断,主要是获取两个div在浏览器中的上下左右的四至,在jquery中,可以通过div.offset().left和div.offset().top获取div在浏览器中的绝对位置的...如下代码供参考: var div1 = $("#div1"),div2 = $("#div2"); var div1Width = div1.width(...div2.offset().top, div1Right = div1Left+div1Width, div2Right...= div2Left+div2Width, div1Bottom = div1Top+div1Height, div2Bottom
原生Js与jQuery显示隐藏div的几种方法 简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一 首先是进行js演示和讲解。...id="d">lalaladiv> 111 div>didididiv...从性能角度分析:第一种方式性能更高,用div.style.display="none"隐藏会引起,div里面的东西休眠,里面的事件就不响应了。 jQuery 使用jQuery的话就会更加的便捷了。...div 通过css方法设置 $(“#id”).css(“display”,“none”);//隐藏div $(“#id”).css(“display”,“block”);//显示div 通过hide与show...方法 $(“#id”).hide();//隐藏div 表示display:none $(“#id”).show();//显示div 表示display:block 动态显示 $("#id").toggle
测试环境 jquery-easyui-1.5.3 需求场景 打开tab页面时,自动载入一个iframe页面,除了iframe页面本身会出现一个滚动条,tab标签页也出现一个滚动条,如下图所示,需求就是去掉...解决方法 通过观察html页面结构,发现这个滚动条归属class为pannel-body的div ? 所以,解决方案,只需要添加样式即可。
p>div>").appendTo("body"); // 两次参数的情况 $("div>div>", { "class": "test", // 设置样式类 text: "Click...返回值:当前父包装对象,jQuery 实例: div id="msg">hidiv> $(function(){ // 添加字符串 $("#msg"...返回值: 返回当前的jQuery包装对象。...返回值: jQuery包装对象 实例 // 字符串 $('div').after('1234'); // jQuery对象 $("p").after($("#msg")); // dom对象...fn: 生成包裹结构的一个函数,返回包裹结构html 返回值:jQuery包装对象 实例 // 把所有的段落用一个新创建的div包裹起来 $("p").wrap("div class
1、使用Jquery操作对象 2、使用div+css控制样式 3、可以自定义停顿时间 4、滚动实现了动画效果,可以控制滚动速度 5、可以设置每次滚动的长度 6、鼠标悬停时停止滚动,鼠标移出后继续滚动 查看代码...bossma,bosma@yeah.net" /> jquery.../1.4.4/jquery.min.js"> var interval=3000;//两次滚动之间的时间间隔 var...outerHeight()){ $("#content").scrollTop($("#content").scrollTop()-$("#top").outerHeight()); } //使用jquery...> div id="bottom">div> div> div id="foot">div>
p>div>").appendTo("body"); // 两次参数的情况 $("div>div>", { "class": "test", // 设置样式类 text: "Click...返回值:当前父包装对象,jQuery 实例: div id="msg">hidiv> $(function(){ // 添加字符串 $("#msg").append...返回值: 返回当前的jQuery包装对象。...返回值: jQuery包装对象 实例 // 字符串 $('div').after('1234'); // jQuery对象 $("p").after($("#msg")); // dom对象...fn: 生成包裹结构的一个函数,返回包裹结构html 返回值:jQuery包装对象 实例 // 把所有的段落用一个新创建的div包裹起来 $("p").wrap("div class
三、包装集 我们获取的 jQuery 对象其实都是 DOM 对象的集合,从 jQuery 对象转换成 DOM 集合的方法也可以看出。...jQuery 对象转换 DOM 对象的方式:jQuery对象[0],这就说明jQuery 对象其实都是DOM对象的集合。 既然 jQuery 对象是一个集合,那么就有 length 属性。...示例:点击按钮,在div中只添加一个p标签。...,或者copy里面的代码到自己的文件中) 2、插件的制作和使用 jQuery插件制作方式主要有三种: 1、通过$.extend()来扩展jQuery; 2、通过$.fn向jQuery添加新的方法; 3、...文件 2、导入 jQuery 官方库 3、导入插件的 jQuery 库文件 4、复制 index.html 相关代码到自己的文件中。