Jquery -函数调用使用创建立即执行函数
1.调用外部自定义Js文件
a.创建外部js文件:DefFuncT.js文件$(document).ready(function () {$('#buttonT').click(function () {alert("开始调用外部Js文件");$("#buttonT").append("追加文本");});
})b.创建H5文件:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>调用外部JS文件</title><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script src="js/DefFuncT.js" ></script>
</head>
<body><button id="buttonT">点击按钮</button>
</body>
<script></script>
</html>
执行结果:
2.Jquery立即执行函数（Immediately Invoked Function Expression，简称 IIFE）
IIFE主要功能变量提供私有作用域,避免污染全局变量环境
(function($, window, document, undefined) {//...code})(jQuery, window, document);或者简洁版:(function($) {//...code})(jQuery);注意：$.fn是一个全局对象，用于扩展jQuery对象的功能。使用$.fn可以向jQuery核心添加自定义方法a.创建外部imf.js文件(function($) {$.fn.setBorder = function() {this.each(function() {$(this).css("border", "solid red 2px");});return this; };})(jQuery);b.H5中引入imf.js 文件并且创建Div:<div class="setcolor">设置边框颜色</div>c.H5中<script>添加:
$(".setcolor").setBorder();
示例： extend 创建多个功能函数
a.创建外部立即执行js文件: imd.js(function($, window, document, undefined) {$.fn.extend({appT:function(){$(this).append("追加文本");}, //此处用 逗号分割//创建第二个函数appZ:function(){$(this).append("追加文本");}});
})(jQuery, window, document);b.在H5 中添加Div:<div id="appDivContent"></div>c.在H5 <script>中添加调用函数代码:$("#appDivContent").appT();