Jquery插件（常用的插件库）
作者：一生的风景
转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html
随着Jquery知识点的结束，我也开始接触到框架来了。
开始的时候，总是听到插件和框架等词，我疑惑框架和插件是啥有啥区别？？
插件可以说有无数种，在网页中任何一种功能都可以被叫做插件，单独提取出来，可以供别人使用，而框架是一个超大好的的插件，它将各种方法融合成一体，使用者可以使用它来构造不同的功能。插件则专注于一种，往往只有一种功能 。
打个比方比如前面学习的jquery，jquery就是一个框架，在jquery插件库里http://www.jq22.com/有数不胜数的插件，这些插件绝大部分基于jq框架来编写。
理解完插件和框架的区别，下面来写一写这几天初步学习的插件库
1.jquery 对于我而言肯定是一个熟悉的框架了
官网网址：https://jquery.com/
插件库：http://www.jq22.com/
这里简单的介绍一下jquery ：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
2.Select2 官网网址：https://select2.org/
3.Fullpage 官网网址：https://alvarotrigo.com/fullPage/#page1
4.lazyload 官网网址：https://appelsiini.net/projects/lazyload/
5.Swiper 官网网址：https://www.swiper.com.cn/
6.nice-validator 官网网址 ：https://validator.niceue.com/docs/getting-started.html
以上提及的都是插件库，每一个有着不同的功能，jquery在这里我就不在赘述了。我就从Select2开始写
select2是一款基于jquery的功能丰富的下拉列表插件。这就说明了使用select2必须要有jquery依赖，就是要先导入jquery库，然后在导入select2插件库，然后这是一款关于下拉列表的插件。
使用方法：首先去下载压缩包文件 下载地址：https://codeload.github.com/select2/select2/zip/develop下载完成解压后在文件中我们需要找到相关的js文件和css文件，我们所需要的的就是这两个文件：在dist文件夹下有css和js，js有.js文件和min.js文件，css也是一样的。如下图所示
min.js是压缩版，没有逗号空格等等，体积小传输效率快，但可读性较差可以自行想象一下js代码就一行的场景 .js是没压缩的俗称开发版，可读性较好，易于debug调试和更改；但是体积相比较而言大一些，效率低。我采用压缩版的我不改bugQAQ 这段话或许就解决了心中的疑问
我们将css和js文件复制到我们的项目中就可以开始使用这个插件了。
这个是一个案例效果图接下来就根据这个案例来编写。
首先一点也是重中之重，导入css和js文件，jquery插件库优先导入，js cs就是我们上面复制到项目的文件，如下
在body里面写上一个普通的下拉列表：
我把js注释一下看看效果如何：
这个与和我们的效果图有着很大的区别，如何使用这个插件呢，我们不妨看看文档（虽然全是英文）
在基本语法上有着这样的语句（我们把他定义到我们的案例中去）：.js-example-basic-multiple是一个选择器
在案例中我们如下编写 （效果如右）：
这就是select2的威力，我们就使用了一行js代码就将一个普通的下拉列表变成了这样的的一个视觉效果不错的下拉列表（宽度可以修改，select2内置了很多的属性可以查看文档）。
例如给下拉列表设置宽度只需要如下写（使用大括号编写属性，用逗号分隔每个属性）
在select2文档的第三项中的Options里面有一张配置表里面涵盖了select2所有的属性（英文差的我看的有点吃力）
案例中简单的写了两个属性
插件的出现就是为了简单化代码，让我们少些了很多代码。使用起来方便简洁，就是这样select2的简单案列完成了，select2专注于选框，很多属性，可以去文档一一查阅我这里的介绍就结束了。
翻译过来就是 全屏的意思，我想已经猜出来了，这是一款全屏的插件，整个页面简洁大方，整个屏幕就是一张页面，它的官网就是一个很好的实 例 https://alvarotrigo.com/fullPage/#page1。这样的页面展示很受人喜欢，我相信大部分人都曾见过。
使用方法 同样下载压缩提取js 、css文件 下载地址 https://codeload.github.com/alvarotrigo/fullPage.js/zip/master
这个官网有一点优势emmmmmm他有中文模式 左上角可以选择
将css js复制进自己的项目里面引入js css 同样注意的依赖jquery优先导入jquery库如下：
我们可以查看文档编写（文档中有这样的一句话也就是在html文件中必须有着个声明，所以复制代码是要仔细不要复制掉了）
将这段代码复制到body里开始编写页面 在div的class值，section 以及后面的slide是不能更改的，我们必须按照fillpage的规则来 但最外层div的id可以直接设置，用于js代码中的选择
在js中如下编写（首先我们就用上了sectionsColor属性 定义背景颜色，一一对应）
当想定义横向切换时，这时候slide就登场了 ，将下面代码嵌套到<div class = \”section\”></div>中
它将会产生一个横向轮播图 注意 slide section 不可以更改 如下图所写:
效果如下：
当然插件也并不是万能的，fullpage无法设置字体大小所以需要自己定义大小 下面是自定义样式
在fullpage文档上有着很多属性（往下翻的话有对这些属性一 一的解释）
在我的案列中写了几个案例js代码如下：
文档的属性还算写的清晰，所以可以一点点编写 这一节的效果图不好截我把代码结构写上
这样子fullpage的案列就完结了，跟官网页面相似可以试着运行一下子。
lazyload 译为延迟加载， 又叫懒加载 在这个流量的时代，懒加载的出现是非常nice的，它为用户节省流量的消耗，提高性能，当一个高清图片网站一张页面几十张甚至上百张图片时，没有懒加载，它将会将所有的图片都加载出来，这就导致流量的浪费，降低性能，影响了用户的体验，而懒加载的作用是当用户看到这张图片时，它才开始加载出来，这样子就节省了大量的流量，而且优化了性能，提高了用户体验。
使用方法和上面一样下载lazyload插件包：https://codeload.github.com/tuupola/lazyload/zip/2.x
使用方法很简单，因为它只有一个功能就是延迟加载，所以我就直接上代码了 (注意在下载文件中找到对应的css，js文件复制到自己的项目中) lazyload没有css文件
我使用了12张图片然后js就一句，就可以实现懒加载功能
要为每一张图片添加class = “lazyload” ，且不能使用src 必须使用data-src 下面就来写一写怎么看两者的区别
普通加载：
懒加载：
懒加载的用法简单，但它存在的意义不凡，有些框架也会内置懒加载功能 列如上面介绍的fullpage插件
所以，懒加载的使用结束，或许现在感觉不它的作用，但是以后的编程日子里我想我百分百会和它再次的碰面。
Swiper 译为猛击者，确实在视觉上它的确很吸引我，首先它是一款触摸滑动插件 它与fullpage相似又有着各自的特点。
用swiper来做轮播 ，导航我想是很好的选择 swiper不依赖jq所以当项目中不需要jq时可以不用到jquery库
同样先下载swiper的包：https://www.swiper.com.cn/download/swiper-5.3.7.zip 在文件中找到对应的js css文件，复制到自己的项目然后导入如下：
先上一张效果图：
如图所示一款很炫酷的轮播图可以说swiper的中文文档非常的nice，思路清晰。就是emmmm属性有点多一时半会看完我现在想着，根据以上的插件库案列
这个插件的使用就应该不用我来再做赘述了，我就直接粘贴代码代码如下：
不管是什么插件或者框架，它的使用方法都万变不离其宗。相似是 他们的共同点，更何况swiper的文档看着这么的舒服
nice-validator 插件是一款比关于验证表单的插件，当用户注册时，来判断注册手机号码是否合法，是否为空，密码与确认密码是否相等，邮箱是否合法等等等等。
同样先下载:https://codeload.github.com/niceue/nice-validator/zip/master 复制对应的css js文件 到项目并导入，如下：
以案列为准，由于没有css我直接手写了有个简单的css样式。
当然html的表单也是手写对于样式，id class的名称这些，这款插件与其他的不同，可以自己定义：
js写法：无论那样的写法他实现的功能是一样的
这些属性可以看看文档里面的介绍（我简单的截取两张，更多属性一步官网 https://validator.niceue.com/docs/getting-started.html）
自定义规则
内置规则
这款插件的属性还是蛮多的 在常用规则整理中有着常用的规则。
对了这里有一个绕的地方（我单独截出来反正我看着的时候看半天）
就这样，这款插件有没有过多的介绍了。有很多坑和细节还得自己去真正用的时候去看
以上的五款插件全部介绍完成，案列源码下载：https://files.cnblogs.com/files/2979100039-qq-con/jqy_example_10.zip
我想各位小伙伴们看完这篇文章，也或多或少的对插件或者框架的使用有些了解了，但要明白一件事纸上得来终觉浅的道理，
有心人想要去学习一样东西，他就不止是想还要做。所以勤加练习是学好编程的不灭准则。
学习中，有地方错误还请指正。
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
作者：一生的风景
转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html
前端基础：jQuery
Introduction to jQuery
- jQuery 是一个快速、简洁的 JavaScript 框架，是目前最流行的 JavaScript 程序库，它是对 JavaScript 对象和函数的封装
- jQuery 的设计思想是 Write less, do more
- 实现隔行变色效果，JavaScript 要循环加判断，而 jQuery 只需一句关键代码
jQuery Function
- 访问和操作 DOM 元素
- 控制页面样式
- 对页面事件进行处理
- 扩展新的 jQuery 插件
- 与 Ajax 技术完美结合
jQuery 能做的 JavaScript 也都能做，但使用 jQuery 能大幅提高开发效率
jQuery Advantages
- 体积小，压缩后只有 100 KB 左右
- 强大的选择器
- 出色的 DOM 封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
jQuery Usage
jQuery 作为一个单独存在的 js 文件，并不会与其他的 js 文件发生冲突
基本的语法介绍
工厂函数 $()：将 DOM 对象转化为 jQuery 对象
选择器 selector：获取需要操作的 DOM 元素
方法 action()：jQuery 中提供的方法，其中包括绑定事件处理的方法 “$” 等同于 “jQuery”
例如：
jQuery 对象与 DOM 对象
DOM 对象和 jQuery 对象分别拥有一套独立的方法，不能混用
如果要混用它们，就要进行转换
- DOM 对象转 jQuery 对象
- jQuery 对象转 DOM 对象
选择器基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。
层次选择器属性选择器过滤选择器事件鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件。
键盘事件
用户每次按下或者释放键盘上的键时都会产生事件。
表单事件
当元素获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件。
鼠标悬停复合事件
hover() 方法相当于 mouseover 与 mouseout 事件的组合。
连续点击复合事件事件的动态绑定
对 dom 元素绑定事件的另一种写法
- 绑定一个事件
- 绑定多个事件
元素的隐藏和显示改变元素的宽和高（带动画效果）
- show(speed)：显示
- hide(speed)：隐藏
- toggle(speed) 等价于 show + hide：显示的隐藏，隐藏的显示
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：\”slow\”、\”fast\” 或毫秒
改变元素的高（拉伸效果）
- slideDown(speed)：显示
- slideUp(speed)：隐藏
- slideToggle(speed) 等价于 slideDown + slideUp
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：\”slow\”、\”fast\” 或毫秒
不改变元素的大小（淡入淡出效果）
- fadeIn(speed) 显示
- fadeOut(speed) 隐藏
- fadeToggle(speed) 等价于 fadeIn + fadeOut 动画
- fadeTo(speed, 透明度) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：\”slow\”、\”fast\” 或毫秒
链
链是允许在同一个元素上在一条语句中运行多个 jQuery 方法，可以把动作/方法链接在一起。
例如：点击一次按钮，让 div 完成 4 个指定动作：
- 背景变粉
- 字体变绿
- 向上收缩
- 向下拉伸
DOM 和 CSS 的操作属性函数
attr(\”属性\”) 获得元素的属性值。
attr(\”属性\”, \”新值\”) 修改元素的属性值。
attr(样式参数) 样式参数可以写成 json 格式。
val() 获得表单元素中的 value 值
val(\”x\”) 修改表单元素中的 value 值
html() 获得元素中的内容（标签 + 文本）
html(\”x\”) 修改元素中的内容（标签 + 文本）
text() 获得元素中的文本
text(\”x\”) 修改元素中的文本
样式函数
css(\”属性\”) 获得该属性值
css(\”属性\”, \”值\”) 设置属性的值
css({json}) 设置多个属性的值
width() 获得元素的宽度
width(number) 修改元素的宽度
height() 获得元素的高度
height(number) 修改元素的高度
类样式函数
addClass() 为元素添加类样式
removeClass() 将元素的类样式移除
toggleClass() 样式的切换；有->无，无->有
节点操作遍历节点祖先元素
用于向上遍历 DOM 树的方法
- parent() 返回被选元素的直接父元素，仅仅是上一级
- parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分
同辈元素
next() 获取紧邻匹配元素之后的元素
prev() 获取紧邻匹配元素之前的元素
siblings([selector]) 获取位于匹配元素前面和后面的所有同辈元素
后代元素
后代是子、孙、曾孙等等
- children([selector]) 方法返回被选元素的所有直接子元素
- find(选择器) 方法返回被选元素的后代元素，一路向下直到最后一个后代
元素的过滤
first() 过滤第一个元素
last() 过滤最后一个元素
eq(index) 过滤到下标为 index 的元素
not() 除了什么之外的元素
is() 返回布尔，判断是不是这种元素
案例手风琴特效购物车结算
car.js
想了解更多，欢迎关注我的微信公众号：Renda_Zhang
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
