jquery extend扩展方法(类方法和对象方法)

Posted 2020-07-05 jamsbwo

一、扩展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>