15个常用的jquery代码片段


Posted in Javascript onDecember 19, 2015

本文为大家分享了15个常用的jquery代码片段,分享给大家供大家参考,具体内容如下

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

// Back to top
 $('a.top').click(function (e) {
 e.preventDefault();
 $(document.body).animate({scrollTop: 0}, 800);
 });
<!-- Create an anchor tag -->
 <a class="top" href="#">Back to top</a>

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

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

$.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、检查图片是否加载完毕
有时你或许要检查图片是否完全加载完毕,才能在脚本中进行后续操作:

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

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

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

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

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

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

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

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

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

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

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

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

当你想把 disabled 的值改为 false 时,仅需在该 input 上再运行一次 prop 方法。
$('input[type="submit"]').prop('disabled', false);

7、停止链接加载
有时你不想链接跳转到某个页面或重加载该页面,而希望可以做一些其他事情,比如触发其他脚本。下面的代码是禁止默认行为的一个小诀窍:
$('a.no-link').click(function (e) {
 e.preventDefault();
 });

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

// 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());

该例设置了 min-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 在 IE 10 中不可用,该 issue 的修复方法。

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 中的链式操作和缓存方法,都极大精简和提速了代码。
以上就是本文的全部内容,希望对大家的学习有所帮助。 

Javascript 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 #Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 #Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 #Javascript
jQuery中trigger()与bind()用法分析
Dec 18 #Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 #Javascript
js获取url传值的方法
Dec 18 #Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 #Javascript
You might like
php扩展ZF――Validate扩展
2008/01/10 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
python实现的文件夹清理程序分享
2014/11/22 Python
简介Django中内置的一些中间件
2015/07/24 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python对文件操作知识汇总
2016/05/15 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
高校自主招生校长推荐信
2015/03/23 职场文书
增值税发票丢失证明
2015/06/19 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
php访问对象中的成员的实例方法
2021/11/17 PHP