jQuery笔记 06：jQuery 对象（插件和静态方法）

扩展插件

扩展 $ 的方法

(function () {
  jQuery.extend({
    min: function (a, b) {
      return a < b ? a : b;
    },
    max: function (a, b) {
      return a > b ? a : b;
    },
    leftTrim: function (str) {
      return str.replace(/^\s+/, "");
    },
    rightTrim: function (str) {
      return str.replace(/\s+$/, "");
    },
  });
})();

使用

<script src="./js/my-plugin.js"></script>
<script>
  console.log($.min(3, 2)); // 2
  console.log($.max(3, 2)); // 3
  console.log("---" + $.leftTrim("   du du   ") + "---"); // ---du du   ---
  console.log("---" + $.rightTrim("   du du   ") + "---"); // ---   du du---
</script>

---

扩展 jQuery 对象的方法

(function () {
  jQuery.fn.extend({
    checkAll: function () {
      this.prop("checked", true);
    },
    unCheckAll: function () {
      this.prop("checked", false);
    },
    reverseCheck: function () {
      // this 是 jQuery 对象
      this.each(function () {
        // this 是 DOM元素
        this.checked = !this.checked;
      });
    },
  });
})();

使用

<input type="checkbox" name="character" />费渡
<input type="checkbox" name="character" />顾昀
<input type="checkbox" name="character" />林静恒 <br /><br />
<button id="btn1">全选</button>
<button id="btn2">全不选</button>
<button id="btn3">反选</button>

<script src="./js/my-plugin.js"></script>
<script>
  $("#btn1").on("click", function () {
    $(":checkbox").checkAll();
  });
  $("#btn2").on("click", function () {
    $(":checkbox").unCheckAll();
  });
  $("#btn3").on("click", function () {
    $(":checkbox").reverseCheck();
  });
</script>

现有插件

1. jquery-validation

声明式验证，由插件完成

<style>
  .error {
    color: red;
  }
</style>

<form id="myForm" action="xxx" method="get">
  <p>
    用户名(必填，最少6位)：<input
      type="text"
      name="username"
      required
      minlength="6"
    />
  </p>
  <p>
    密码(必填，6-8位)：<input
      id="password"
      type="password"
      name="password"
      required
      minlength="6"
      maxlength="8"
    />
  </p>
  <p>
    确认密码(与密码相同)：<input
      type="password"
      name="confirmPassword"
      equalTo="#password"
    />
  </p>
  <p><input type="submit" value="注册" /></p>
</form>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script>
  // 开启验证规则
  $("#myForm").validate({
    messages: {
      // 属性名为对应的输入框的name属性值
      username: {
        // 属性名为需要检查的项的名字
        required: "请输入用户名！",
        minlength: "请输入至少6个字符！",
      },
      password: {
        required: "请输入密码！",
        minlength: "请输入至少6个字符！",
      },
      // 如果只有一个校验项可以简写
      confirmPassword: "确认密码必须与密码相同！",
    },
  });
</script>

2. jQuery-UI

下载后解压放到项目中

<link rel="stylesheet" href="./jquery-ui-1.13.0.custom/jquery-ui.css" />

<h2>1.Accordion：手风琴</h2>
<div id="accordion">
  <h3>First</h3>
  <div>
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum
    dolor sit amet.
  </div>
  <h3>Second</h3>
  <div>Phasellus mattis tincidunt nibh.</div>
  <h3>Third</h3>
  <div>Nam dui erat, auctor a, dignissim quis.</div>
</div>

<h2>2.Autocomplete：自动搜索补全</h2>
<div>
  <input id="autocomplete" title='type "a"' />
</div>

<h2>3.Tabs：选项卡</h2>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.
  </div>
  <div id="tabs-2">
    Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium
    vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed
    lorem in enim dictum bibendum.
  </div>
  <div id="tabs-3">
    Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis.
    Pellentesque nisi urna, interdum eget, sagittis et, consequat
    vestibulum, lacus. Mauris porttitor ullamcorper augue.
  </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./jquery-ui-1.13.0.custom/jquery-ui.min.js"></script>
<script>
  // 手风琴效果
  $("#accordion").accordion();
  
  // 自动搜索补全
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme",
  ];
  $("#autocomplete").autocomplete({
    source: availableTags,
  });
  
  // 选项卡
  $( "#tabs" ).tabs();
</script>

静态方法

1. 静态方法和实例方法

// 定义一个类
function AClass() {}
// 给这个类添加静态方法（直接添加给类的就是静态方法）
AClass.staticMethod = function () {
  console.log("dudu", "staticMethod");
};
// 静态方法通过类名调用
AClass.staticMethod();

// 给这个类添加实例方法
AClass.prototype.instanceMethod = function () {
  console.log("dudu", "instanceMethod");
};
// 实例方法通过类的实例来调用
var a = new AClass();
a.instanceMethod();

2. jQuery中的静态方法

each方法：遍历数组（包括伪数组）

var arr = [1, 3, 5, 7, 9];
arr.forEach(function (value, index) {
  console.log(index, value);
});
// 原生的forEach方法只能遍历数组，不能遍历伪数组
var obj = {
  0: 1,
  1: 3,
  2: 5,
  3: 7,
  4: 9,
  length: 5,
};
// 使用jQuery的each静态方法遍历数组
// 第一个参数：当前遍历的数组
// 第二个参数：回调方法 function (index/索引, value/数值)
$.each(arr, function (index, value) {
  console.log(index, value);
});
$.each(obj, function (index, value) {
  console.log(index, value);
});

map方法：遍历数组，还可以对数组元素进行处理

var arr = [1, 3, 5, 7, 9];
// 原生的map方法不能遍历伪数组
arr.map(function (currentValue, index, arr) {
  console.log(index, currentValue);
});
var obj = {
  0: 1,
  1: 3,
  2: 5,
  3: 7,
  4: 9,
  length: 5,
};
// 第一个参数：要遍历的数组
// 第二个参数：每遍历一个元素之后执行的回调函数
var r1 = $.map(arr, function (value, index) {
  console.log(index, value);
});
// each方法默认返回当前遍历的数组，不支持在回调函数中对数组元素进行处理
console.log(r1);
var r2 = $.map(obj, function (value, index) {
  console.log(index, value);
  return value + 1;
});
// map方法默认返回空数组，可以在回调函数中对数组元素进行处理，生成新的数组返回
console.log(r2);

trim方法：去除字符串两端的空格

var str = "    du du    ";
// 去除字符串两端的空格
var result = $.trim(str);
console.log("---" + str + "---");// ---    du du    ---
console.log("---" + result + "---");// ---du du---

isWindow方法：判断一个对象是否是window对象

var b = $.isWindow(window);
console.log(b);// true

isArray方法：判断一个对象是否是真数组对象

var b = $.isArray([1, 2, 5]);
console.log(b);// true

isFunction方法：判断一个对象是否是函数对象

var b = $.isFunction(function f() { });
console.log(b);// true
// jQuery对象本质上是一个立即执行函数
b = $.isFunction(jQuery);
console.log(b);// true

holdReady方法：暂停或恢复入口函数的执行

// 暂停入口函数的执行
$.holdReady(true);
// 恢复入口函数的执行
$.holdReady(false);
$(function () {
  var btn01 = document.getElementById("btn01");
  btn01.onclick = function () {
    alert("btn");
  }
});