引入插件几个步骤：
-
必须先引入jquery.js文件，而且在所有插件之前引入
-
引入插件
-
引入插件的周边，例如皮肤、中文包等
-
Validate.js是验证插件，这个插件有两个js文件，一个是主文件，一个是中文包文件，使用时可以使用min版本
只要通过form元素的jquery对象调用 validate()方法，就可以实现一些简单的校验功能：
$('form').validate();
-
必填项：在表单设计class=”required”
-
不得小于两位：在表单设置minlength=”2”
-
电子邮件：在表单设置class=”email”
-
网址：在表单设置class=”url”
jquery-migrate-1.2.1.js
三、自定义插
基本要点：
-
插件名推荐使用jquery.[插件名].js,以避免和其他库相冲突
-
局部对象附加jquery.fn对象上，全局对象附加在jquery上
-
插件内部，this指向是当前的局部对象
-
可以通过this.each来遍历所有元素
-
所有的方法或插件，必须用分号结尾，避免出现问题。
-
插件返回的应该是jquery对象，以保证可链式连缀
-
避免插件内部使用$,如果要使用，请传递jquery进去
Index.html
<!DOCTYPE html>
<html>
<head>
<title>导航</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet"type="text/css" href="js/style.css">
<script type="text/javascript"src="js/jquery-1.11.3.js"></script>
<script type="text/javascript"src="js/demo.js"></script>
<script type="text/javascript"src="js/jquery.nav.js"></script>
</head>
<body>
<ul class="list">
<li>导航列表
<ul class="nav">
<li>导航列表1</li>
<li>导航列表1</li>
<li>导航列表1</li>
<li>导航列表1</li>
<li>导航列表1</li>
<li>导航列表1</li>
</ul>
</li>
<li>导航列表
<ul class="nav">
<li>导航列表2</li>
<li>导航列表2</li>
<li>导航列表2</li>
<li>导航列表2</li>
<li>导航列表2</li>
<li>导航列表2</li>
</ul>
</li>
</ul>
</body>
</html>
Demo.js
$(function(){
$.nav('red');
});
Jquery.nav.js:
;(function($){
//全局
$.extend({
'nav':function(color){
$('.nav').css({
'list-style':'none',
'margin':0,
'padding':0,
'display':'none',
'color':color
});
$('.nav').parent().hover(function(){
$(this).find('.nav').slideDown('normal');
},function(){
$(this).find('.nav').stop().slideUp('normal');
});
}
});
})(jQuery);
Style.css
.list{
list-style:none;
margin: :0;
padding:0;
font-size: 13px;
color: #fff;
width:500px;
margin: 50px auto;
}
.list li{
float:left;
width: 100px;
height:30px;
background: #333;
line-height: 30px;
text-align: center;
cursor: pointer;}
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
