JQuery 自定义函数

JQuery 自定义函数

1、前言

像我这样没有经过系统学习前端的同学,对jquery的理解估计还只是停留在基本的使用上,在这里抽出时间梳理下,jquery自定义方法,以及基本的调用,毕竟在网上用了那么多jquery第三方插件,却还不知道怎么定义的。

2、自定义函数及其使用示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		 <input type="button" value="按钮" id="myBtn">
	</body>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//$("button").myFuncOne();
			$("button").myFuncFour();
			$.myFuncTwo();
		})
		/**
		 * jQuery中添加自定义或函数方法1,如$.fn.extend({'aa':function(){}})或jQuery.fn.aa=function(){},这种调用时就得这样,$("#**").aa()
		 */
		jQuery.fn.myFuncOne=function(){
			alert("我的自定义jquery方法1");
		}
		jQuery.fn.extend({
			'myFuncFour':function(){
				alert("我的自定义jquery方法4");
			}
		})
		/**
		 * jQuery中添加自定义或函数方法2,如$.extend({'aa':function(){}}),这种调用时就是这样$.aa()
		 */
		jQuery.extend({
			'myFuncTwo':function(){
				alert("我的自定义jquery方法2");
			}
		})
		/**
		 * jQuery中添加自定义或函数方法3,如 $.myFuncThree('/post/getsecurejsonpost',{}, function(data) {});
		 */
		$.myFuncThree = function(url, data, successCB){
			alert("我的自定义jquery方法3,参数:"+url);
			 if(successCB){//回调
				successCB(url);
			 }else{
				alert("没有回调");
			 }
		}
		 
		function myFuncThreeCB(url){
			alert("myFuncThreeCB+"+url)
		}
		 
		/*
		 * 测试按钮
		 */
		$("#myBtn").click(function(){
			$("#myBtn").myFuncOne();
			$("#myBtn").myFuncFour();
			$().myFuncTwo();
			$.myFuncThree("www.baidu.com",'hello',myFuncThreeCB);
			$.myFuncThree("www.baidu.com",'hello');
		})
	</script>
</html>


版权声明:本文为qq_36441169原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。