jQuery笔记

一、jQuery 基础

jQuery 是一个 JS 函数库（write less, do more），封装了 BOM 和 DOM 的一些函数、对象、方法等，如 CRUD（增删改查）、Ajax，使用 jQuery 的网站超过 90%，jQuery 是中大型 WEB 项目开发首选

1、jQuery 的用途

HTML 元素选择（选择器）（方便快速查找 DOM 元素）

HTML 元素操作（如增删改）

CSS 操作

HTML 事件处理

JS 动画效果

链式调用（如 a().b().c()）（通过在方法或函数（除了获取数据的方法）中最后返回 this（jQuery 对象），来实现可链式调用）

读写合一（方法中不传参表示读，传参表示写），若 jQuery 对象中包含多个 dom 元素，则统一读时只读第一个，写时是对所有元素写

隐式遍历（$(‘#box>li’).click(function(){}) 会对 box 下所有 li 加监听）

浏览器兼容

易扩展插件

ajax 封装

……

2、jQuery 的不同版本

1.x：用的最多，因为兼容老版本 IE，文件更大

2.x：部分 IE8 及以下不支持，文件小，执行效率更高

3.x：完全不再支持 IE8 及以下版本，提供了一些新的 API，提供不包含 ajax/动画 API 的版本

两种 js 库库文件：.js 和 .min.js

.js 文件是开发版（测试版）

.min.js 文件是生产版（压缩版），去掉空格、换行，并把变量都转成单个字母的形式

3、引入 jQuery

jQuery 库的大体结构如下

(functon(window){
    var jQuery = function(){
        return new jQuery.fn.init(xxx)
    }
    window.$ = window.jQuery = jQuery
})(window)

引入 jQuery 后相当于给 window 添加了两个属性 window.jQuery 和 window.$，两个的含义相同，表示的是一个函数，并且调用 jQuery 库返回的是一个对象

有两种引入 jQuery 的方式：服务器本地库引入、CDN 远程库引入

服务器本地库引入是把 jQuery 库文件保存在服务器中的文件夹下，使用 <script type="type/javascript" src="./jquery-1.12.13.js"></script> 引入 jQuery

CDN 远程库在项目上线时，一般使用比较靠谱的 CDN 资源库，减轻服务器负担，如免费的 CDN 资源库 bootcdn

4、使用 jQuery

把 jQuery 函数 当作函数使用 $(xxxx)，把 jQuery 函数当作对象使用 $.xxx()，如 $.each，$.trim

jQuery 函数是 jQuery 库向外暴露的，直接可用，而 jQuery 对象是执行 jQuery 函数产生的

jQuery 对象（$xxx）包含所有匹配的 n 个 DOM 元素的伪数组对象，是执行 $() 返回的就是 jQuery 对象

（1）jQuery 核心函数（$/jQuery）

jQuery 库向外直接暴露的就是 jQuery 函数 $/jQuery，引入 jQuery 库后，直接使用即可

jQuery === $   //true 

参数类型：

1）参数为函数：当 DOM 加载完成后，执行此回调函数

$(function(){})  //绑定文档加载完成的监听

2）参数为选择器字符串：查找所有匹配的标签，并将它们封装成 jQuery 对象

$('#btn').click(function(){})  //绑定点击事件监听，在回调函数中的 this 依然指向发生事件的 dom 元素 <button>

3）参数为 DOM 对象：将 DOM 对象封装成 jQuery 对象

$('#btn').click(function(){   //绑定点击事件监听，在回调函数中的 this 依然指向发生事件的 dom 元素 <button>
    alert($(this).html())  //参数为 DOM 对象，封装成 jQuery 对象后就可以调用 jQuery 的方法
})  

4）参数为 html 标签字符串：创建标签对象并封装成 jQuery 对象

$('<input type="text">').appendTo("div")  //把 <input> 插入 <div> 中

（2）jQuery 核心对象

执行 jQuery 函数 $() 返回的对象为 jQuery （核心）对象，一般名称前会加 $，通过 $obj.xxx() 使用

如 var $btn = $('#btn')

jQuery 对象内部包含的是 DOM 元素对象（一个或多个）的伪数组对象（能获取 length 且可用下标访问的对象）

jQuery 对象拥有很多有用的属性和方法，让程序员能方便地操作 dom

jQuery 对象的属性和方法

1）基本行为

length 或 size()，返回 jQuery 对象内包含的 dom 元素的个数

[index] 或 get(index)，返回的是对应位置的 dom 元素

each()，遍历 jQuery 对象内包含的 dom 元素，如下

$.each(数组,function(index,item){}) 或 数组.each(function(index,item){}) 隐式遍历数组，回调函数中第一个参数为数组中元素下标，第二个参数为遍历的数组中的当前元素

index()，得到在所在兄弟元素中的下标

var $buttons = $('button')
$buttons.each(function(index,domEle){
    console.log(index,domEle.innerHTML)
    console.log(this)  //this 表示数组中当前 dom 元素对象 domEle
})

$('#btn3').index()  //第三个按钮是所有按钮中的第几个

2）属性

操作内部标签的属性或值

3）CSS

操作标签的样式

4）文档

对标签进行增删改操作

5）筛选

根据指定的规则过滤内部的标签

6）事件

处理事件监听相关

7）效果

实现一些动画效果

二、jQuery 函数

1、选择器

选择器本身只是一个有特定语法规则的字符串，没有实质用处

它的基本语法规则使用的就是 CSS 的选择器语法，并对其进行了扩展

只有调用 $()，并将选择器作为参数传入才能起作用

$(选择器) 的作用：根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成 jQuery 对象返回

选择器分类：基本选择器、层次选择器、过滤选择器、表单选择器

（1）基本选择器

基本选择器是最常用的选择器

#id、element、.类、*、选择器1,选择器2,选择器n、选择器1选择器2选择器n

$('#div1').css('background','red')
或
$('#div1').css({'background':'red'})

（2）层次选择器

层次选择器用于查找子元素、后代元素、兄弟元素

祖先元素 后代元素，父元素 > 子元素，兄元素 + 弟元素（兄元素后紧跟着的某类型弟元素），兄元素 ~ 弟元素们（兄元素后所有的某类型弟元素）

（3）过滤选择器

过滤选择器是在原有选择器匹配的元素中进一步进行过滤，既不是找子元素也不是找兄弟元素

多个过滤选择器不是同时执行，而是依次执行

:first 第一个

:last 最后一个

:eq(index) 根据下标找出某个

:not(selector) 排除某些

:lt 下标小于

:gt 下标大于

:odd 奇数元素

:even 偶数元素

:hidden 隐藏

:visible 显示

[属性名] 某个属性

[属性名=属性值] 某属性为某值的元素

$('div:not(.box)').css('background','red')  //选择所有 class 属性不为 box 的div（这里包含没有 class 属性的元素）
$('li:lt(3):gt(0)').css('background','red')  //选择第二个和第三个 li 元素
$('li:gt(0):lt(3)').css('background','red')  //这里选出来是第二三四个 li 元素，而不是第二个和第三个 li 元素，因为先执行 :gt(0)，在选出的元素里再执行 :lt(3)
$('li:contains('xxx')').css('background','red')  //选择内容为 xxx 的 li 元素
$('li:hidden').length  //选择隐藏的 li 个数
$('li:hidden').length[0]  //选择第一个隐藏的 li
$('li[title]').css('background','red')  //选择有 title 属性的 li
$('li[title=xxx]').css('background','red')  //选择有title 属性值为 xxx 的 li

（4）表单选择器

:input 所有表单项，包括 <select> 等

:text、:checkbox、:radio、:checked（选中的项）

$(':text:disabled').css('background','red')  //选择不可用的文本输入框
$(':checkbox:checked').length  //多选框选择的个数
$(':submit')  //提交按钮
$('select>option:selected').html()  //所选下拉框的文本内容
$('select').val()  //所选下拉框 option 的 value 属性值

表单

表单对象属性

2、$工具（把 jQuery 函数当对象使用）

$.each() 遍历数组或对象中的数据

$.each(数组,function(index,item){}) 隐式遍历数组，回调函数中第一个参数为数组中元素下标，第二个参数为遍历的数组中的当前元素

$.each(对象,function(key,value){})  //遍历对象

$.trim() 去除字符串两边的空格

$.trim(字符串) 去除两端的空格，和字符串本身的方法 `字符串.trim()` 效果相同

$.type(obj) 得到数据的类型

$.type($)  //返回 'function'

$.isArray(obj) 判断是否是数组

$.isArray($('body'))  //false

$.isFunction(obj) 判断是否是函数

$.isFunction($)  //true

$.parseJSON(json) 解析 json 字符串转换为 js 对象/数组

var json = '{"nsme":"xxx",age:12}'  //其中 json 对象就是 {}
$.parseJSON(json)  //json 对象转为 js 对象，返回 js 对象
var json = '[{"nsme":"xxx",age:12},{"nsme":"yyy",age:10}]'  //其中 json 数组就是 []
$.parseJSON(json)  //json 对象转为 js 数组，返回 js 数组

3、属性

操作标签的属性、标签体文本

attr('属性名') 或 attr('属性名','属性值')：读写非布尔值的标签属性或自定义属性

prop('属性名') 或 prop('属性名',属性值) 读写布尔值的标签属性或标签的固有属性

removeAttr('属性名') 或 removeProp('属性名') 删除属性

addClass('class值') 添加 class 属性值

removeClass('class值') 移除指定 class 值

html() 或 html('xxx') 读写标签体文本

val() 或 val('xxx')：读写标签的 value

$(':text').val() 得到输入框 的文本

$(':text').val('xxx') 设置输入框 的文本

$('div:first').attr('title')
$('div').attr('name','xxx')
$('div').addClass('class值')
$('div').removeClass('xxx')  //移除所有 div 的 class 为 xxx 的 class
$('li:first').html('<h1>xxx</h1>')  //设置第一个 li 的标签体为 <h1xxx</h1>
$('div').removeClass('xxx')

attr 和 prop 的区别

（1）prop 多用在标签的固有属性、布尔值属性上，如 a 标签的 href，class，selected，checked 等

（2）attr 多用在自定义属性上

（3）jQuery 中用 attr 获取布尔值属性，且布尔值属性在标签体内没有定义的时候会得到 undefined

三、jQuery 对象

1、CSS

设置 style 样式

jQuery对象.css('属性') 或 jQuery对象.css('属性','值') 或 jQuery对象.css({多个样式对})：读写样式，返回的仍然是当前的 jQuery 对象，方法最后返回的是 this

位置

offset()：获取相对于页面左上角的位置，返回的对象包含 top 和 left 两个整数，该方法只对可见元素有效，（读）

offset({top:xx,left:xx})：设置相对于页面左上角的位置（写）

position()：获取相对于父元素左上角的位置，返回的对象包含 top 和 left 两个整数，（只能读）

scrollTop()：读取/设置滚动条的 Y 坐标

$(document.body).scrollTop()+$(document.documentElement).scrollTop()：读取页面滚动条的 Y 坐标（兼容 chrome 和 IE）

$('html,body').scrollTop(60)：滚动到指定位置（兼容 chrome 和 IE）

滚动条回到顶部的例子

//瞬间回到顶部
$('#btn').click(function(){
    $(html,body).scrollTop(0)
})

//平滑地回到顶部
$('#btn').click = function(){
    var $page = $('html','body')  //这里是用于后面设置，不能用于读取，因为有两个值
    var distance = $('html').scrollTop() + $('body').scrollTop()  //总距离
    var time = 500  //总时间
    var intervalTime = 50  //间隔时间
    var itemDistance = distance/(time/intervalTime)  //单位时间运动距离
    var intervalId = setInterval(function(){
        distance -= itemDistance
        if(distance<=0){
            distance = 0
            clearInterval(intervalId)
        }
        $page.scrollTop(distance)
    },intervalTime)
}

尺寸

（1）内容尺寸

height()：height

width()：width

（2）内部尺寸

innerHeight()：height+padding

innerWidth()：width+padding

（3）外部尺寸

outerHeight(false/true)：height+padding+border，若是 true 加上 margin，默认是 false

outerWidth(false/true)：width+padding+border，若是 true 加上 margin，默认是 false

2、筛选————过滤和查找

对包含多个 dom 元素的 jQuery 对象进行过滤是找出对象中的一个或多个元素，并封装成新的 jQuery 对象返回；

而查找是指查找对象内部某元素的父母、子孙后代或兄弟元素，并封装成新的 jQuery 对象返回

过滤

first()：jQuery 对象中的第一个 dom 元素组成的 jQuery 对象，返回的是 jQuery 对象（last()、eq(index)同理）

注意 jQuery对象.first() 返回的是 jQuery 对象，而 jQuery对象[0] 返回的是对象中包含的的第一个 dom 元素

filter('[属性名]=xxx') 过滤出属性为某值的元素，（对当前元素提要求）

filter('[属性名]!=xxx') 或 not('[属性名]=xxx') 过滤出没有某属性以及属性不为某值的元素，（对当前元素提要求并取反）

filter('[属性名][属性名]!=xxx') 过滤出有某属性并且属性值不为某值的元素

has('标签名') 过滤出元素中有子标签的元素，（对子元素提要求）

var $lis = $('ul>li')
$lis.first().css('background','red')  //相当于 $lis[0].style.background = 'red'
$lis.filter('[title=hello]')  //title 属性为 hello 的 li
$lis.not('[title=hello]')  //title 属性不为 hello 的 li
$lis.filter('[title][title!=hello]') //有 title 属性且title 属性不为 hello，相当于 $lis.filter('[title]').filter('[title!=hello]')
$lis.has('span') //有 span 子标签的 li

查找

children('条件') 查找子元素（直接子元素，而非后代）

find('条件') 查找后代元素

parent() 查找父元素

preAll('条件') 前面的所有的符合条件的兄弟元素

nextAll('条件') 后面所有的符合条件的兄弟元素

siblings('条件') 前后所有的兄弟元素

var $ul = $('ul')
$ul.children('span:eq(1)')  //ul 下的第 2 个 span 子标签
$ul.find('span:eq(1)')  //ul 下的第 2 个 span 后代标签
$ul.parent()  // ul 的父元素
var $li = $('#aa')
$li.preAll('li')  //id 为 aa 的 li 标签前面的所有 li
$li.siblings('li')  //id 为 aa 的 li 标签的所有兄弟 li

3、文档处理（CUD 增删改）

（1）添加元素

内部插入

append(content) 向当前匹配的所有元素内部的最后插入指定内容

$(content).appendTo($父) 向当前匹配的所有元素内部的最后插入指定内容，和上面效果相同

prepend(content) 向当前匹配的所有元素内部的最前面插入指定内容

$(content).prependTo($父) 向当前匹配的所有元素内部的最前面插入指定内容，和上面效果相同

外部插入

before(content) 将指定内容插入到当前所有匹配元素的前面

after(content) 将指定内容插入到当前所有匹配元素的后面替换节点

（2）删除元素

empty() 删除所有匹配元素的子元素，父元素本身还在，等价于 $('父 > *').remove()

remove() 删除所有匹配的元素（包括父元素本身和其下子元素）

$('#ul2').empty()
相当于 $('#ul2>*').remove()

（3）替换元素

replaceWith(content) 用指定内容替换所有匹配的标签删除节点

replaceAll(选择器) 用指定元素替换所有匹配的标签删除节点

var $ul1 = $('#ul1')
$ul1.append('<span>xxx</span>')  //相当于 $('<span>xxx</span>').appenTo($ul1)
$ul1.prepend('<span>xxx</span>')  //相当于 $('<span>xxx</span>').prepenTo($ul1)
$ul1.children('li[title=hello]').before('<span>xxx</span>')  //在 id 为 ul1 的 ul 下的 li（title 为 hello）的前面添加 span
$('#ul2>li[title=hello]').replaceWith('<p>xxx</p>')//在 id 为 ul2 的 ul 下的 li（title 为 hello）全部替换为 p

4、事件处理

（1）绑定事件

方式一：jQuery对象.事件名(function(){})，这种方式好写但并不通用，有些事件没有这种绑定方法

方式二：jQuery对象.on('事件名1 事件名n',function(){})

优缺点：方式一编码方便，但只能加一个监听，且有的事件监听不支持

方式二编码不方便，可以添加多个监听，且更通用

常用：click、mouseenter/mouseleave、mouseover/mouseout、focus/blur

$('#image').on('load',function(){}) //监听图片加载完成，这时只能用 on

绑定鼠标点击事件

方式一：jQuery对象.click(function(){})

方式二：jQuery对象.on('click',function(){})

绑定鼠标移入移出事件

方式一：jQuery对象.mouseenter(function(){}) 和 jQuery对象.mouseleave(function(){})

方式二：jQuery对象.on('mouseenter',function(){}) 和 jQuery对象.on('mouseleave',function(){})

方式三：jQuery对象.hover(function(){console.log('鼠标移入，绑定在mouseenter')},function(){console.log('鼠标移出，绑定在mouseleave')})

（2）解除事件绑定

jQuery对象.off('事件名')

（3）事件坐标

event.clientX、event.clientY 相对于视口的左上角

event.pageX、event.pageY 相对于页面的左上角

event.offsetX、event.offsetY 相对于事件元素左上角

$(#btn).click(function(event){
    console.log(event.clientX,event.clientY) //原点为窗口左上角
    console.log(event.pageX,event.pageY) //原点为页面左上角
    console.log(event.offsetX,event.offsetY) //原点为事件元素左上角
})

（4）事件相关处理

停止事件冒泡

event.stopPropagation 点击子元素，父元素点击监听不响应

阻止事件默认行为

event.preventDefault() 阻止事件默认行为

$('#test').click(function(event){
    if(Date.now()%2===0){
        event.preventDefault()
    }
})

mouseover 和 mouseenter 的区别

mouseover 在移入子元素时也会重新触发一次，mouseout 同理

mouseenter 只在移入当前元素时才触发，mouseleave 同理，hover() 使用的就是 mouseenter() 和 mouseleave()

若不存在子元素则 mouseover 和 mouseenter 没有区别

on(‘click’,fun) 和 click(fun) 的区别

on 方法通用，但编码麻烦

click 方法编码简单，但有的事件没有对应的方法

（5）事件委托/事件代理/事件委派

绑定事件监听的问题：新加的元素没有监听

事件委托

— 将多个子元素的事件监听委托给父辈元素处理

— 事件监听是加在父辈元素上，但事件发生在子元素上

— 当操作任何一个子元素时，事件会冒泡到父辈元素

— 父元素不会直接处理事件，而是根据 event.target 得到发生事件的子元素，通过这个子元素来调用事件回调函数（回调函数中的 this 指发生事件的子元素）

使用事件委托的好处

添加新的子元素，自动有事件响应处理

减少事件监听的数量（如从 n 个减为 1 个）

jQuery 的事件委托 API

设置事件委托：

（1）$(父元素选择器).delegate(子元素选择器,事件名,回调函数)

（2）$(父元素选择器).on(事件名,子元素选择器,回调函数)

（3）在 1.7 及以下还可以使用 live 函数，但在 1.7 以上已被废除

移除事件委托：$(父元素选择器).undelegate(事件名)，若不加事件名参数表示移除对应的所有事件

四、动画效果

1、淡入淡出

淡入淡出通过不断改变元素的透明度来实现

fadeIn() 带动画的显示

fadeOut() 带动画隐藏

fadeToggle() 带动画切换显示/隐藏

可选参数有速度、切换效果、回调函数

— 速度：slow、normal、fast、毫秒数

— 切换效果：swing（默认）、linear

— 回调函数：在动画完成时执行

2、滑动

滑动动画通过不断改变元素的高度实现

slideDown() 带动画的展开

slideUp() 带动画的收缩

slideToggle() 带动画的切换展开/收缩

可选参数有速度、切换效果、回调函数

3、显示与隐藏

显示与隐藏通过不断改变宽度、高度、透明度来实现，默认是没有动画

show() （不）带动画的显示

hide() （不）带动画的隐藏

toggle() （不）带动画的切换显示/隐藏

可选参数有速度、切换效果、回调函数

4、自定义动画

jQuery对象.animate({样式设置},毫秒数)，其中样式可不写单位，若写单位需要将数值和单位加引号

$('#div1')  //宽度先变为200px，高度再变为200px
    .animate({
        width:200
    },1000)
    .animate({
        height:200
    },1000)
$('#div1').animate({  //移动距离为（100，50）
    left:'+=100',
    top:'+=50'
},1000)
$('#div1').animate({  //移动距离为（-100，-20）
    left:'-=100',
    top:'-=50'
},1000)

5、停止动画

jQuery对象.stop() 停止动画

五、多库共存

问题：如果有两个库都有 $，就存在冲突

解决：jQuery 库可以通过 jQuery.noConflict() 释放 $ 的使用权，让另一个库可以正常使用，此时 jQuery 库只能使用 jQuery 了

六、onload 与 ready

$(function($){})

$(document).ready(function(){})

window.onload = function(){}

上面三种方式基本等价，其中回调函数会在 DOM 加载完成时运行

注意 $(function($){}) 和 document.ready 等价，表示文档（结构）加载完毕，而 window.onload 表示整个页面（包括图片等）加载完毕

window.load 与 $(document).ready()区别

window.load 中包括页面的图片加载完后才会回调（晚），且只能有一个监听回调，后面加的监听回调会覆盖前面的

$(document).ready() 等同于 $(function(){})，页面加载完就回调（早），且可以有多个监听回调

window.onload = function(){  //不执行，被下面的 window.onload 覆盖
    console.log('onload1')
}
window.onload = function(){  //执行
    console.log('onload2')
}
$(function(){                //执行
    console.log('ready1')
})
$(function(){                //也执行
    console.log('ready2')
})

七、jQuery插件

1、扩展插件

jQuery.extend 是扩展 jQuery 对象本身（即jQuery 函数对象）的工具方法（扩展 $ 的方法），调用时 $.新方法()

jQuery.fn.extend 是扩展 jQuery 对象（jQuery 元素集）的功能方法（扩展 $() 返回值的方法），调用时 $(xxx).新方法()

注意：自定义的插件文件要在 jQuery 后引入

（1）扩展 jQuery 的工具方法

$.extend(object)，其中 this 指 $，使用 $.xxx() 调用

（2）扩展 jQuery 对象的方法

$.fn.extend(object)，其中 this 指 jQuery 对象，使用 $obj.xxx() 调用

编写插件文件 myjQuery-plugin.js
(function(){
    $.extend({          //给 $ 添加工具方法
        min:function(a,b){
            return a < b ? a : b
        },
        max:function(a,b){
            return a > b ? a : b
        },
        leftTrim:function(str){
            return str.replace(/^\s+/,'')
        },
        rightTrim:function(str){
            return str.replace(/\s+$/,'')
        }
    })
    $.fn.extend({      //给 jQuery 对象添加功能方法
        checkAll:function(){
            this.prop('checked',true) //this 是 jQuery 对象
        },
        unCheckAll:function(){
            this.prop('checked',false)
        },
        reverseCheck:function(){
            this.each(function(){ //this 是 jQuery 对象
                this.checked = !this.checked   //this 是 dom 元素
            })
        },
    })
})()
在其他 js 文件中使用插件
<script src="./jquery-1.10.1.js" type="text/javascript"></script>  //先引入 jQuery
<script src="./myjQuery-plugin.js" type="text/javascript"></script>  //引入自定义的插件文件
<script type="text/javascript">
    console.log($.min(1,2),$.max(2,1))
</script>

2、jQuery 插件

jQuery 插件是基于 jQuery 编写的扩展库，在官网可查看相关 jQuery 插件

常用的有 jquery-validation（表单验证插件）、jquery UI、laydate（日期控件，该控件其实不属于 jQuery 插件）

使用插件

jquery-validation

先在官网下载相应插件，并把有用文件拷贝在项目文件夹下，然后利用 <script> 引入 jQuery 和 插件库

<form id="myForm" action="xxx">
    <p>用户名（必须，最小6位）：<input name="username" type="text" required minlength="6"></p>
    <p>密码（必须，6-8位）：<input id="password" name="password1" type="password" required minlength="6" maxlength="8"></p>
    <p>确认密码：<input name="password2" type="password" equalTo="#password"></p>
    <p><input type="submit" value="注册"></p>
</form>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script>
    //声明式验证：程序员只需声明各种验证规则，也可自定义验证错误信息
    $('#myForm').validate({  //对此表单开启验证
        messages:{  //自定义错误提示（可选）
            username:{  //使用表单项的 name 值
                required:'用户名是必须的',
                minlength:'用户名至少6位'
            },
            password1:{  //使用表单项的 name 值
                required:'密码是必须的',
                minlength:'密码至少6位',
                maxlength:'密码最多6位'
            },
            password2:{
                equalTo:'必须与密码相同'
            }
        }
    })
</script>

jquery UI

在官网下载插件，并把 jquery.js、jquery-ui.js、jquery-ui.css 三个文件拷贝至项目文件夹

<head>
    <link rel="stylesheet" href="jquery-ui.css">
</head>
<body>
    <h2>手风琴Accordion效果</h2>  <!--以下结构是从插件的index.html中拷贝来的-->
    <div id="accordion">
        <h3>First</h3>
        <div>xxxxx</div>
        <h3>Second</h3>
        <div>xxxxx</div>
        <h3>Third</h3>
        <div>xxxxx</div>
    </div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script>
    $('#accordion').accordion()  //开启样式效果
</script>

laydate

在官网下载插件，把 need 文件夹、skins 文件夹、laydate.js 文件拷贝至项目文件夹中并放在同一目录下

<head>
    <script type="text/javascript" src="laydate.js"></script>
</head>
<body>
    <!--方式一-->
    <input placeholder="请输入日期" class="laydate-icon" onclick=""laydate()>
    <!--方式二-->
    <input class="laydate-icon" id="demo" value="xxx">   
    <script>
        ;!function(){
            laydate({
                elem:'#demo'
            })
        }()
    </script>
    <!--方式三-->
    <input class="laydate-icon" id="test">
    <script>
        laydate({
            elem:'#test',
            format:'YYYY/MM',  //分隔符可以任意定义，该例子只显示年月
            festival:true,   //显示节日
            choose:function(datas){  //选择完日期的回调
                alert(datas);
            }
        })
    </script>
</body>

八、jQuery 文档结构图

九、其他

1、伪数组

伪数组是 Object 对象，有 length 属性和数值下标属性，但不是数值（即 伪数组 instanceof Array 结果为 false），没有数组特别的方法（如 forEach()、push()、pop()、splice()等）

自定义一个伪数组

var w = {}
w.length = 0
w[0] = 'xxx'
w.length = 1
w[1] = 123
w.length = 2
for(var i=0;i<w.length;i++){  //可循环遍历元素
    var obj = w[i]
    console.log(i,obj)
}
console.log(w.forEach)  //会返回 undefined

2、轮播图

要实现循环切换，需在最后一张图片（5.jpg）后添加一张第一张图片（1.jpg），在第一张图片（1.jpg）前面添加最后一张图片（5.jpg）

若到达最后一张图片（5.jpg），则跳转到最左边第 2 张图片（1.jpg），若到达最左边的图片（5.jpg），则跳转到最右边的第 2 张图片（5.jpg）

还需注意快速点击时的bug（即正在翻页时点击向上或向下翻页），可在代码中设置标识判断当前是否正在翻页，翻页结束后更新标识值