正课:
1. 官方插件:
2. 第三方插件:
3. 自定义插件:
插件: 包含完整功能/样式的可重用的一个小功能
为什么: 重用
何时: 只要项目中有重复的样式或功能,都要封装为插件,再反复使用
1. 官方插件
jQuery UI:
前提: 基于jQuery
引入: 先引入jQuery,再引入jQuery UI, 最后编写自定义脚本
使用: 包括3个方面:
1. 效果: jQuery UI重写了部分jQuery的方法
1. 支持颜色动画: 重写了animate方法
2. 为动画API添加了多种动效:
重写了show/hide/toggle添加了第一个参数: 效果名
3. 为addClass/removeClass,添加了动效
.addClass/removeClass("class",ms);
2. 交互行为: 自学
3. widget:
如何使用:
1. html结构
2. 引入jquery-ui.css, jquery.js, jquery-ui.js
3. 找到要引用插件的HTML元素,调用插件API
原理: 侵入性: 插件函数根据自身的需要,隐式向元素上添加class和自定义扩展属性。
优: 简单
缺: 封装的太死板,不便于维护
1. accordion
2. autocomplete
3. datepicker
4. dialog
5. tabs
6. tooltip
2. 第三方插件:
1. validation
2. fileUpload: 3种:
1. 普通文件上传
html: <form method="post"
encType="multipart/form-data"
action="服务端.php"
服务器端php:
只要提交,文件都会先存储在服务器端临时文件夹中
php: 需要用原始文件名,转储临时文件到指定目录下
2. ajax上传文件
html: <form 不用加任何特殊属性
js: $.ajax({
type:"post",
url:"upload_file.php",
data:new FormData($("#form1")[0]),
contentType:false,
processData:false
}).then(function(result){
alert(result);
})
php: 同第一种方法的php
3. 用插件上传
3. wysiwyg