首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    一些好用的jquery技巧

    1、返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top').click(function...所有你真正需要做的是在800毫秒的时间内设置文档主体的动画,直到它滚动到文档的顶部。 注:小心scrollTop的一些错误行为。...6、禁用输入字段 有时候,你可能想要禁用表格的提交按钮或它的某一项文字输入直到用户执行了特定操作(例如,勾选“我已阅读相关条款”复选框)。...elem').otherStuff(); 通过使用链式,可以大大改善: $('#elem') .show() .html('bla') .otherStuff(); 还有一种方法是在(前缀$)变量中高速缓存元素...: var $elem = $('#elem'); $elem.hide(); $elem.html('bla'); $elem.otherStuff(); 链式和高速缓存的方法都是jQuery中可以让代码变得更短和更快的代最佳做法

    5.2K60

    指定 WordPress 页面按需加载 JavaScript

    比如,我们的主题中有一个名为 “Portfolio Archive” 的页面模板,在这个模板中,我们需要使用 “imagesloaded、masonry、isotope、jquery-ias” 这 4...只在使用了某个页面模板的页面上加载指定的 JavaScript 文件吗,在下面的代码中,首页我们加载了每个页面都需要的 jQuery 和 Main.js 文件,然后判断当前页面是否使用了指定的页面模板,...wp_enqueue_scripts', 'my_theme_load_scripts'); // 加载样式和脚本 function my_theme_load_scripts(){ wp_enqueue_script('jquery...如果某主题使用的 JavaScript 文件比较少,全部加载一起也没有多大,我们完全可以把这些 JavaScript 文件合并在一起文件中,这样不但可以减少页面请求数,还可以把脚本文件缓存到客户端,打开下一个页面的时候不用再下载一次

    2.5K10

    jQuery中find&filter、live&bind对比介绍及图片懒加载

    是无法实现阻止事件的传递或者冒泡的 三、 图片懒加载: 图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候...图片延迟加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一个1×1的全透明的占位图片来代替,当然占位图片也可以是其他的图片。... 因为是使用javascript来加载图片,如果用户禁用了javascript...realimg.jpg" alt="" /> 页面初次加载时获取图片在页面中的位置并缓存...当页面滚动的时候,再判断图片已经缓存的位置值是否出现在可视区域内,进行替换src加载。当所有的图片都加载完之后,将相应的触发事件卸载,避免重复操作引起的内存泄漏。

    92031

    JS实现无限分页加载——原理图解

    有很多网站使用 无限分页 的模式,即网页视窗到达内容底部就自动加载下一部分的内容... 本篇就无限分页的实现模型,讲述其中奥妙。...原理图 实现无限分页的过程大致如下: 1 视窗滚动到底部 2 触发加载,添加到现有内容的后面。 因此,可能会出现两种情况: 1 当页面的内容很少,没有出现滚动条。...2 当页面的内容很多,出现了滚动条。.../html; charset=utf-8" /> jquery/2.1.4/jquery.min.js">滚动了一下后,视窗的高度不变;上面隐藏的高度增加到100,即滚动条上面代表的部分。 ? 当触发加载后,视窗的高度保持变;上面隐藏的高度保持不变;文本的内容增加到1816; ?

    6.7K100

    滑动到底部无限加载的实现

    对于移动端页面,我们一般会用每次滚动到接近页面底部时,加载更多(下一页)数据的方式。本文就来介绍下滑动到底部无限加载的实现。...实现滑动到底部无限加载,我们要做的是: 监听显示数据内容的元素的滚动事件。 每次元素滚动时,若此时不在加载数据,则计算元素下方没显示的高度值。...如果没有更多的内容可显示,则不再监视元素的滚动事件。 易知:元素下方没显示的高度值 = 元素总高度 - 元素垂直方向滚动了的距离 - 元素可视区域高度 各种值如下图所示: ?...元素的 scrollTop 属性值为其垂直方向滚动了的距离。 元素的 clientHeight 属性值为其可视区域高度。...jQuery Infinite Scrolling Demos 无限加载 grid 的列表,文章,图片带分页等。

    2K20

    jQuery 最佳实践(译)

    原文 http://shichuan.github.io/javascript-patterns/#jquery-patterns 重复查询 通过链式写法来避免重复查询。...table.detach(); table.addLotsAndLotsOfRows(); parent.append(table); 事件委托 用on而不是用live(live这方法已被废除) 缓存抓取的元素...对于被多次使用的元素,用变量来缓存它,避免多次查询 window滚动事件 用户在快速滚动滚轮的时候,会触发很多次windows滚动事件,会导致滚动事件的处理函数的堆积,而造成交互的滞后。...具体的选择器放右边,不具体的写左边 //不推荐 $('div.data .brad') // 推荐 $('.data td.brad') jQuery的选择器是Sizzle是下向上来找匹配的元素的。...1.7的$.Callbacks()特性 使用jQuery UI的$.Observable 第三方组件 推荐朴灵的eventproxy

    1K30

    前端常用插件

    库 stellar.js: 前端用于实现异步滚动效果的库,现已不再维护 skrollr: 另一款实现一步滚动的开源库,使用人数众多,可实现各种狂拽酷炫掉渣天的前端效果,看真相 Framework7:...,兼容到 IE8 scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等),性能很好 ScrollMagic: 神奇的滚动交互效果插件,可以在滚动的过程中设置各种各样的动态效果 infinite-scroll...: 滚动加载,滚动到最下到自动加载, Paul Irish 大神之作 animatable: 仅仅依靠 border-width 和 background-position 实现的各种动态效果,看真相...一个适用于现代浏览器的,用于处理 手势、拖放、缩放等的库 rebound-js: 实现部分物理效果,Facebook 出品 basket.js: 基于 LocalStorage 的资源加载器,可以用来缓存...script 和 css, 手机端使用速度快于浏览器直接缓存 iscroll: 高性能的滚动(scroll)处理库,功能强大,支持各种事件,不依赖任何的库,且插件丰富, 大众点评的手机端列表滚动就是用这个库处理的

    5.7K61

    从一个HTTP请求完整链路分析到K8S配置的原理

    接入服务可以是ias或者其他开源组件,接入服务可以配置各种路由规则,根据路由规则转发到名字服务(一般是北极星和IPPORT,由于历史原因也有TAF、L5),最后由名字服务去查找绑定的集群的对应的podip...Pod重建过程图片PreStop: ["/bin/sh","-c","sleep 15"] ,一般我们会在停止之前有一段时间做缓冲,preStop,保证缓存的请求处理完毕,没有流量进来了,开始重建2....滚动更新策略一般用不上,对实例进行逐个更新,这种方式可以让您不中断业务实现对服务的更新五. 扩缩容这里看自己业务,如果你的业务很紧张,极限值建议45%就够了,如果业务不紧张,60%,80%都行。

    1.7K81

    dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化而触发一些效果,原本你要写 js 去绑定滚动事件,然后计算偏移量,然后更新元素 css,使用 dynamic-css,你只要根据语法去写好 css 表达式就可以了...DOCTYPE html> 页面滚动到一定距离时,元素发生变 - DynamicCss..."block" : "none"}}; /* 这里面可以写 js 代码,可以调用 js 方法,基本无限制 */ } 往下滚动试试 <div class...本文示例 Source Code: https://github.com/darklx/dynamic-css dynamic-css 使用了 jQuery,但并不是必须依赖 jQuery ,只是用了...jQuery 的 $.get 方法,如果你的项目不想引入 jQuery,也是可以的,传给 dynamic-css 具有相同 get 方法功能的对象即可。

    2.1K20
    领券