jQuery 在 2007年 7月发布了 1.1.3版本。从开始的 1.x 版本至现在的 3.x 版本,版本数量不少于 60 个。 那么该如何选择适合项目的版本呢?本篇文章,推荐一下 jQuery的版本

区别:

  • 1.x:兼容IE678,但相对其他版本文件较大,官方制作BUG维护,功能不再增新,最终版本1.12.4(2016年5月20日)
  • 2.x:不兼容IE678,相对1.x文件较小,官方只做BUG维护,功能不再更新,最新版本2.2.4(2016年5月20日)
  • 3.x:不兼容IE678,只支持最新的浏览器,很多老的jQuery插件不支持这个版本,相对于1.x文件较小,提供不包含Ajax/动画API版本。

电脑端 推荐选择 jQuery 1.9 版本,理由如下:

  • 兼容IE8,在当下电脑端兼容IE8还是有需要的(管理系统除外)。
  • API与更高版本基本一致,又将低版本的不足之处进行了修复,比如:选择器的性能、方法名的不规范等等
  • 在1.9版本中有jQuery1.7中引进的事件处理函数界的一哥 “.on()” 函数。

 

移动端 推荐选择 jQuery 3.x 版本,理由如下:

  • 新的肯定更好啊,不好还需要更新吗?这里不需要理由。
  • 手机浏览器使用的内核都是最新的不存在浏览器兼容问题,上最新的干就完了

 

不推荐:低于 jQuery 1.7 的版本

  • 与现在的高版本API相差比较大;
  • 选择器等各方面性能不高。
  • 1.7使用.bin 不是 .on 和其他插件有兼容问题

 

不推荐:2.x 版本:

  • 存在的周期短(2.0.0版本开始 至 2.2.4结束);
  • 不如1.9版本能兼容IE8;
  • 现如今 3.x也早以发布再使用 2.x 版本意义 不大。

 

怎么选择类型:

  • Development version :原版,有统一的格式,格式标准,体积较大,方便阅读(是可读的代码),用于测试、学习和开发,,一般在网站建设时使用,便于调试。
  • Production version :优化压缩后的版本(删除空格等,文件较小,但不利于阅读),建议程序发布时使用,用于实际的网站中,已被精简和压缩。
  • jQuery map :map文件能够被用来在某些现在浏览器上调试压缩后的jQuery文件,map文件可以增强调试的体验,对于使用jQuery的用户来说,一般不需要下载改文件。

总结一句话 , 电脑端使用jQuery1.9 , 手机端使用最新jQuery,干就完了奥利给

javaScript库的概念

仓库:可以把很多东西放到这个仓库里面.找东西只需到仓库里面查找就可以了

javaScript库:即library,是一个封装好的特定的集合(方法和函数),就是在这个库中,封装了很多预定义好的函数在里面,比如动画animate , hide ,show 比如获取元素等,就是一个js文件,里面对我们原生js代码进行了封装,存放到里面.这样我们可以快速高效的使用这些封装好的功能了

常见javaScript库

jQuery 的概念

jquery 是一个快速,简洁的javaScript 库 ,设计宗旨’write less , do more’ , 写更少做更多

jquery 封装了 JavaScript 常用的功能代码,学习jquery本质就是学习调用这些函数.

 

jQuery顶级对象$

  • $是jQuery的别称,在代码中可以使用$代替jQuery,通常都直接使用$
  • $是jQuery的顶级对象,相当于原生JavaScript中的window.把元素利用$包装成jQuery对象,就可以调用jQuery的方法

 

jQuery对象和DOM对象

  • 用原生js获取的对象是DOM对象
  • 用jQuery方式获取过来的是jQuery对象
  • jQuery对象本质利用$对DOM对象包装后产生的对象(伪数组形式存储)
  • jQuery对象只能使用jQuery方法,DOM只能使用javaScript原生方法

jQuery对象和DOM对象相互转换

迭代(重要)

遍历内容部DOM元素(伪数组形式存储)的过程就是

 

本地存储特性

  • 数据存储在用户浏览器中
  • 设置读取方便,甚至刷新页面也不会丢失
  • 容量较大,sessionStorage约5M, localStorage约2M
  • 只能存储字符串,可以将对象JSON.stringify()编码后存储

window.sessionStorage

  • 生命周期为关闭浏览器窗口 (简单理解生命周期 ,就是什么时候死 ,什么时候消失)
  • 在同一个窗口(页面)下数据是可以共享
  • 以键值对的形式存储使用

window.localStorage

  • 生命周期永久有效,除非手动删除否则关闭页面也会存在
  • 可以多窗口(页面)共享(统一浏览器可以共享)
  • 以键值对的形式存储

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

 

SuperSlide 致力于解决网站大部分特效展示问题

网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!
从此无需网上苦苦寻觅特效,无需加载n个插件,无需害怕代码冲突,你需要的只是一个SuperSlide!
还可以多个SuperSlide组合创造更多效果哦~

(兼容包括ie6的绝大部分浏览器)[当年的你是否这样?]

 

iScroll,网络平滑滚动

iScroll是一种高性能,占用空间少,无依赖的多平台javascript滚动器。

它适用于台式机,移动电视和智能电视。它已针对性能和尺寸进行了优化,以在现代和旧设备上提供最平滑的结果。

iScroll不仅可以滚动。它可以处理需要通过用户交互移动的任何元素。它为您的项目添加了滚动,缩放,平移,无限滚动,视差滚动,轮播,并且仅以4kb的速度做到了这一点。给它扫帚,它也会打扫你的办公室。

即使在本机滚动就足够好的平台上,iScroll也会添加其他方式无法实现的功能。特别:

  • 即使在动量期间,也可以对滚动位置进行粒度控制。您始终可以获取并设置滚动条的x,y坐标。
  • 可以使用用户定义的缓动功能(反弹,弹性,后退…)自定义动画。
  • 您可以轻松地挂钩到大量自定义事件(onBeforeScrollStart,onScrollStart,onScroll,onScrollEnd,flick等)。
  • 开箱即用的多平台支持。从较旧的Android设备到最新的iPhone,从Chrome到Internet Explorer。

 

1.打开浏览器按F12,点击sources选项卡,找到你想要的代码,

2.在你想要打断点的行号前,点击鼠标会有一个红色小圆点.

3.刷新浏览器,你会发现浏览器比之前有些许变化

4这个时候你只需要点击右下方上一步下一步,他就会一步一步的执行了

1.下载highlight.js高亮插件

进入官网你会看见获取代码这里是的版本是9.15.6

然后你会看见有三种获取代码的方式,第一种使用过cdn第二种是直接下载代码第三种是npm进行安装,这里我们介绍第二种下载。

首先先勾选你要高亮的语言勾选完成后在下方有一个下载,

到这里下载就完成了。

2.配置highlight.js

先不要着急引入样式,我们先看看highlight.js给我提供的85种样式

我个人还是比较喜欢a11ydar你们可以按照自己的喜好进行挑选,然后记住名字,到下载的文件中进行引入,下面就是下载解压后的文件,点击进入styles`中

你会看到,很多css,把你从官网上选中的名字记住然后从这里找到,最后引入。

接下在开始配置了。

配置完成后我们就可以使用了

1.下载

https://github.com/fengyuanchen/distpicker

2.使用

话不多说直接源码

  1. 使用Laravel,Mix和Vue.js,
  2. 已经知道Laravel的.env功能并问自己那个是什么?

前缀为MIX_您甚至不必重新输入现有的变量值,只需按原样使用它们

然后你就可以在vue文件当中任意位置使用了