jquery extend扩展方法(类方法和对象方法)-优快云博客

本文详细介绍了如何在jQuery中扩展类方法和对象方法，包括实现步骤和具体示例，帮助开发者更灵活地利用jQuery进行网页开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、扩展jquery类方法

/**
* 扩展jquery类方法(相当于类的静态方法$.methodName(param))
*/

$.extend({
	con:function(value){
	　　console.log(value)
	}
})
//类方法调用
$.con('作者是包戬作者是包戬作者是包戬作者是包戬作者是包戬作者是包戬');

二、扩展jquery对象方法

/**
* 扩展jquery对象方法(相当于类的静态方法$('#id').methodName(param))
* 通过id/class/标签名得到的是对象,直接$.方法名的是类(假定意义上的类)
* jQuery.fn = jQuery.prototype = {//这就是在实例化一个jquery对象
* init: function( selector, context ) {//….
* //……
* };
*/

//第一类定义jquery方法(如果自定义方法过多实用)
$.fn.extend({
　　myPlugin:myPlugin
});
function myPlugin(options) {
　　$options = $.extend({ 
　　　　html: "no messages", 
　　　　css: { 
　　　　　　"color": "red", 
　　　　　　"font-size":"14px"
　　　　}
　　},options); 
　　return $(this).css($options.css).html($options.html); 
} 
//或者
$.fn.extend({
myPlugin:function(options) {
	$options = $.extend({ 
	html: "no messages", 
	css: { 
		"color": "red", 
		"font-size":"14px"
	}
	},options); 
	return $(this).css($options.css).html($options.html); 
} 
});
		
//第二类定义jquery方法(定义单个方法),两类其实都是一样的原理,分成两类也是我自己定的,有错勿喷
$.fn.myPlugin = function(options) { 
　　$options = $.extend({ 
　　　　html: "no messages", 
　　　　css: { 
　　　　　　"color": "red", 
　　　　　　"font-size":"14px"
　　　　}
　　},options); 
　　return $(this).css($options.css).html($options.html); 
} 
		
//调用
$('.ye').myPlugin({html:"So easy,yes?",css:{"color":"green","font-size":"50px"}}); //页面上标签<span class='.ye'><span>