首页
学习
活动
专区
圈层
工具
发布

前端开发者都应知道的 jQuery 小技巧

找到文本元素 切换可视与隐藏的触发器 Ajax 调用的错误处理 链式操作 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画...禁用 input 字段 有时你也许想让表单的提交按钮或其文本输入框变得不可用,直到用户执行了一个特定行为(例如确认 “我已经阅读该条款” 的复选框)。...或许你只是想在用户点击某物时展现一个元素,使用 fadeIn 和 slideDown 都很棒。...但如果想让该元素在第一次点击时显现,第二次点击时消失,下面的代码可以很好地完成这个工作: // Fade $('.btn').click(function () { $('.element').fadeToggle...通过文本找到元素 通过使用 jQuery 中的 contains() 选择器,你可以找到某个元素中的文本。

3K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    一些好用的jquery技巧

    1、返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top').click(function...但是,如果你想要元素在第一次点击的时候出现,然后在第二次点击的时候消失的话,那么可以试试下面的代码: // Fade $('.btn').click(function () { $('.element'...next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false; }); 通过添加这个脚本,你真正需要做的仅仅是在页面上添加必要的...12、通过文本查找元素 通过使用jQuery中的contains() 选择器,你可以找到元素内容的文本。...(); $elem.html('bla'); $elem.otherStuff(); 链式和高速缓存的方法都是jQuery中可以让代码变得更短和更快的代最佳做法。

    4.9K60

    基于jQuery 常用WEB控件收集

    它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。 Farbtastic ContextMenu 用于创建右键弹出菜单的jQuery插件。...提供所有基本的RichText功能,调整文本区域大小,使用AjaxFileUpload插件上传图片,清除HTML标签,标记文本修改,支持多种浏览器(FF1.5+、IE7、IE6)。...jGrow jQuery Flash Plugin 一个jQuery插件用于在页面中嵌入Flash影片。...jQuery Context Menu jQuery Right-click 这个插件能够让你使用jQuery来捕获由鼠标右键触发的事件。...这不是最终版本,我知道可以通过多种途径改良它的脚本,但是至少,这是一个可以使用的稳定版本。非常感谢Lucian Slatineanu发布的NiceJForm,在他的blog中你可以获得更多信息。

    9.2K10

    jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

    : 1:实现的方法一   (a):导入jquery.easyui.min.js和jquery.min.js这两个文件,以及theme这个文件; ?...2:实现的方法二: (a):导入jquery.easyui.min.js和jquery.min.js这两个文件,以及theme这个文件; (b):创建一个html页面,源码如下所示: 1 使用:   (1):布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的。...四:按钮组件使用超链接按钮创建。它使用一个普通的标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。 1 页面的数据。它支持页面导航和页面长度选择的选项设置。用户可以在分页控件上添加自定义按钮,以增强其功能。 1 <!

    4.7K100

    2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

    width:0)  10.使用 a 标签的话,尽量让 a 标签 block ,尽量让用户可点击区域最大化  11.对两个 div使用了 transform之后, div下的 z-index有时就会失效...,我遇到过,但没去认真探究,只是把 z-index提高就好了  12.在 iOS中,当你点击比如 input 准备输入时,虚拟键盘弹出,整个视窗的 高度 就会变为 减去键盘 的高度,加入你在底部有 fixed...另外一种情况(一般在页面内容很少时 iphone5及以上常发生),当输入框弹出时 fixed元素挤到输入框上,当输入框消失时, fixed元素并没有随着输入框的消失而回到底部,这是因为整个视窗的高度还保持在...减去键盘的 高度,需要手动去触发让视窗高度回到正常,然后试了很多方法都没成功,后来的方案是输入框消失时给页面加隐形的很大的 padding比如 1000px并在 30ms后改为正常 13.禁止用户选中文字...(这个没用过)  ③ 有的时候比如弹出一个 iphone上滑动出来的层,点击黑色半透明区域弹出层消失,这种可以在黑色区域绑定 touchend也是和 tap差不多的效果 7.当弹窗出现时,想禁止屏幕的滑动

    3.9K40

    前端开发控件折叠面板(Accordion)——详解与实现

    借助这种设计理念,可以将页面中占用较大空间的内容压缩起来,从而让用户在浏览时能够更高效地找到所需信息,同时保持界面的整洁。...采用折叠面板不仅能够减少页面的滚动距离,而且在视觉上能够起到分组与区分不同信息块的作用,使得整体界面更具层次感和交互性。...此外,不同开发框架往往封装了类似的控件,例如 jQuery UI 中的 accordion 组件、 Bootstrap 中的折叠组件以及 Material-UI 中的 Accordion 组件,它们在功能上基本相似...对于那些希望在项目中快速实现折叠面板效果的开发者,可以选择使用已有的前端库,这些库不仅封装了常见的交互逻辑,还提供了主题、动画和响应式设计支持。...例如,在内容区域较多或数据较大时,可以采用懒加载技术,仅在面板展开时才加载对应内容,以提升页面初始加载速度;在交互动画上,可以通过 CSS3 动画实现更自然的过渡效果,避免因频繁重排而导致页面卡顿。

    54810

    移动端必备的H5问题及解决方案

    二、iOS 上拉边界下拉出现白色空白 表现 手指按住屏幕下拉,屏幕顶部会多出一块白色区域。手指按住屏幕上拉,底部多出一块白色区域。...很容易想象,在我需要touchmove滑动时候,优先触发了touchstart的点击事件,是不是已经产生了冲突呢? 所以呢,在具有滚动的情况下,还是建议使用 click 处理。..., options); 同样,使用fastclick库后,click 延时和穿透问题都没了 按照我的惯例,只要涉及开源库,那么我们一定要去了解它实现的原理。...产生原因 我们在app 布局中会有个固定的底部。安卓一些版本中,输入弹窗出来,会将解压 absolute 和 fixed 定位的元素。导致可视区域变小,布局错乱。...表现 头部刘海两侧区域或者底部区域,出现刘海遮挡文字,或者呈现黑底或白底空白区域。

    5.2K42

    python测试开发django-188.Bootstrap折叠(Collapse)插件

    前言 折叠(Collapse)插件可以很容易地让页面区域折叠起来。如果您想要单独引用该插件的功能,那么您需要引用 collapse.js, bootstrap已经包含了这个插件。...可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js 折叠(Collapse) 以使用带有属性的链接href或带有属性的按钮data-target。...单击下面的按钮以通过类更改显示和隐藏另一个元素: .collapse隐藏内容 .collapsing在过渡期间应用 .collapse.in显示内容 这一段文本可以折叠,点击后也可以展示 多个折叠 只需向元素添加data-toggle=”collapse”和...在可折叠元素实际显示之前(即在事件发生之前)返回给调用者。shown.bs.collapse .collapse(‘hide’) 隐藏可折叠元素。

    3.6K50

    【Hybrid】518- 12种移动端 H5 与 Hybrid问题汇总

    最终我在 safari 文档里面寻找到了答案(文档链接在参考资料项)。 ? 原来在 iOS 5.0 以及之后的版本,滑动有定义有两个值 auto 和 touch,默认值为 auto。...iOS 上拉边界下拉出现白色空白 表现 手指按住屏幕下拉,屏幕顶部会多出一块白色区域。手指按住屏幕上拉,底部多出一块白色区域。...软键盘将页面顶起来、收起未回落问题 表现 Android 手机中,点击 input 框时,键盘弹出,将页面顶起来,导致页面样式错乱。 移开焦点时,键盘收起,键盘区域空白,未回落。...产生原因 我们在app 布局中会有个固定的底部。安卓一些版本中,输入弹窗出来,会将解压 absolute 和 fixed 定位的元素。导致可视区域变小,布局错乱。...表现 头部刘海两侧区域或者底部区域,出现刘海遮挡文字,或者呈现黑底或白底空白区域。

    1.6K22

    吃透移动端 H5 与 Hybrid|实践踩坑12种问题汇总

    最终我在 safari 文档里面寻找到了答案(文档链接在参考资料项)。 ? 原来在 iOS 5.0 以及之后的版本,滑动有定义有两个值 auto 和 touch,默认值为 auto。...iOS 上拉边界下拉出现白色空白 表现 手指按住屏幕下拉,屏幕顶部会多出一块白色区域。手指按住屏幕上拉,底部多出一块白色区域。...软键盘将页面顶起来、收起未回落问题 表现 Android 手机中,点击 input 框时,键盘弹出,将页面顶起来,导致页面样式错乱。 移开焦点时,键盘收起,键盘区域空白,未回落。...产生原因 我们在app 布局中会有个固定的底部。安卓一些版本中,输入弹窗出来,会将解压 absolute 和 fixed 定位的元素。导致可视区域变小,布局错乱。...表现 头部刘海两侧区域或者底部区域,出现刘海遮挡文字,或者呈现黑底或白底空白区域。

    2.4K20

    仿iOS底部弹框实现及分析

    具体的结束事件 点击空白让弹框消失问题 ?...标题内容的上方有一块区域 我们弹框布局的底部的背景色默认是灰色 我们针对这二个先做处理: 其实我们上方的一块区域是弹框的标题, 我们在IOSDialogFragment中添加: ?...那接下去如何让弹框变成在底部呢?????? 我们知道最后我们的View是在window下面的,我们只需要让window的Grivaty属性是Bottom,这样,里面的元素都是居于底部即可。 ?...这时候比如我想要按照自己的项目要求调整二边的间隙岂不是单纯的在自己的fragment_ios_dialog.xml就无法实现了。...6 点击空白让弹框消失问题: 当点击上方一些空白处,我们会发现我们的弹框会直接消失,而不会像我们上面点击按钮点击事件那样,弹框先往下移动再消失,因为DialogFragment默认点击弹框外的时候

    2K10

    吃透移动端 H5 与 Hybrid|实践踩坑12种问题汇总

    最终我在 safari 文档里面寻找到了答案(文档链接在参考资料项)。 原来在 iOS 5.0 以及之后的版本,滑动有定义有两个值 auto 和 touch,默认值为 auto。...iOS 上拉边界下拉出现白色空白 表现 手指按住屏幕下拉,屏幕顶部会多出一块白色区域。手指按住屏幕上拉,底部多出一块白色区域。...软键盘将页面顶起来、收起未回落问题 表现 Android 手机中,点击 input 框时,键盘弹出,将页面顶起来,导致页面样式错乱。 移开焦点时,键盘收起,键盘区域空白,未回落。...产生原因 我们在app 布局中会有个固定的底部。安卓一些版本中,输入弹窗出来,会将解压 absolute 和 fixed 定位的元素。导致可视区域变小,布局错乱。...表现 头部刘海两侧区域或者底部区域,出现刘海遮挡文字,或者呈现黑底或白底空白区域。

    1.5K30

    Bootstrap学习文档(四)

    弹出层的底部区域 fade 让弹出层有一个运动的效果,加给弹出层父级 示例代码如下: 模态框又有大小,modal-lg 大模态框,modal-sm 小模态框,默认是中等模态框。... 建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你在使用时,只需选择一个引入页面就可以了。...注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所有插件之前引入页面)。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。... 建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你在使用时,只需选择一个引入页面就可以了。... 建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你在使用时,只需选择一个引入页面就可以了。

    3.9K20

    10 款实用的jquery插件

    jquery 的流行造就了诸多令人称奇的插件,这里选出10款实用插件供大家参考使用。 本文翻译自国外技术博客,欢迎热心ITer参与我们的翻译工作,提供更多的优秀资料以供大家参考学习。...liteAccordion ,正如其名,轻量级的Accordion,只有4.5kb Zoomy ? 如果你想给图片添加放大镜效果,那么这款插件就是了 Waypoints ?...你想要拥护在滚动到网页中某个地方的时候执行你定义好的函数吗?比如,滚动到好友动态的最末地方,自动加载更多的动态? Waypoints 可以很方便的帮你实现。...我们在这里创作、改进、收集和整理编程(Coding)相关的中文文档,我们热烈欢迎您参与我们的翻译。 欢迎热心网友参与我们的翻译工作!...http://codingwiki.info/%E7%89%B9%E6%AE%8A:NewestPages 列出了最新的技术文章,在每篇文章的顶部和底部都有翻译按钮,点击翻译进入翻译页面,编辑这个页面即可

    1.5K70

    Jquery 常见案例

    /jqueryui/jquery-ui-1.10.3.custom.js"> (2)定义折叠菜单: 使用div定义折叠区域: accordion"> jQuery UI实现折叠菜单: $('#accordion').accordion(); 【】使用jquery UI实现Tab显示 (1)引入jQuery UI <!...的简介 Form Plugin API Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程。...在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。 ajaxForm 需要零个或一个参数。这唯一的一个参数可以是一个回调函数或者是一个可选参数对象。...这个方法将会清空所有的文本框,密码框,文本域里的值,去掉下拉列表所有被选中的项,让所有复选框和单选框里被选中的项不再选中。

    8.3K10

    day49_BOS项目_01

    第五步:在config目录下提供struts2的配置文件struts.xml和日志配置文件log4j.properties 示例代码如下: 页面访问,使用默认的类和默认的方法,默认的类和默认的方法可以不用写,这里写出来为了强调 -->         页面使用了`标签`,属于服务器内部转发,会跳转到WEB-INF目录下对应的页面,而该目录下的页面是受保护的,所以web.xml中需要配置服务器内部转发也要经过struts2过滤器处理后才能跳转...在jsp页面中引入jQuery EasyUI相关的资源文件 示例代码如下:     accordion)允许您提供多个面板(panel),同时显示一个或多个面板(panel)。     每个面板(panel)都有展开和折叠的内建支持。

    1.2K20
    领券