`

jQuery 封装function

阅读更多
// JavaScript Document
(function($){
	/*drop menu packaging*/
	$.fn.dropmenu = function(options){
		var defaults = {
			contanier:	'',
			itemsCss:	''  
		}
		var options = $.extend(defaults,options);
		this.each(function(){
			var obj = $(this);
			var objspan = obj.children('li').children('span');
			/*objspan.each(function(index){
				var self = $(this);
				self.bind('click',function(evt){
					if(self.next('ul').size() != 0 ){
						var selfParentSilbings  =  self.parent().siblings();
						self.toggleClass(options.itemsCss,'');
						self.next().toggle(200);
						selfParentSilbings.children('span').removeClass(options.itemsCss);
						selfParentSilbings.children('ul').hide();
					}
				});				
			});*/
			objspan.click(function(){
				var self = $(this);
				if(self.next('ul').size() != 0 ){
					var selfParentSilbings  =  self.parent().siblings()
					self.toggleClass(options.itemsCss,'');
					self.next().toggle(200);
					selfParentSilbings.children('span').removeClass(options.itemsCss);
					selfParentSilbings.children('ul').hide();
				}
			});
		});
	}
	$('.tb_space tr:even').addClass('even'); //give table tr:even add style
})(jQuery);

//html document
<ul class="navigation">
        	<li><span class="current"><a href="javascript:void(0);" title="Geographic Settings">Geographic Settings</a></span>
            	<ul style="display:block">
                	<li><a href="countryList.html" title="Countries">Countries</a></li>
                    <li><a href="setState.html" title="">setState</a></li>
                </ul>
            </li>
            <li><span><a href="javascript:void(0);" title="Manage City Profiles">Manage City Profiles</a></span>
            	<ul>
                	<li><a href="#" title="Countries">Countries</a></li>
                    <li><a href="#" title="">Countries</a></li>
                </ul>
            </li>
            <li><span><a href="javascript:void(0);" title="Manage Genre Profiles">Manage Genre Profiles</a></span>
            	
            </li>
        </ul>
//css style
.navigation li span,.navigation li li a{width:150px;margin:0 0 2px;padding:2px 14px 2px 26px;}
.navigation li span{font-size:1.4em;display:block;line-height:22px;color:#333;background:#fff url(../../images/a_i/a_bg.png) no-repeat -1px -28px;}
.navigation li span a:link,.navigation li span a:visited{color:#333;text-decoration:none;line-height:22px;}
.navigation li .current{background-position:-1px 0;}
.navigation li ul{display:none;}
.navigation li li a{display:block;font-size:1.2em;height:1.6em;line-height:1.6em;color:#666;text-decoration:none;background:#fff url(../../images/a_i/a_bg.png) no-repeat 0 -81px;}
.navigation li li a:hover,.navigation li li .current{background-position:0 -56px;color:#333;}


写法2
/**
 * @jQuery Active
 * @Create 03/26/1011
 * @Use function $('#box').funname({item1:'', item2:''});
*/
(function($){
	$.FunName = function ($ele, options){
		this.options = options;
		alert(this.options.item1);
	}
	$.fn.funname = function(options){
		if (typeof options === 'string') {
            options = {
                url: options
            };
        }
		var o = $.extend({},$.fn.funname.defaults,options);
		this.each(function(){
			$this = $(this);
			var FN = new $.FunName($this, o);
			$this.data('funname', FN);
		});//元素操作
	}
	$.fn.funname.defaults = {
		item1:	'',
		item2:	''
	};//设置传参
})(jQuery);


/*
  跟第二种一样
*/
(function($){
  var a = {
    duration: 500,
    play: false,
    nextPage: "",
    prePage: "",
  };
  function b(d,e){
    this.options = $.extend({}, a, e);
    this.init(d);
  }
  $.extend(b.prototype, {
    init: function(d){
      console.log(this.options.duration);
    },
    play: function(){

    },
    next: function(){
      
    }
  });
  //return b;
  $.fn.slideshow = function(arg){
    var self = $(this)
    return new b(self,arg);
  }
})(jQuery);
$('.mod-slide').slideshow({});
分享到:
评论

相关推荐

    jQuery封装的组件

    本文将深入探讨一个基于jQuery封装的组件,通过标题"jQuery封装的组件"我们可以推测,这是一个利用jQuery创建的自定义UI元素或功能模块。描述中的链接指向了一篇博客文章,虽然具体内容无法直接提供,但我们可以根据...

    jQuery封装插件原理教学 Demo

    本教程将深入讲解如何基于jQuery封装自己的插件,这是一门面向初级开发者的技术分享,旨在帮助初学者理解jQuery插件的创建过程。 首先,我们需要了解jQuery插件的基本结构。一个简单的jQuery插件通常由以下部分组成...

    Jquery封装的地图工具

    **jQuery封装的地图工具详解** 在Web开发中,地图应用已经成为不可或缺的一部分,无论是地理位置查询、导航服务还是数据分析,都需要借助地图工具。本篇文章将详细介绍如何利用jQuery来封装常用的地图工具,包括...

    jquery封装好的验证码

    **jQuery封装好的验证码技术详解** 在网页开发中,验证码是一种常用的安全机制,用于防止自动化的机器人或恶意软件进行非法操作,如防止恶意注册、登录等。`jQuery` 是一款广泛使用的JavaScript库,它简化了DOM操作...

    jquery封装好的js文件

    这个压缩包中的 "jquery封装好的js文件" 提供了一个预封装的 jQuery 实例,使得开发者能够更快速、更便捷地在项目中使用 jQuery。 ### jQuery 的核心特性 1. **DOM 操作**:jQuery 提供了一系列简洁的 API 来查找...

    把jQuery的类、插件封装成seajs的模块的方法

    注:本文使用的seajs版本是2.1.1一、把Jquery封装成seajs的模块 代码如下:define(function () {  //这里放置jquery代码 把你喜欢的jquery版本放进来就好了 return $.noConflict();}); 调用方法:这样引进就可以像...

    jquery函数 强大的封装

    《jQuery函数:强大的封装与应用》 jQuery,作为一款广泛使用的JavaScript库,以其简洁的语法、丰富的API和高效的性能赢得了开发者们的青睐。标题中的“jquery函数 强大的封装”正揭示了jQuery的核心魅力:它将复杂...

    Jquery 封装下的ajax异步加载

    这个Web项目实例展示了如何利用jQuery封装的AJAX功能实现异步加载,通过与Servlet配合,实现了客户端与服务器间JSON数据的交换。理解这些概念和实践,对于提升Web应用的用户体验和性能至关重要。通过深入学习和实践...

    仿照jquery封装一个自己的js库(一)

    ### 仿照jQuery封装自己的JS库(一) #### 一、理解jQuery的美元符号 在JavaScript的世界里,jQuery 是一个非常流行的库,它通过简化HTML文档遍历、事件处理、动画以及Ajax交互等功能来帮助开发者更高效地编写网页...

    jquery封装的input file控件

    "jquery封装的input file控件"是一种解决方法,通过jQuery库来改进文件上传控件的外观和交互体验。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。在本案例中,开发者...

    AngularJS封装jQuery DateTimepicker

    这篇博客“AngularJS封装jQuery DateTimepicker”可能是关于如何在AngularJS应用中有效地整合和自定义这个日期时间选择器的教程。 在AngularJS中,我们通常避免直接使用jQuery,因为Angular提供了一套自己的数据...

    jQuery封装的几款弹出层类,可直接使用

    本资源提供的是jQuery封装的几款弹出层类,适用于快速构建各种类型的弹窗,如信息提示、确认对话框、模态窗口等。这些类可以直接通过`new`关键字实例化并使用,大大提高了开发效率。 首先,我们来理解jQuery封装的...

    AngularJS封装jQuery Datepicker

    **AngularJS 封装 jQuery Datepicker 知识点详解** 在Web开发中,日期选择器是一个常见的组件,用于用户输入日期或选择日期范围。AngularJS 和 jQuery 的结合使用可以为开发者提供更强大的功能和更好的用户体验。这...

    jQuery 封装Ajax

    **jQuery 封装Ajax** 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于实现页面的异步更新,提升用户体验。jQuery库通过其简单易用的API,极大地简化了Ajax操作,使得开发者无需关注底层的...

    基于jQuery封装的tap事件插件

    本主题聚焦于一个特定的jQuery插件——“基于jQuery封装的tap事件插件”,这个插件是为了应对触屏设备(如智能手机和平板电脑)上的点击事件问题而设计的。在触屏设备上,原生的`click`事件存在延迟,通常在用户触摸...

    js照片轮播和jquery封装的照片播放器

    JavaScript 和 jQuery 在网页开发中广泛应用于创建动态和交互式的用户界面,其中照片轮播就是一种常见且实用的功能。本文将详细讲解如何使用 JavaScript 和 jQuery 实现照片轮播,并结合提供的"一行多图轮播 含有弹...

    封装slider,jquery插件

    本教程将聚焦于如何封装一个基于jQuery的滑动插件,也就是"slider插件",这在网页设计中非常常见,用于创建吸引人的幻灯片展示效果。 首先,我们要理解什么是滑动插件(Slider Plugin)。滑动插件通常是一个自定义...

    jquery封装Tab标签选项卡,内含动画版选项卡及滑动门

    本教程将详细讲解如何使用jQuery封装Tab标签选项卡,包括动画版选项卡和滑动门效果,这在网页设计中是常见的交互元素,能提升用户体验。 首先,Tab选项卡是一种组织内容的有效方式,它允许用户在多个相关但独立的...

    jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化

    在给定的标题“jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化”中,讨论的是如何利用jQuery创建一个自定义事件来实时监测input和textarea元素的值变化。这个功能对于表单验证...

    jquery封装下的ajax同步加载代码实例

    以下是对"jquery封装下的ajax同步加载代码实例"的详细解释: 首先,jQuery的$.ajax()函数是进行AJAX请求的核心方法。这个函数接受一个包含多个选项的对象作为参数,用于定制请求的各个方面。在这个实例中,我们将...

Global site tag (gtag.js) - Google Analytics