新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

直到它滚动到文档的顶部

援助提升你jQuery应用的拾伍个我们都熟谙的jquery小技艺,分享给我们

  • 归来顶端开关
  • 图表预加载
  • 剖断图片是还是不是加载完
  • 活动修补破损图像
  • Hover切换class类
  • 禁止使用输入
  • 停下正在加载的链接
  • toggle fade/slide
  • 简易的手风琴
  • 使多个DIV同等中度
  • 在浏览器标签/新窗口展开外界链接
  • 听他们讲文件获取成分
  • 看得出变化的触发
  • Ajax调用错误管理
  • 链式操作

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皮秒中让页面滚动,直到它滚动到文书档案的顶上部分。

备注:来看有的scrollTop的调皮行为 。

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缓存方法是最佳的做法,导致更加短、越来越快的代码。

如上就是本文的全体内容,希望帮忙大家抓好jQuery应用手艺。

您恐怕感兴趣的稿子:

  • 询问jQuery技能来进步你的代码(个人感觉极度jquery的手册很正确)
  • 关于jQuery UI 使用体验及本事
  • 至于jQuery新的平地风波绑定机制on()的行使才干
  • jquery的接纳器的利用本事之怎么样抉择input框
  • jquery操作复选框(checkbox)的十二个小技术计算
  • 编写高效jQuery代码的4个标准化和5个技巧
  • jQuery提交八个表单的小手艺
  • jquery中EasyUI使用技艺总计
  • jquery品质优化高端技巧
  • jQuery前端开辟叁拾多少个小本领

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:直到它滚动到文档的顶部

您可能还会对下面的文章感兴趣: