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="top" href="#">Back to top</a>

通过scrollTop的值来改变你想要滚动到的位置。其实你就是做了:在接下来的800毫秒中让页面滚动,直到它滚动到文档的顶部。

2、图片预加载

如果你的网页使用了很多隐藏图片文件(例如:鼠标悬停展示的图片),那么图片的预加载是有意义的:

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

 

3、判断图片是否加载完 

有时候你可能需要检查图像是否已经加载完成,以便于可以继续执行相应的js代码:

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

你还可以检查一个特定的图片是否加载完并且被带有Id或者class的<img>标签代替。

4、自动修补破损图像

如果你碰巧发现在你的网站上发现破损的图像链接,一个个去替代他们是痛苦的。这个简单的代码可以节省很多的麻烦:

$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});

即使你没有任何断开的链接,加入这代码也不会有任何影响。

5、Hover切换class类

比方说,当用户将鼠标悬停在你页面上的元素时,你想改变其视觉效果。当用户鼠标悬停在元素上,你可以在该元素上添加一个class类,当鼠标停止悬停事件时移除此class类:

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

如果你想要一个更简单的方式使用toggleClass方法,则仅仅需要添加必要的CSS:

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

 备注:CSS在这种情况下使用是一个快速的解决方案,但要知道这点知识依旧是值得去了解下的。

6、禁用输入

有时你可能需要用表单的提交按钮或者某个输入框直到用户执行了某个动作(比如:检查“我已阅读条款”复选框)。在你的输入框上设置disabled属性,然后当你需要的时候启用该属性:

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

你需要做的只是需要在输入框上再次运行prop方法,但设置的被禁用值是false:

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

 

7、停止正在加载的链接

有时你不想链接到特定的网页或者重新载入页面;你可能想让他们做一些其他事情,如触发一些其他的脚本。这是防止违约行动的技巧:

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

 

8、toggle fade/slide

滑动和淡入/淡出 是我们在jQuery中经常大量使用的动画。你可能仅仅想在用户做某些点击事件的时候显示一个元素,这时候需要淡入/淡出或者滑动方法。但是如果你需要那个元素在你第一次点击的时候出现,在第二次点击的时候消失,代码如下:

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

 

9、简单的手风琴

 这是个简单快速的方法创建一个手风琴:

// 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操作在你的页面上。

10、使两个DIV同等高度

有时你会想要两个DIV有相同的高度,无论他们都有什么内容:

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

这个例子设置了DIV的最小高度,这意味着它的高度只可以比这个设置的高度大而不能小。然而,一个更灵活的方法是循环的一组元素,并设置将最高元素的高度作为高度:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height); 如果你想要所有的列有相同的高度: var $rows = $('.same-height-columns');
$rows.each(function () {
$(this).find('.column').height($(this).height());
});

 

11、在浏览器标签/新窗口打开外部链接 

在新的浏览器标签或窗口中打开外部链接,并确保在同一个标签或窗口中打开的是同一个源的链接:

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

 备注:window.location.origin 在IE10不工作。

12、根据文本获取元素

通过jQuery中的contains()选择器,你能找到一个元素内的文本内容。如果文本不存在,则这个元素将被隐藏:

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

 

13、可见变化的触发

当用户不再聚焦或者重新聚焦一个标签时触发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!');
}
});

 

14、Ajax调用错误处理 

当一个Ajax调用返回一个404或500的错误时,将执行该错误处理。如果该处理未定义,则其他jQuery代码便可能不会执行了。定义一个全局Ajax错误处理程序:

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

 

15、链式操作 

jQuery允许通过链式操作来减轻反复查询DOM和创建多个jQuery对象的过程。比如下面是你的方法调用:

$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();

这代码可以通过链式大大的提高:

$('#elem')
.show()
.html('bla')
.otherStuff();

另一个方法是在一个可变的元素缓存($作为前置):

var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();

 链式和jQuery缓存方法是最好的做法,导致更短、更快的代码。

16、检查 jQuery 是否加载

在使用 jQuery 进行任何操作之前,你需要先确认它已经加载:

  if(typeof jQuery == 'undefined') {
    console.log('jQuery hasn\'t loaded');
  } else {
    console.log('jQuery has loaded');
  }
 

17、缓存 jQuery 选择器

想想你在项目中一次又一次地写了多少相同的选择器吧。每个$('.element')都必须查询一次整个 DOM,不管它是否曾这样执行过。作为代替,我们只运行一次选择器,并把结果储存在一个变量中:

var blocks = $('#blocks').find('li');

实用的jQuery技巧的更多相关文章

  1. 一些实用的 jQuery 技巧

    jQuery如今已经成为Web开发中最流行的JavaScript库,通过jQuery和大量的插件,你可以轻松实现各种绚丽的效果. 本文将为你介绍一些实用的技巧,希望可以帮助你更加高效地使用jQuery ...

  2. 25个实用的jQuery技巧和解决方案

    1. 去除页面的右键菜单 $(document).ready(function(){ $(document).bind(“contextmenu”,function(e){returnfalse;}) ...

  3. 25个实用的jquery技巧

    1. 去除页面的右键菜单   $(document).ready(function(){ $(document).bind(“contextmenu”,function(e){returnfalse; ...

  4. jquery技巧总结

    jquery技巧总结一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootool ...

  5. 风云流水 jQuery技巧总结 (转)

    jQuery技巧总结 (转) 一.简介 1.1.概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.m ...

  6. 2016年6月份那些最实用的 jQuery 插件专辑

    jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...

  7. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

  8. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  9. 经验分享:10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

随机推荐

  1. java笔记3(动手动脑)

    1.以下代码为何无法通过编译?哪儿出错了? 原因:已有的Foo()是带一个int型参数的构造方法,不存在无参的构造方法Foo() "构造方法" 当创建一个对象时,它的构造方法会被自 ...

  2. Vim - 常用配置

    基本配置 不用任何插件的情况下,先按如下配置: set nu syntax on set hlsearch set tabstop=4 set shiftwidth=4 set expandtab s ...

  3. 关于docker使用的几个小问题(二)

    很久没写博客了,集中写几个比较有意思的小问题. 一.CentOS容器没有service命令 这是因为我们从docker官方镜像仓库中pull的最新CentOS镜像都是centos7.4 Redhat- ...

  4. mybatis like 的坑

    昨天快要下班的时候组长交代了一个任务,说起来很简单,是这样的: 系统里面有一个字段为name,这个name允许设置为特殊字符,目前根据name模糊匹配,如果遇到特殊字符 比如 "$" ...

  5. xml读取一行数据

    #include<map>#include<iostream>#include<fstream>#include<string>using namesp ...

  6. 【XML】xStream浅录

    XStream可以用来转换对象-XML,或者XML-对象. 官网地址:http://x-stream.github.io 小案例: 实体类 FileVo.java package cn.pinnsvi ...

  7. TinyXML2的使用

    -----------------------------------------------------------------2015年7月21日16:37:53----------------- ...

  8. redis源码分析之发布订阅(pub/sub)

    redis算是缓存界的老大哥了,最近做的事情对redis依赖较多,使用了里面的发布订阅功能,事务功能以及SortedSet等数据结构,后面准备好好学习总结一下redis的一些知识点. 原文地址:htt ...

  9. FPM定制RPM包实践

    1.1 快速部署方案 ✔ 问题:当领导给你 100 台已经安装好系统的服务器,然后让优化,让你提出一个快速部署方案. 解答: 1.tar 打包 先编译安装 打包-->分发-->解包(比如 ...

  10. Deploy .Net project automatically with MsBuild and MsDeploy (1)

    Q: How to change parameter values in configuration files dynamically In the first section http://www ...