每个前端应该知道的jquery 细节

每个前端应该知道的jquery 细节

一组简单的小技巧收集,让你玩转jquery

1.回到顶部

不需要其他插件,简单通过使用jquery 中的 animate and scrollTop 方法,就能实现

// 回到顶部
$('a.top').click(function (e) {
  e.preventDefault();
  $(document.body).animate({scrollTop: 0}, 800);
});
<!--创建一个回到顶部的按钮 -->
<a class="top" href="#">Back to top</a>

通过 改变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.检测图片是否加载完成

有时候你需要去知道图片是否真正加载完成.

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

4.优雅处理加载不成功的图片

使用一张默认的图片来代替加载不成功的 图片

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

5.Hover事件切换类

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

混合写法,

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

6.禁用一个表单元素

比如有时候 ,只想提交一次表单,就可以设置禁用

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

如果想解禁 ,

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

7.阻止超链接的默认行为

有时候我们常常用超链接作为按钮,但是超链接本身是有链接 会跳转的,假如我们不想要跳转的时候 就需要阻止默认行为

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

8.fade(渐入渐出)效果和slide(下拉收起)效果的切换

// 渐入渐出
$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});
// 下拉收起
$('.btn').click(function () {
  $('.element').slideToggle('slow');
});

9.动态设置两个div的高度一样

不管他们的内容怎样 他们的高度都会保持一致

通过css设置 最低高度值,

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

无论内容是什么 都保持高度一致

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

10.新的标签或者窗口打开外部链接

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

注意: window.location.origin 不兼容IE10 解决方案

11.根据内容来寻找元素

通过 jquery的contains()方法

var search = $('#search').val();
$('div:not(:contains("'+search+'"))').hide();//表示如果没有包含search内容的都隐藏

前端打小怪升级笔记
主要是我开发过程当中遇到的问题记录

被偏爱的,有恃无恐吧了

4.7k 声望
156 粉丝
0 条评论
推荐阅读
vue-cli3+babel7项目兼容IE
默认忽略node_moudules,但是有些包可能并没有做好转化,所以需要我们转化vue官方也提供了比较好的属性transpileDependencies来将node_modules里面的部分包加到babel的转化如下配置,在vue.config.js中添加

fashen0071阅读 2.5k

Ajax实现搜索联想 搜索关键词提醒 无刷新搜索
通过javascript监听搜索框的内容,调用后端即可。(1)javascript监听搜索框的内容(2)把搜索框的关键词传给后端进行搜索(3)搜索到结果,遍历到页面

TANKING1阅读 4.4k

Promise: 异步编程的理解和使用
JavaScript 中,Promise 的流行是得益于 jQuery 的方法 jQuery.Deferred(),其他也有一些更精简独立的 Promise 库,例如:Q、When、Bluebird。

后除2阅读 789

使用原生js替换jQuery
前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大...

donggongai1阅读 454评论 1

【html + 原生js】input标签上传多张图片后如何转成base64数据并返回
前景摘要,最近帮后端同事解决了一个问题,他需要取到多选图片上传后的每个图片的base64数据。话不多说,直接上代码吧!页面部分(页面需要引入jq方可正常运行) {代码...} 逻辑部分 {代码...} 输入结果如下图所...

前端小高阅读 731

封面图
Y 分钟速成 jquery
jQuery是JavaScript的一个函数库,它可以帮你“写更少,做更多”。它集成了很多常见的JavaScript任务并且很容易调用。jQuery被世界各地的很多的大公司和开发者使用。它包括了AJAX,事件处理,文档操作以及很多其它...

小X学技术阅读 701

Jquery实现的Switch开关按钮(仿iOS开关)
1、swich主体switch-on 代表开启,如需设置默认关闭,可设置为 switch-off,themeColor 是主题色,zoom 可设置swich的大小,调整 zoom 的值即可调整大小。

TANKING阅读 637

封面图

被偏爱的,有恃无恐吧了

4.7k 声望
156 粉丝
宣传栏