关注jquery技巧提高jquery技能(前端开发必学)

一个简单技巧的集合,帮你提升 jQuery 技能。

Matt Smith 发起的一个小项目,目前已有 14 个 小技巧。伯乐在线会持续跟进更新。

回到顶部按钮
预加载图片
检查图片是否加载完毕
自动修复损坏的图片
Hover 上的 Class 开关
禁用 input 字段
停止链接加载
淡入淡出/滑动开关
简单的折叠效果
将两个 Div 设为相同高度
在新窗口打开外部链接
找到文本元素
切换可视与隐藏的触发器

回到顶部按钮

通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画:

JavaScript

// Back to top
$('a.top').click(function (e) {
 e.preventDefault();
 $(document.body).animate({scrollTop: 0}, 800);
});

JavaScript

<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

将 scrollTop 的值改为你想要 scrollbar 停止的地方。然后你要做的就是,设置在 800 毫秒内回到顶部。

预加载图片

如果你的页面使用了大量不能初始可见的图片(例如绑定在 hover 上),预加载它们是十分有用的:

JavaScript

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
  $('<img>').attr('src', arguments[i]);
 }
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');

检查图片是否加载完毕

有时你或许要检查图片是否完全加载完毕,才能在脚本中进行后续操作:

JavaScript

$('img').load(function () {
 console.log('image load successful');
});

你也可以通过把 img 标签替换成 ID 或 class,来检查特定图片是否加载完成。

自动修复损坏的图片

如果你发现自己网站的图片链接挂了,一个一个替换很麻烦。这段简单的代码可以帮上大忙:

JavaScript

$('img').on('error', function () {
 $(this).prop('src', 'img/broken.png');
});

即使你没有任何损坏的链接,增加这段代码也不会有什么影响。

Hover 上的 Class 切换

如果用户的鼠标悬停在页面上某个可点击元素时,你想要改变这个元素的视觉表现。可以使用下面这段代码,当用户悬停时,为该元素增加一个 class;当用户鼠标离开后移除这个 class:

JavaScript

$('.btn').hover(function () {
 $(this).addClass('hover');
}, function () {
 $(this).removeClass('hover');
});

你仅需增加必须的 CSS。如果需要更简单的方式,还可以使用 toggleClass 方法:

JavaScript

$('.btn').hover(function () {
 $(this).toggleClass('hover');
});

注意:CSS 或许是这个例子更快速的解决方式,但大家仍然值得知道这一点。

禁用 input 字段

有时你也许想让表单的提交按钮或其文本输入框变得不可用,直到用户执行了一个特定行为(例如确认 “我已经阅读该条款” 的复选框)。增加 disabled attribute 到你的 input,就可以实现自己想要的效果:

JavaScript

$('input[type="submit"]').prop('disabled', true);

当你想把 disabled 的值改为 false 时,仅需在该 input 上再运行一次 prop 方法。

JavaScript

$('input[type="submit"]').prop('disabled', false);

停止链接加载

有时你不想链接跳转到某个页面或重加载该页面,而希望可以做一些其他事情,比如触发其他脚本。下面的代码是禁止默认行为的一个小诀窍:

JavaScript

$('a.no-link').click(function (e) {
 e.preventDefault();
});

淡入淡出/滑动开关

淡入淡出与滑动是我们经常使用 jQuery 做成的动画效果。或许你只是想在用户点击某物时展现一个元素,使用 fadeIn 和 slideDown 都很棒。但如果想让该元素在第一次点击时显现,第二次点击时消失,下面的代码可以很好地完成这个工作:

JavaScript

// Fade
$('.btn').click(function () {
 $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
 $('.element').slideToggle('slow');
});

简单的手风琴效果

这是一个快速实现手风琴效果的简单方法:

JavaScript

// Close all panels
$('#accordion').find('.content').hide();

// Accordion
$('#accordion').find('.accordion-header').click(function () {
 var next = $(this).next();
 next.slideToggle('fast');
 $('.content').not(next).slideUp('fast');
 return false;
});

增加这段脚本后,你所需做的所有事就是,查看脚本是否在必须的 HTML 中正常工作。

使两个 Div 高度一样

有时你也许想让两个 div 拥有同样高度,不管它们里面有什么内容:

JavaScript

$('.div').css('min-height', $('.main-div').height());

该例设置了 min-height,意味着它可以比主要 div 更大,但永远不能更小。但有一个更加灵活的方法是遍历一组元素的设置,然后将高度设为元素中的最高值:

JavaScript

var $columns = $('.column');
var height = 0;
$columns.each(function () {
 if ($(this).height() > height) {
  height = $(this).height();
 }
});
$columns.height(height);

如果你想让所有列都有相同高度:

JavaScript

var $rows = $('.same-height-columns');
$rows.each(function () {
 $(this).find('.column').height($(this).height());
});

在新标签/窗口打开站外链接
在一个新标签或者新窗口中打开外置链接,并确保站内链接会在相同的标签或窗口中打开:

JavaScript

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

注意:window.location.origin 在 IE 10 中不可用,该 issue 的修复方法。

通过文本找到元素

通过使用 jQuery 中的 contains() 选择器,你可以找到某个元素中的文本。如果文本不存在,该元素将会隐藏:

JavaScript

var search = $('#search').val();

$('div:not(:contains("' + search + '"))').hide();

视觉改变触发
当用户焦点在另外一个标签上,或重新回到标签时,触发 JavaScript:

JavaScript

$(document).on('visibilitychange', function (e) {
 if (e.target.visibilityState === "visible") {
  console.log('Tab is now in view!');
 } else if (e.target.visibilityState === "hidden") {
  console.log('Tab is now hidden!');
 }
});

Ajax 调用的错误处理

当某次 Ajax 调用返回 404 或 500 错误,就会执行错误处理。但如果没有定义该处理,其他 jQuery 代码或许会停止工作。可以通过下面这段代码定义一个全局 Ajax 错误处理:

JavaScript

$(document).ajaxError(function (e, xhr, settings, error) {
 console.log(error);
});

全能程序员交流QQ群290551701,群内程序员都是来自,百度、阿里、京东、小米、去哪儿、饿了吗、蓝港等高级程序员 ,拥有丰富的经验。加入我们,直线沟通技术大牛,最佳的学习环境,了解业内的一手的资讯。如果你想结实大牛,那 就加入进来,让大牛带你超神!

(0)

相关推荐

  • jQuery实现点击关注和取消功能

    点赞,网络用语,表示"赞同"."喜爱". 该网络语来源于网络社区的"赞"功能.送出和收获的赞的多少.赞的给予偏好等,在某种程度能反映出你是怎样的人以及处于何种状态.点赞的背后,反映出你自己.与之对应的便是取消功能.恰巧最近博主在一款APP,其中一个版块需要实现点赞和取消功能,经过思考决定用JQuery代码实现它,好了废话不多说,上干货!! 首先要引入JQuery插件 其次,我们需要定义一个div,并给它一些样式 然后就是JS代码了,如下所示 $(

  • 15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】

    本文总结述了15个值得开发人员关注的jQuery开发技巧和心得.非常精辟实用!分享给大家供大家参考,具体如下: 在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢! 1. 尽量使用最新版本的jQuery类库 jQuery项目中使用了大量的创新.最好的方法来提高性能就是使用最新版本的jQuery.每一个新的版本都包含了优化的bug修复.对我们来说唯一要干的就是修改tag,何乐而不为呢? 我们也可以使用免费的CDN服务,例如, Google来存放j

  • jquery心形点赞关注效果的简单实现

    html代码 <div class="stage"> <div class="heart"></div> </div> css代码 .heart { width: 100px; height: 100px; background: url("") no-repeat; background-position: 0 0; cursor: pointer; -webkit-transition: bac

  • 关注jquery技巧提高jquery技能(前端开发必学)

    一个简单技巧的集合,帮你提升 jQuery 技能. Matt Smith 发起的一个小项目,目前已有 14 个 小技巧.伯乐在线会持续跟进更新. 回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏的图片 Hover 上的 Class 开关 禁用 input 字段 停止链接加载 淡入淡出/滑动开关 简单的折叠效果 将两个 Div 设为相同高度 在新窗口打开外部链接 找到文本元素 切换可视与隐藏的触发器 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方

  • jQuery图片轮播插件——前端开发必看

    还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢.后来慢慢的接触多了,觉得这些也是so easy的嘛,于是为了加深对js.jQuery的理解以及探究网站上各种效果的实现方法,就有了jQuery插件之路这样一个系列,当然为了纪念当初对轮播的执念,于是就从轮播开始写了一个小小的插件,这只是一个开始,随着后面的了解的更多,也会写一些更加绚丽的DEMO.有兴趣的朋友可以去看

  • 前端开发必须知道的JS之闭包及应用

    在前端开发必须知道的JS之原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用能力,所以此文不能再拖了.本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教.一. 闭包的理论 首先必须了解以下几个概念: 执行环境 每调用一个函数时(执行函数时),系统会为该函数创建一个封闭的局部的运行环境,即该函数的执行环境.函数总是在自己的执行环境中执行,如读写局部变量.函数参数.运行内部逻辑.创建执行环境的过程包含了创建函数的作用域,函数也是在

  • 20170918 前端开发周报之JS前端开发必看

    1.用函数式编程对JavaScript进行断舍离 当从业20的JavaScript老司机学会函数式编程时,他扔掉了90%的特性,也不用面向对象了,最后发现了真爱啊!!! http://www.jb51.net/article/123958.htm 2.JavaScript作用域和闭包 作用域和闭包在JavaScript里非常重要.但是在我最初学习JavaScript的时候,却很难理解.这篇文章会用一些例子帮你理解它们.我们先从作用域开始.作用域 JavaScript的作用域限定了你可以访问哪些变

  • 前端开发必知的15个jQuery小技巧

    下面这些简单的小技巧能够帮助你玩转jQuery. 1.返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); <!-- Create an anchor tag --> <a class=

  • 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果

  • 前端开发必须知道的JS之原型和继承

    一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型.这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型.譬如普通函数: 复制代码 代码如下: function F(){ alert(F.prototype instanceof Object) //true; } 构造函数,也即构造对象.首先了解下通过构造函数实例化对象的过程. 复制代码 代码如下: function A(x){ this.x

  • jQuery前端开发35个小技巧

    废话不说 直接代码,有问题可以一起交流 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(docu

  • 了解jQuery技巧来提高你的代码

    jQuery之所以如此流行并被从大公司到个人博客的几乎每个人都广泛使用,是因为它上手和使用相当简单,而且为我们提供了一些人都不知道的相当棒的特性.我认为jQuery的大多数用户更趋向于使用jQuery插件来解决面临的难题,这通常是明智的选择.但是当插件相对于你的需求有一定缺陷的时候,你也许更应该想办法自己来解决,下面来看看这些实用的jQuery技巧,他们肯定会能够派上用场的! 1.测试并提升你的jQuery选择器水平 这个jQuery选择器实验室非常酷,它能在线免费使用,当然你也能下来到本地离线

  • 了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)

    2.测试jQuery包装集是否包含某些元素 如果你想测试一下某个jQuery包装集中是否包含某些元素,你首先可以尝试使用验证首个元素是否存在: 复制代码 代码如下: if($(selector)[0]){...} // 或者这样 if($(selector).length){...} 来看看这个例子: 复制代码 代码如下: //例子.如果你的页面有以下html代码 <ul id="shopping_cart_items"> <li><input class

随机推荐