关于前端:前端开发之15个jQuery小技巧分享

3次阅读

共计 1485 个字符,预计需要花费 4 分钟才能阅读完成。

  1. 返回顶部按钮

你能够利用 animate 和 scrollTop 来实现返回顶部的动画,而不须要应用其余插件。

扭转 scrollTop 的值能够调整返回间隔顶部的间隔,而 animate 的第二个参数是执行返回动作须要的工夫前端培训(单位:毫秒)。

  1. 预加载图片

如果你的页面中应用了很多不可见的图片(如:hover 显示),你可能须要预加载它们:

  1. 查看图片是否加载实现

有时候你须要确保图片实现加载实现以便执行前面的操作:

你能够把 img 替换为其余的 ID 或者 class 来查看指定图片是否加载实现。

  1. 主动批改破损图像

如果你碰巧在你的网站上发现了破碎的图像链接,你能够用一个不易被替换的图像来代替它们。增加这个简略的代码能够节俭很多麻烦:

即便你的网站没有破碎的图像链接,增加这段代码也没有任何坏处。

  1. 鼠标悬停 (hover) 切换 class 属性

如果当用户鼠标悬停在一个可点击的元素上时,你心愿扭转其成果,上面这段代码能够在其悬停在元素上时增加 class 属性,当用户鼠标来到时,则主动勾销该 class 属性:

你只须要增加必要的 CSS 代码即可。如果你想要更简洁的代码,能够应用 toggleClass 办法:

注:间接应用 CSS 实现该成果可能是更好的解决方案,但你依然有必要晓得该办法。

  1. 禁用 input 字段

有时你可能须要禁用表单的 submit 按钮或者某个 input 字段,直到用户执行了某些操作(例如,查看“已浏览条款”复选框)。能够增加 disabled 属性,直到你想启用它时:

要做的就是执行 removeAttr 办法,并把要移除的属性作为参数传入:

  1. 阻止链接加载

有时你不心愿链接到某个页面或者从新加载它,你可能心愿它来做一些其余事件或者触发一些其余脚本,你能够这么做:

  1. 切换 fade/slide

fade 和 slide 是咱们在 jQuery 中常常应用的动画成果,它们能够使元素显示成果更好。然而如果你心愿元素显示时应用第一种成果,而隐没时应用第二种成果,则能够这么做:

  1. 简略的手风琴成果

这是一个实现手风琴成果疾速简略的办法:

  1. 让两个 DIV 高度雷同

有时你须要让两个 div 高度雷同,而不论它们外面的内容多少。能够应用上面的代码片段:

这段代码会循环一组元素,并设置它们的高度为元素中的最大高。

  1. 对于页面元素的援用

通过 jquery 的 $ 援用元素包含通过 id、class、元素名以及元素的层级关系及 dom 或者 xpath 条件等办法,且返回的对象为 jquery 对象(汇合对象),不能间接调用 dom 定义的办法。

  1. jQuery 对象与 DOM 对象的转换

只有 jquery 对象能力应用 jquery 定义的办法。留神 dom 对象和 jquery 对象是有区别的,调用办法时要留神操作的是 dom 对象还是 jquery 对象。一般的 dom 对象个别能够通过 $ 转换成 jquery 对象。

如:$(document.getElementById(“msg”))则为 jquery 对象,能够应用 jquery 的办法。因为 jquery 对象自身是一个汇合。所以如果 jquery 对象要转换为 dom 对象则必须取出其中的某一项,个别可通过索引取出。

  1. 禁止右键

在开发 Web 利用的时候,有些状况须要禁用右键单击性能。应用此代码,jQuery 开发人员能够在网页上禁用鼠标右键点击。

  1. 使元素居屏幕两头地位

Div 居中是一个比拟常见的需要。应用 CSS 也能够实现 div 的居中成果,然而有时候可能须要动静的调整,上面就介绍一下如何用 jQuery 实现对象的程度垂直居中成果:

  1. 适当应用原生 JS

创立 jQuery 对象会带来一些开销。所以,如果比拟重视性能的话,尽可能应用原生的 javascript。在某些方面可能会更容易了解和写更少的代码。例如:

正文完
 0