本文介绍了jQuery扩展的方法，包括给jQuery及jQuery对象添加扩展的功能，并通过实例展示了如何实现表单验证插件，以及如何将这些扩展组织到独立的JavaScript文件中。
补充：
》》》链式操作本质上就是返回当前操作的对象，意思是无论对一个jquery对象进行怎样的操作最后都会再返回当前操作的对象，这也就是我们为什么能连续写方法的原因
》》》removedata（"key"） 删除之前赋的值
一、插件：给别人用的，jquery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
1、给jquery添加扩展
》》》$.extend（｛
名字：function（）｛
执行语句；
｝
｝）
》》》外部使用：$.名字（）就会执行函数中的语句
2、给jquery对象添加扩展
》》》$.fn.extend（｛
名字：function（）｛
执行语句；
｝
｝）
》》》外部使用：$（选择器）.名字（）就会执行函数中的语句
3、补充：：：：
》》》》函数中的执行语句也可以是调用某个函数，这样外部一调用名字就可以直接执行某个函数了
重要重要重要》》》》两种扩展中函数的语句中this就代表谁调用谁就是this
》》》》注意注意注意：：：：：
1、自己写插件时的几点：
（1）全局变量污染（指的是我们引用别人的插件，但是插件中恰好把我们所创建的全局变量修改了）
》》》解决办法：JS中函数限制变量的作用域 ，所以我们在写插件的时候要用函数包裹我们扩展的那些变量和函数
（2）全局不可以访问函数内部定义的变量，函数内部可以访问全局变量
（3）如何防止$被修改（指的是别人写的插件可能会把$修改成别的值，一旦发生这样的情况，后续的代码就无法继续执行了）
》》》解决办法：还是包裹成一个函数，用传参的方式，我们显式的把jQuery传进去，在函数内部用jq表示jQuery
（4）用匿名函数来简化我们保存自己变量或函数的操作，因为匿名函数外部价格括号就可以调用，省去了我们再自己设置变量和函数调用的麻烦
举例：
》》》》jQuery扩展示例.html --> 演示了如何给jQuery添加扩展
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery扩展示例</title> </head> <body> <div>111</div> <script src="jquery-3.2.1.min.js"></script> <script> // 给jQuery添加扩展 $.extend({ xyy: function () { console.log("脱衣服"); } }); // 给jQuery对象添加扩展 $.fn.extend({ xxx: function () { console.log("ooo"); } }) </script> </body> </html>
》》》》jQuery扩展示例2.html --> 演示了如何把之前的校验代码弄成一个jQuery扩展，就是写在一个validate函数中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆校验作业</title> <style> .error { color: red; } </style> </head> <body> <form id="f1" action=""> <p> <label for="user">姓名</label> <input class="require" id="user" type="text" name="username"> <span class="error"></span> </p> <p> <label for="pwd">密码</label> <input class="require" id="pwd" type="password" name="passwd"> <span class="error"></span> </p> <input type="submit" value="登录"> </form> <script src="jquery-3.2.1.min.js"></script> <script> function validate(arg) { var $currEle = arg; console.log(arg); $currEle.find(":submit").on("click", function () { // 每次判断之前都清空之前的错误信息 $(".error").text(""); // 定义一个用于判断是否进行下一个事件的标志位 var flag = true; // 校验 // 找需要校验的input // $("form input[type='text'], form input[type='password']") $currEle.find("input.require").each(function () { // this --> 当前的input框 --> DOM对象 var currVal = $(this).val(); // 取到当前input框的值 if (currVal.length === 0){ // 根据值的长度和0去比较 // 提示错误信息 // $(this).next() --> 找到span标签 // 取label的text来拼接错误信息 // $(this).prev(); --> 取到当前input标签前面的label标签 var msgQz = $(this).prev().text(); $(this).next().text(msgQz + "不能为空"); flag = false; return false; // 跳出each循环 } }); return flag; }); } // 文档加载完之后执行 $(document).ready(function () { $("#f1").check(); }); // 给我的jQuery对象添加了一个名叫check的扩展 $.fn.extend({ check: function () { // this表示的是的当前操作的标签 validate(this); } }); </script> </body> </html>
》》》》jQuery扩展示例3.html --> 演示了如何把jQuery扩展放到单独的JS文件中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆校验作业</title> <style> .error { color: red; } </style> </head> <body> <form id="f1" action=""> <p> <label for="user">姓名</label> <input class="require" id="user" type="text" name="username"> <span class="error"></span> </p> <p> <label for="pwd">密码</label> <input class="require" id="pwd" type="password" name="passwd"> <span class="error"></span> </p> <input type="submit" value="登录"> </form> <script src="jquery-3.2.1.min.js"></script> <script src="extend.js"></script> <script> $("#f1").check(); </script> </body> </html>
a = function(jq){ function f2(arg) { var $currEle = arg; console.log(arg); $currEle.find(":submit").on("click", function () { // 每次判断之前都清空之前的错误信息 jq(".error").text(""); // 定义一个用于判断是否进行下一个事件的标志位 var flag = true; // 校验 // 找需要校验的input $currEle.find("input.require").each(function () { // this --> 当前的input框 --> DOM对象 var currVal = jq(this).val(); // 取到当前input框的值 if (currVal.length === 0){ // 根据值的长度和0去比较 // 提示错误信息 // $(this).next() --> 找到span标签 // 取label的text来拼接错误信息 // $(this).prev(); --> 取到当前input标签前面的label标签 var msgQz = jq(this).prev().text(); jq(this).next().text(msgQz + "不能为空"); flag = false; return false; // 跳出each循环 } }); return flag; }); } // 文档加载完之后执行 jq(document).ready(function () { // validate(); jq("#f1").check(); }); // 给我的jQuery对象添加了一个名叫check的扩展 jq.fn.extend({ check: function () { // this表示的是的当前操作的标签 f2(this); } }); }; // 为了防止某些坏人把$赋值成别的变量 a(jQuery);
》》》extend.js --> 我们自己写的jQuery扩展文件
上面的那部分是没有优化的方式，即我们自己定义变量和函数
下面的是使用自执行函数优化的方式（以后我们都用这种方式）
// 匿名函数 (function (jq) { function f2(arg) { var $currEle = arg; console.log(arg); $currEle.find(":submit").on("click", function () { // 每次判断之前都清空之前的错误信息 jq(".error").text(""); // 定义一个用于判断是否进行下一个事件的标志位 var flag = true; // 校验 // 找需要校验的input // $("form input[type='text'], form input[type='password']") $currEle.find("input.require").each(function () { // this --> 当前的input框 --> DOM对象 var currVal = jq(this).val(); // 取到当前input框的值 if (currVal.length === 0){ // 根据值的长度和0去比较 // 提示错误信息 // $(this).next() --> 找到span标签 // 取label的text来拼接错误信息 // $(this).prev(); --> 取到当前input标签前面的label标签 var msgQz = jq(this).prev().text(); jq(this).next().text(msgQz + "不能为空"); flag = false; return false; // 跳出each循环 } }); return flag; }); } // 文档加载完之后执行 jq(document).ready(function () { // validate(); jq("#f1").check(); }); // 给我的jQuery对象添加了一个名叫check的扩展 jq.fn.extend({ check: function () { // this表示的是的当前操作的标签 f2(this); } }); })(jQuery);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
