32-jquery自定义插件

最新推荐文章于 2022-11-23 13:40:05 发布

会编程的阿强

最新推荐文章于 2022-11-23 13:40:05 发布

阅读量311

点赞数

分类专栏： JQuery和Ajax

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/53195985

版权

JQuery和Ajax 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

一、自定义插件规范

命名jquery.插件名.js，实验是否有效alert($.nav),弹出undefined表示可以用。
避免插件内部使用$,如果使用$,传入jquery对象。

3.所有插件必须以分号结尾;(function($){})前面加分号表示防止上一个js没有以分号结尾

4.返回一个jquery对象

实例

jquery.nav.js

;(function($){
   $.fn.extend({
       'nav':function(color){
	       //设置css样式
			$(this).find('.nav').css({
			   'list-style':'none',
			   'margin':0,
			   'padding':0,
			   'display':'none',
			   'color':color
			});
             //设置下拉，上拉动画
			$(this).find('.nav').parent().hover(function(){
				$(this).find('.nav').slideDown('normal');
			},function(){
				$(this).find('.nav').stop().slideUp('normal');
			});
	     return this;
	   }
   });
})(jQuery);

style.css

.list{
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
  width:500px;
  margin:50px auto;
  color:#fff;
}

.list li{
   float:left;
   width:100px;
   height:30px;
   background:#333;
   line-height:30px;
   text-align:center;
   cursor:pointer;
}

// JavaScript Documeb
$(function(){
	//全局$.nav();
	//局部
	$('.list').eq(0).nav('orange');
 });

test.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.min-1.11.3.js"></script>
<script src="jquery.nav.js"></script>
<script src="test.js" ></script>
<link type="text/css" href="style.css" rel="stylesheet"></link>
<title>无标题文档</title>
</head>

<body >
	<ul class="list">
	   <li>导航列表
			<ul class="nav">
				<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>
	        </ul>
	   </li>
	   <li>导航列表
				<ul class="nav">
				<li>导航列表3</li>
			    <li>导航列表3</li>
			    <li>导航列表3</li>
			    <li>导航列表3</li>
	        </ul>
	   </li>
	   <li>导航列表
				<ul class="nav">
				<li>导航列表4</li>
			    <li>导航列表4</li>
			    <li>导航列表4</li>
			    <li>导航列表4</li>
	        </ul>
	   </li>
	   <li>导航列表
			<ul class="nav">
				<li>导航列表5</li>
			    <li>导航列表5</li>
			    <li>导航列表5</li>
			    <li>导航列表5</li>
	        </ul>
	   
	   </li>
	</ul>
  <br/><br/><br/><br/><br/><br/><br/><br/>
	<ul class="list">
	   <li>导航列表
			<ul class="nav">
				<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>
	        </ul>
	   </li>
	   <li>导航列表
				<ul class="nav">
				<li>导航列表3</li>
			    <li>导航列表3</li>
			    <li>导航列表3</li>
			    <li>导航列表3</li>
	        </ul>
	   </li>
	   <li>导航列表
				<ul class="nav">
				<li>导航列表4</li>
			    <li>导航列表4</li>
			    <li>导航列表4</li>
			    <li>导航列表4</li>
	        </ul>
	   </li>
	   <li>导航列表
			<ul class="nav">
				<li>导航列表5</li>
			    <li>导航列表5</li>
			    <li>导航列表5</li>
			    <li>导航列表5</li>
	        </ul>
	   
	   </li>
	</ul>
</body>
</html>

会编程的阿强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
32-jquery自定义插件

一、自定义插件规范命名jquery.插件名.js，实验是否有效alert($.nav),弹出undefined表示可以用。避免插件内部使用$,如果使用$,传入jquery对象。3.所有插件必须以分号结尾;(function($){})前面加分号表示防止上一个js没有以分号结尾4.返回一个jquery对象5.实例jq
复制链接

扫一扫