jQuery一些插件

插件"/>

jQuery一些插件

文字目录

• 一、轮播图插件slick({})
• 二、懒加载插件lazyload()
• 三、全屏滚动插件fullpage({})
• 四、日期选择器datepicker({})
• 五、表单校验validate({})
• • 1.常用配置
  • 2.常用自定义属性
• 六、插件机制
• 七、工具方法

一、轮播图插件slick({})

轮播图
常用配置
autoplay:自动播放 默认false
arrows:是否显示翻页按钮 默认true
preArrow:自定义上一页按钮
nextArrow：自定义下一页按钮
dots:是否显示指示器 默认false

 <!-- 测试用标签 --><div class="slider-container"><!-- 轮播图区域 --><div class="slider"><div><img src="./images/1.png" alt="" /></div><div><img src="./images/2.png" alt="" /></div><div><img src="./images/3.png" alt="" /></div><div><img src="./images/4.png" alt="" /></div><div><img src="./images/5.png" alt="" /></div></div><!-- 自定义左右箭头 --><div class="control"><div class="prev">上一个</div><div class="next">下一个</div></div></div>
//	1.导入jQuery<script src="./jquery/jquery-3.5.1.js"></script>2.导入插件、导入CSS（需要的话）<script src="./slick/slick.js"></script><script>$('.slider').slick({// autoplay: true,// arrows: false,prevArrow: '.prev',dots: true,})</script>

二、懒加载插件lazyload()

图片懒加载

    <!-- 图片 --><img class="lazyload" data-original="./images/1.png" alt="" />  <img class="lazyload" data-original="./images/2.png" alt="" />//src属性用data-original属性填代替<!-- 先导入jQuery --><script src="./jquery/jquery-3.5.1.js"></script><!-- 导入lazyload插件 --><script src="./lazyload/jquery.lazyload.js"></script><script>$('.lazyload').lazyload()</script>

三、全屏滚动插件fullpage({})

全屏滚动

四、日期选择器datepicker({})

日期选择器

五、表单校验validate({})

1.常用配置

2.常用自定义属性

后面两个自定义属性要结合description使用

		<inputdata-requireddata-pattern=".{6,}"data-describedby="password-error"data-description="password"type="password"name="password"/><span class="error" id="password-error"></span>  //id为data-describedby属性值$('form').validate({sendForm: false,description: {   //配合description使用password: {    //表单项description属性值required: '密码不能为空!',pattern: '密码的长度必须大于等于6!'},nickname: {required: '昵称不能为空!'},agree: {required: '必须同意用户协议!'}},valid () {console.log('验证成功')},invalid () {console.log('验证失败')}})

转dom对象，使用jQuery未封装的方法

	<button class="play">播放</button><button class="pause">暂停</button><br /><video src="./video/video.mp4"></video>// 1.get方法let $btn = $('button')console.log('$btn:', $btn)let pauseBtn = $btn.get(1)console.log('pauseBtn:', pauseBtn)// 2. 中括号let playBtn = $btn[0]console.log('playBtn:', playBtn)// 3. 播放视频$('.play').click(function () {// $('video').play()// $('video').trigger('play')let video = $('video')[0]console.log('video:', video)video.play()})// 4. 暂停视频$('.pause').click(function () {// $('video').pause()// $('video').trigger('pause')let video = $('video')[0]console.log('video:', video)video.pause()})<form action=""><input type="text" placeholder="请输入用户名" /><br /><input type="password" placeholder="请输入密码" /><br /><input type="button" class="reset" value="重置" /></form>// 5. 重置表单$('.reset').click(function () {// $('video').play()// $('form').trigger('reset')let form = $('form')[0]console.log('form:', form)form.reset()})

表单序列化 serialize()

	<form>昵称: <input type="text" name="nickname" /><br />爱好: <input type="text" name="habbit" /><br />好友: <input type="text" name="friend" /><br /><button>提交</button></form>$('form').submit(function (event) {let data = $(this).serialize()console.log('data:', data)// event.preventDefault()return false})

六、插件机制

		<div class="box"></div>// 1.基本使用$.fn.extend({sayHello () {console.log('吃了没!')console.log(this)  //调用的jQuery对象}})let $box = $('.box')console.log('$box:', $box)$box.sayHello()// 2.修改背景色插件$.fn.extend({setBgColor (color) {this.css('backgroundColor', color)}})$('.box').setBgColor('orange')$('p').setBgColor('pink')$('h3').setBgColor('yellowgreen')

七、工具方法

1. 遍历数组
   each(数组，function(下标，值){})
2. 遍历并返回新数组
   map(数组，function(值){返回新的值})