艾斯博弈

学习,工作中的一些记忆

十五个常用的jquery代码段

回到顶部按钮

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

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

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

预加载图片

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

复制代码
1 $.preloadImages = function () {
2   for (var i = 0; i < arguments.length; i++) {
3     $('<img>').attr('src', arguments[i]);
4   }
5 };
6  
7 $.preloadImages('img/hover-on.png', 'img/hover-off.png');
复制代码

检查图片是否加载完毕

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

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

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

自动修复损坏的图片

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

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

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

Hover 上的 Class 切换

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

1 $('.btn').hover(function () {
2   $(this).addClass('hover');
3 }, function () {
4   $(this).removeClass('hover');
5 });

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

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

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

禁用 input 字段

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

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

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

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

停止链接加载

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

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

淡入淡出/滑动开关

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

简单的手风琴效果

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

复制代码
 1 // Close all panels
 2 $('#accordion').find('.content').hide();
 3  
 4 // Accordion
 5 $('#accordion').find('.accordion-header').click(function () {
 6   var next = $(this).next();
 7   next.slideToggle('fast');
 8   $('.content').not(next).slideUp('fast');
 9   return false;
10 });
复制代码

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

使两个 Div 高度一样

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

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

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

复制代码
1 var $columns = $('.column');
2 var height = 0;
3 $columns.each(function () {
4   if ($(this).height() &gt; height) {
5     height = $(this).height();
6   }
7 });
8 $columns.height(height);
复制代码

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

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

在新标签/窗口打开站外链接

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

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

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

通过文本找到元素

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

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

视觉改变触发

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

复制代码
1 $(document).on('visibilitychange', function (e) {
2   if (e.target.visibilityState === "visible") {
3     console.log('Tab is now in view!');
4   } else if (e.target.visibilityState === "hidden") {
5     console.log('Tab is now hidden!');
6   }
7 });
复制代码

Ajax 调用的错误处理

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

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

插件链式调用

jQuery 支持链式调用插件,以减缓反复查询 DOM,并创建多个 jQuery 对象。看下面示例代码:

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

上面这段代码,可以通过链式操作大大改进:

1 $('#elem')
2   .show()
3   .html('bla')
4   .otherStuff();

还有另外一种方法,把元素缓存在变量中(前缀是  ):

1 var $elem = $('#elem');
2 $elem.hide();
3 $elem.html('bla');
4 $elem.otherStuff();
阅读更多
个人分类: javascript
上一篇在W3C标准定义的阻止事件向父容器传递的方法
下一篇bootstrap栅格布局
想对作者说点什么? 我来说一句

jQuery 常用代码段

2017年03月13日 20.8MB 下载

jQuery全套十五个系列视频教程

2016年03月15日 82B 下载

超实用的jquery代码段 源码

2015年09月12日 18.24MB 下载

ASP.NET课程设计案例精编

2007年12月25日 1.67MB 下载

50个必备的实用jQuery代码段

2012年06月09日 101KB 下载

十五个常用Linux命令行总汇

2011年08月21日 31KB 下载

没有更多推荐了,返回首页

关闭
关闭