学习与分享,当然还有生活~

jQuery

jQuery 插件开发基础篇

在前端框架漫天飞舞的时代,作为一个刚入前端坑不久的小白来说真的无所适从啊。。当然自己也在项目里尝试使用了MVVM类的框架,因为感觉数据驱动可以让我少些很多DOM操作的代码,效率提高很大(其实就是我DOM操作用的不熟哈哈哈)。。。嗯嗯偏题了,关于我眼中的前端,会在另一篇好好总结下,这篇主要来学习一下jQuery插件。 很多人都会说用原生js牛逼,用jQuery的多low,然而我并不同意,我觉得应该是js基础很重要,jQuery也是应该好好学习的,并不是一定要用自己造的轮子,jQuery是好好的轮子放在那里让我们学习和使用,不仅提高我们效率也让我们从中学习到很多处理问题的思路和想法,何乐而不为?还有最近很多jQuery要死,MVVM永生的论调我也是不同意的,在原生js没有提供很好的DOM操作标准之前,jQuery还是将长期存在的,MVVM减少了我们的DOM操作并不代表我们不需要DOM操作(MVVM主要减少的是数据类的DOM操作,其他表现类的操作还是它不擅长的,所以两者结合起来有何不可,虽然有人说不伦不类,但是新事物不一定非要替代旧事物,而应该是各取所长嘛。。个人之见咯)好啦。。又扯淡多了。。切入正题。 为什么突然想到研读一下这个问题呢,因为我还真没写过插件。。可能写过也不算不上哈哈哈。。确定目标后然后我就开始百度谷歌的一通乱搞,发现每个人都有每个人的写法和理由,一时间脑子里乱乱的,哎~突然想到与其太混乱还不如去官网看看官方推荐的写法应该是靠谱的哈哈,写法先了解一种嘛,体会个中思想才是重要的。 jQuery Object Method $("a"

vertical-align

css 实现竖直居中的 N 种场景及 N 种方法

刚开始工作的时候,css 里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜,搜,搜,半天才搜到合适的解决方法。然后下次遇到,呃,又忘了~ 后来仔细回忆了一下,其实CSS实现竖直居中是有几种不同的应用场景的,需要分别使用不同的解决方法。这也是为啥每次都觉得,诶上次那个解决方法好像不行呢?(原来并不是我智商的问题)好了废话不多说,记录下遇到的不同场景及解决方法,希望能对自己或者别人有所帮助。 ### inline 或者 inline-* 的元素竖直居中 可以借助 `padding`, `line-height`, `vertical-align` 等属性。有如下两种具体情景: 1. 单行竖直居中,如单行文本或者链接 这种情况,通过给元素上下添加相同大小的 padding 值即可实现竖直居中。 See the Pen RapmvY by Yawen DENG (@Simona_Deng) on CodePen. 如果~~老娘就不想使用 padding

js

js 数组用 for in 循环

今天写数组循环的时候隐约觉得不管object还是array都用forin循环不就得了,写的还少。。哈哈,不过好像在哪里看过不要这样做,查了下资料,综合一下原因,不要使用forin循环数组哦。 数组是跳跃型的 var a = []; a[5] = 5; for (var i = 0; i < a.length; i++) { //会按预想从零循环到5 } var a = []; a[5] = 5; for (var x in a) { //只会循环index5。。。。。 } 数组被添加了其他属性 Array.prototype.foo = 1; var a = [1, 2, 3, 4, 5]; for (var x in

css

图片不失真自适应水平垂直居中

想到了一个问题 今天在浏览网页的时候看到一种布局突然就想它是怎么实现的呢,看来下发现不是css实现的,是用js实现的觉得如果没有js帮忙呢,就尝试用css看看能不能实现,发现自己基础真的要好好补下了。。哈哈,anyway,需求如下: 图片在屏幕上方块中水平垂直居中 图片宽度和高度都是不确定的 图片宽度和高度自适应其容器,宽度和高度随着容器变化而变化,这时需保证宽高比不变即图片不被拉长或压缩;还需保证宽度和高度都不能超过原始值的大小,这样图片不会失真 尝试实现一下 常见的未知高度的垂直居中的方法选一种就好了。而不失真自适应的原理就是利用我不太常用的max-width: 100%; max-height=100%; 来保证第三条的实现。如果图片的实际宽或高超过了其容器,因为有上面max的限制,浏览器就会按照其容器的宽或高来限制其超出容器。因为图片高度和宽度都没有设为固定值,则他们的比例一直保持着。如果图片的实际宽或高没有超过其容器,则按原始大小呈现,即便容器再变大图片也不会受影响,自然不会变大失真了。有点儿绕。。。表达能力真作急。。。 代码如下: <div class="block"> <div class="pic-wrapper"> <