原生Js与jQuery显示隐藏div的几种方法 简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一 首先是进行js演示和讲解。...首先是display的方法,display属性的特点为,可以使得div隐藏之后释放占用的页面空间。...原理就是给div盒子的样式中的display属性加上一个"none"值 // 获取对应盒子的id document.getElementById("d").style.display = "...none"; // 隐藏盒子的方法 document.getElementById("d").style.display = ""; // 显示盒子的方法 方式二 visibility属性可以控制...从性能角度分析:第一种方式性能更高,用div.style.display="none"隐藏会引起,div里面的东西休眠,里面的事件就不响应了。 jQuery 使用jQuery的话就会更加的便捷了。
$("").load()中文乱码问题 JSP 请求页面 $("#baseLineThreeCenterTab").load(basePath+"/pro/baseline/gotoProConfigBaseLineMain.action...解决方法: JSP页面 // encodeURI()编码 $("#baseLineThreeCenterTab").load(basePath+"/pro/baseline/gotoProConfigBaseLineMain.action
1、返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top').click(function...有时为了继续脚本,你可能需要检查图像是否全部加载完毕: $('img').load(function () { console.log('image load successful'); }); 你也可以用...,也不想要重新加载页面——你可能希望链接做点别的事情,例如说触发一些其他脚本。...10、让两个div高度相同 有时候,你需要让两个div无论包含什么内容都拥有相同的高度: $('.div').css('min-height', $('.main-div').height()); 设置...(); $elem.html('bla'); $elem.otherStuff(); 链式和高速缓存的方法都是jQuery中可以让代码变得更短和更快的代最佳做法。
如果使用了两个CSS列,使用此种方式可以是两列的高度相同。...有时候你需要确保图片完成加载完成以便执行后面的操作: $('img').load(function () { console.log('image load successful'); });...并把要移除的属性作为参数传入: $('input[type="submit"]').removeAttr('disabled'); 阻止链接加载 有时你不希望链接到某个页面或者重新加载它,你可能希望它来做一些其他事情或者触发一些其他脚本...高度相同 有时你需要让两个 div 高度相同,而不管它们里面的内容多少。...>I have been replacedDIV> '); }); jQuery延时加载功能 $(document).ready(function() { window.setTimeout
检测浏览器 注: 在版本jQuery 1.4中,.support 替换掉了.browser 变量 $(document).ready(function() { // Target Firefox 2 and...列高度相同 如果使用了两个CSS列,使用此种方式可以是两列的高度相同。...有时候你需要确保图片完成加载完成以便执行后面的操作: $('img').load(function () { console.log('image load successful'); }); 14...: $('input[type="submit"]').removeAttr('disabled'); 17.阻止链接加载 有时你不希望链接到某个页面或者重新加载它,你可能希望它来做一些其他事情或者触发一些其他脚本...高度相同 有时你需要让两个 div 高度相同,而不管它们里面的内容多少。
假设有一个脚本(用js或者jQuery等类似手段编写),为UpdatePanel中的一个普通的TextBox赋值。...因为UpdatePanel是一个异步的回发页面。这个页面在初次加载的时候自然随着整个页面的刷新加载而加载,因此作用于页面级别的jQuery代码可以起到作用。...add_unload方法 对比这些方法,你发现Page的Load事件和客户端的Application的Load事件一样重要:前者是加载了全部的服务端控件之后可以开始在此写代码进行对服务端控件进行服务端的操作...同样地,这两个事件: 【相同点】一旦页面刷新,或者点击Submit页面导致整个页面回发,或者位于UpdatePanel中的按钮导致局部页回发,Page_Load和add_load照样执行。 ...单击Button的时候,就UpdatePanel回发,因此page方面的事件逐一被激发,最后重新加载UpdatePanel,然后Application的load事件才被激发(全部页面加载完毕)。
检测浏览器 注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量 $(document).ready(function() { // Target Firefox...列高度相同 如果使用了两个CSS列,使用此种方式可以是两列的高度相同。...有时候你需要确保图片完成加载完成以便执行后面的操作: $('img').load(function () { console.log('image load successful'); })...,并把要移除的属性作为参数传入: $('input[type="submit"]').removeAttr('disabled'); 17.阻止链接加载 有时你不希望链接到某个页面或者重新加载它...高度相同 有时你需要让两个 div 高度相同,而不管它们里面的内容多少。
可以在jQuery中使用查看此事件$( window ).on( "load", handler )。如果代码依赖于加载的资源(例如,如果需要图像的尺寸),则应将代码放在load事件的处理程序中。...注意,尽管DOM总是在页面完全加载之前就绪,但是在 .ready()处理程序期间执行的代码中附加加载事件侦听器通常不安全。...例如,可以在使用诸如$.getScript()的方法加载页面很久之后动态加载脚本。...尽管由 .ready() 添加的处理程序总是在动态加载的脚本中执行,但是窗口的加载事件已经发生,并且这些侦听器永远不会运行。...所以jq的ready事件执行结束时间和DOMContentLoaded结束时间并不是完全相同的,所以在使用过程中应当进行一些注意。
回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏的图片 Hover 上的 Class 开关 禁用 input 字段 停止链接加载 淡入淡出/滑动开关 简单的折叠效果 将两个 Div 设为相同高度...在新窗口打开外部链接 找到文本元素 切换可视与隐藏的触发器 Ajax 调用的错误处理 链式操作 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法...IE 10 中不可用,该 issue 的修复方法。...通过文本找到元素 通过使用 jQuery 中的 contains() 选择器,你可以找到某个元素中的文本。...中的链式操作和缓存方法,都极大精简和提速了代码。
因为ul中的li是JS动态创建的,在页面加载时Docoment中并没有此元素,选择器并不能选取。...jQuery 多库共存 实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现...凡是在软件开发中用到了软件的复用,被复用的部分都可以称为组件,凡是在应用程序中已经预留接口的组件就是插件。...,然后存储给本地存储 重新渲染加载数据列表 因为a是动态创建的,我们使用on方法绑定事件 1.7.6 案例:toDoList 正在进行和已完成选项操作 当我们点击了小的复选框,修改本地存储数据,再重新渲染数据列表...之后保存数据到本地存储 重新渲染加载数据列表 load 加载函数里面,新增一个条件,如果当前数据的done为true 就是已经完成的,就把列表渲染加载到 ul 里面 如果当前数据的done 为false
jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。... 下面的例子会把文件 “demo_test.txt” 的内容加载到指定的 div> 元素中: 实例:$(“#div1”).load(“demo_test.txt”); 中 id=”p1″ 的元素的内容,加载到指定的 div> 元素中: 实例:$(“#div1”).load(“demo_test.txt #p1”);...> jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分。...实例解析 jQuery AJAX load() 方法 jQuery load() 异步载入文件内容并插入到 div> 元素中。
对象 4、$.get() 和 $.post() 方法是 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法 load()方法 1、load()方法是...jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中。...2、它的结构是: load(url[, data][,callback]) 3、程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给...jQuery 7、如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的....) $.getScript()方法 1、有时候,在页面初次加载时就取得所需的全部的javascript文件是完全没有必要的。
,同时增加一些自己在使用中的一些技巧。...,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等...我还用了window load ((window).load()) 来激活我的插件功能,因为这样,就可以保证在页面对象全部加载完成之后,加载我的插件。...当然,你也可以使用常规的 jQuery 代码加载方法,但是你要明白 ready 和 load 方法之间的不同。...如果想使其重新可用,调用 update方法。disable 方法使用一个可选参数(默认 false)你可以设置 true 如果你想重新让内容区域滚动当 scrollbar 不可用时。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。 使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。...jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法。 load() 方法从服务器加载数据,并把返回的数据放入被选元素中。... 下面的例子会把文件 “demo_test.txt” 的内容加载到指定的 div元素中: $("#div1").load("demo_test.txt"); 也可以把 jQuery 选择器添加到...下面的例子把 “demo_test.txt” 文件中 id=“p1” 的元素的内容,加载到指定的 元素中: $("#div1").load("demo_test.txt #p1"); 可选的...如果 load() 方法已成功,则显示“外部内容加载成功!”
多库共存 实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现,这种情况被称为...凡是在软件开发中用到了软件的复用,被复用的部分都可以称为组件,凡是在应用程序中已经预留接口的组件就是插件。...(i, 1)方法 // 5.存储修改后的数据,然后存储给本地存储 // 6.重新渲染加载数据列表 // 7.因为a是动态创建的,我们使用on方法绑定事件 1.7.6 案例:toDoList 正在进行和已完成选项操作...// 4.之后保存数据到本地存储 // 5.重新渲染加载数据列表 // 6.load 加载函数里面,新增一个条件,如果当前数据的done为true 就是已经完成的,就把列表渲染加载到 ul 里面 //...7.如果当前数据的done 为false, 则是待办事项,就把列表渲染加载到 ol 里面 1.7.7 案例:toDoList 统计正在进行个数和已经完成个数 // 1.在我们load 函数里面操作 //
如果你一次又一次的选择相同元素(例如在一个循环中),那么你可以一次选择出它并放入内存中,同时你可以在核心内容里操作它。...由于jQuery提供的animate()方法十分易用和强大,我们很容易深入使用它。事实上,在jQuery源代码中不少方法就是通过animate()函数来实现效果的。...因此我们仅需要把这些HTML内容放入一个静态页面中,在页面加载完成之后通过load()函数加载它: 复制代码代码如下: $(‘#forms’).load(‘content/headerForms.html...所有你要做的就是在IMG上使用.load()方法,在其中添加一个回调函数。...首先,在jQuery加载之后你可以使用方法将”JS”类添加到HTML标签中: 复制代码代码如下:$(‘HTML’).addClass(‘JS’); 因为这仅仅发生在javascript有效的时候,如果用户打开
以下几个 jQuery 技巧,也许你工作中能够用上。 1....检查图像是否加载 有时为了继续脚本,你可能需要检查图像是否全部加载完毕: $('img').load(function () { console.log('image load successful...淡入 / 滑动切换 滑动和淡入都是我们用 jQuery 做动画的时候大量运用的东西。如果你只是想在用户点击之后展示一个元素的话,那么用 fadeIn 和 slideDown 方法就很完美。...让两个 div 高度相同 有时候,你需要让两个 div 无论包含什么内容都拥有相同的高度: $('.div').css('min-height', $('.main-div').height());...修复的时候要小心这个问题。 8. 通过文本查找元素 通过使用 jQuery 中的 contains() 选择器,你可以找到元素内容的文本。
使用大公司CDN好处: 许多用户在访问其它站点时,已经从百度、新浪、谷歌和微软加载过jQuery。当用户访问我的站点时,会从缓存中加载jQuery,这样可以有效减少加载时间!...(适用于表单字段)发生改变时),focus(元素获得焦点),blur(元素失去焦点)事件; 文档/窗口事件:load(元素已加载触发,在jQuery1.8中废除。...ajax中也有load()方法),resize(调整浏览器窗口大小时触发),scroll(滚动指定的元素),unload(jQuery1.8中废弃)事件。 另: hover():模拟光标悬停事件。...(不带参数) 6.jQuery链(chaining) 链:顾名思义,锁链,即一环套一环。 jQuery中将动作/方法链接在一起,因此,在相同元素上,我们可以在一条语句上运行多个jQuery方法。...1.jQuery load():从服务器加载数据,并将返回的数据放入被选元素中。