www.qjdy.com-奇迹赌场 > www.qjdy.com官网 > 是不是觉得jQuery出了问题

原标题:是不是觉得jQuery出了问题

浏览次数:174 时间:2019-07-11

引子

jQuery的存在,让学习前端开辟的人备感前端越来越轻松入门了,用轻松的几行代码就可以完结须求,但是,你真的会用jQuery么,今世码运转后不可能看到本身预想的成效,是或不是以为jQuery出了难点,其实,难点可能出在了协和会不会用上边。上面罗列部分开支中时时遇上的选取实例,开采一下另一个例外的jQuery世界。

回去顶端按钮

利用jQuery里的animate和scrollTop方法,你便无需利用插件创制轻便的滚动到顶上部分动画。

$('.top').click(function (e) {
 e.preventDefault();
 $('html, body').animate({scrollTop: 0}, 800);
});

通过scrollTop的值来改动你想要滚动到的地方。其实您就是做了:在接下去的800阿秒中让页面滚动,直到它滚动到文档的顶上部分。

图表预加载

假若您的网页使用了过多潜伏图片文件(举个例子:鼠标悬停体现的图样),那么图片的预加载是有意义的:

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

判别图片是还是不是加载完

不经常你恐怕需求检查图疑似否已经加载成功,以便于能够继续实行相应的js代码:

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

早就碰着过的施用境况:有个别元素供给按图片的实际上尺寸来安装其尺寸,以相对布署格局放置。成分的大大小小设置能够在图纸加载成功后计算。

电动修补破损图像

举例你碰巧发掘在你的网址上发现破绽的图像链接,二个个去顶替他们是悲苦的。这一个轻易的代码能够省去数不胜数的难为:

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

就算你未有其他断开的链接,参加那代码也不会有其余影响。

禁止使用输入

一时你可能必要用表单的交由按键恐怕有个别输入框直到用户推行了有个别动作(举个例子:检查“小编已阅读条目”复选框)。在你的输入框上设置disabled属性,然后当您须要的时候启用该属性:

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

你需求做的只是亟需在输入框上再次运营prop方法,但设置的被禁止使用值是false:

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

对地不领悟prop函数的jQuery开垦者来讲,最常使用的是attr函数,恐怕付出比比较多先后都未有意识什么样难点,但是,在支付比方checkbox、radio、select时,会发觉使用attr无法让属性生效,认为是jQuery的bug,下边包车型客车话说attr和prop的行使提议:

在遇见要获得或安装checked,selected,readonly和disabled等性子时,用prop方法显明越来越好

使七个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());
});

听大人讲文件获取成分

透过jQuery中的contains()选用器,你能找到一个元素内的公文内容。倘诺文本海市蜃楼,则这些因素将被隐形:

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

足见变化的触发

当用户不再聚集恐怕另行聚集三个标签时触发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!');
 }
});

你或者感兴趣的稿子:

  • jquery实用本事之输入框提示语句
  • jQuery 操作input中radio的技巧
  • 14个值得开荒职员关心的jQuery开采工夫和体验总计【卓绝收藏】
  • jQuery前端开辟33个小能力
  • Jquery才具(必须调整)
  • jQuery操作Table本领大聚焦
  • Jquery使用小工夫汇总
  • 四个不允许错过的jQuery小本事
  • 司空见惯收藏的jquery本事
  • jquery关于事件冒泡和事件委托的本事及阻止与允许事件冒泡的三种完结形式
  • jQuery中的九十二个本事汇总

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com官网,转载请注明出处:是不是觉得jQuery出了问题

关键词: mg4355娱乐城

上一篇: 这里为$scope对象定义了myUrl变量

下一篇:没有了