当前位置：首页 > news >正文

Jquery -函数调用使用创建立即执行函数

news 来源：原创 2025/4/27 10:05:15

1.调用外部自定义Js文件

a.创建外部js文件:Def.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）


(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中创建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();