实用的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="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技巧的更多相关文章
- 一些实用的 jQuery 技巧
jQuery如今已经成为Web开发中最流行的JavaScript库,通过jQuery和大量的插件,你可以轻松实现各种绚丽的效果. 本文将为你介绍一些实用的技巧,希望可以帮助你更加高效地使用jQuery ...
- 25个实用的jQuery技巧和解决方案
1. 去除页面的右键菜单 $(document).ready(function(){ $(document).bind(“contextmenu”,function(e){returnfalse;}) ...
- 25个实用的jquery技巧
1. 去除页面的右键菜单 $(document).ready(function(){ $(document).bind(“contextmenu”,function(e){returnfalse; ...
- jquery技巧总结
jquery技巧总结一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootool ...
- 风云流水 jQuery技巧总结 (转)
jQuery技巧总结 (转) 一.简介 1.1.概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.m ...
- 2016年6月份那些最实用的 jQuery 插件专辑
jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...
- bootstrap-简洁实用的jQuery手风琴插件
前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
随机推荐
- 一段批处理脚本(for 嵌套)
需求: 1.服务器上有一堆按日期生成的目录,已经有N个月了,需要只取当前月份的目录. 2.目录中有一系列文件,文件名字不一样,但存在一定的重复规律. 3.需要从服务器上拷贝文件到本地,自动去重,拷贝到 ...
- iOS之 git 简单使用
之前没有用过git管理代码, 现在 公司要求使用git,咱 就 记记 今天所学的东西.以后也好方便查阅 和补充. 首先 我描述一下我今天提交代码的情况. 同伴给了我一个 从git库下来的2个项目的包. ...
- 磨刀不误砍柴工!vs2010快捷键大全
最常用的快捷键: VS2012变化的快捷键: 注释::VS2010是(Ctrl+E,C),VS2012是(Ctrl+K, Ctrl+C),实际操作,按住Ctrl键不放,先按K键,再按C键.相当于Ctr ...
- Java中的类变量、实例变量、类方法、实例方法的区别
类变量:形如static int a; 顾名思义,类变量可以理解为类的变量,类变量在类加载的时候就已经给它分配了内存空间,不同于实例变量(int a; ),实例变量是在该类创建对象的时候分配内存的.并 ...
- linux学习(十一)用户和用户组管理
一.用户文件 文件:/etc/passwd 这个文件记录了用户了用户名,用户id,所属组,家目录,shell信息: [root@iZ25lzba47vZ ~]# tail -n3 /etc/passw ...
- 【开源】【前后端分离】【优雅编码】分享我工作中的一款MVC+EF+IoC+Layui前后端分离的框架——【NO.1】框架概述
写博客之前总想说点什么,但写的时候又忘了想说点什么,算了,不说了,还是来送福利吧. 今天是来分享我在平时工作中搭建的一套前后端分离的框架. 平时工作大多时候都是在做管理类型的软件开发,无非就是增.删. ...
- Linux 文件系统模型
声明:本文仅限于 cnblogs 发布,其他第三方网站均为盗版,原文地址:Linux 文件系统模型 在 Linux 环境下有过一些经历的同学可能都会遇到一个问题,这个问题就是往机器上插入 U盘 或者其 ...
- Codeforces 862A Mahmoud and Ehab and the MEX
传送门:CF-862A A. Mahmoud and Ehab and the MEX time limit per test 2 seconds memory limit per test 256 ...
- 基于vue,打印机打印暂且处理
基于vue单页面应用.暂且没找到合适的方案,什么vue-print .jquery.print.js.jqprint.js..canvas生成图片啊 大多不能保证页面样式保持原样. 所以,选择了最土 ...
- sql 触发器,看完后对CHK有更深的理解
触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. 什么是触发器? 触发器对表进行插入.更新.删除 ...