jQuery教程

JQuery-静态方法

本文主要是介绍JQuery-静态方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

  • 什么是静态方法?

静态方法对应的是对象方法,对象方法用实例对象调用,而静态方法用类名调用

  <script>
    // 定义一个类
    function AClass() {}
    // 给函数A添加静态方法
    // 直接添加给类的就是静态方法
    AClass.staticMethod = function () {
      alert("静态方法");
    };
    // 静态方法的调用
    AClass.class();
    // 给这个类添加一个实例方法
    AClass.prototype.instanceMethod = function () {
      alert("实例方法");
    };
    // 实例方法通过类的实例调用
    // 创建一个实例（创建一个对象）
    var a = new AClass();
    // 通过实例调用实例方法
    a.instanceMethod();
  </script>

  • $.holdReady(hold)

    • 暂停或者恢复jQuery.ready()事件

    • 传入true或false

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>04-jQuery静态方法</title>

  <script src="代码/js/jquery-1.12.4.js"></script>

  <script>

    // 使用$直接调用,是静态方法

    $.holdReady(true);

    $(function () {

      $("#first").click(function () {

        alert("我是你想要的弹窗");

      });

    });

  </script>

</head>

<body>

<button id="first">点击测试弹出</button>

<button id="second">解除延迟</button>

<script>

  $("#second").click(function(){

    $.holdReady(false);

  });

</script>

</body>

</html>

  • $.each(object,[callback])

    • 遍历对象或数组

    • 优点统一遍历对象和数组的方式

    • 回调参数的顺序更符合我们的思维模式

<script>

  $(function () {

    // 3.1遍历数组

    var arr = [1, 3, 5, 7, 9];

    // 3.1.1通过原生方法遍历数组

    // 第一个回调函数参数是遍历到的元素

    // 第二个回调函数参数是当前遍历的索引

    // 返回值: 没有返回值

    var res = arr.forEach(function (ele, idx) {

      console.log(idx, ele);

    });

    console.log(res);

    // 3.1.2通过jQuery静态方法遍历数组

    // 第一个回调函数参数是当前遍历的索引

    // 第二个回调函数参数是遍历到的元素

    // 返回值: 被遍历的数组

    var $res2 = $.each(arr, function (idx, ele) {

      console.log(idx, ele);

    });

    console.log($res2);

    // 3.2遍历对象

    var obj = {name: "lnj", age:"33", gender:"male"};

    // 3.2.1js对象没有forEach方法,所以通过forin方法遍历对象

    for(var key in obj){

      console.log(key, obj[key]);

    }

    // 3.2.2通过jQuery静态方法遍历对象

    $.each(obj,function (key, value) {

      console.log(key, value);

    });

  });

  </script>

  • $.map(arr|obj,callback)

    • 遍历对象或数组,将回调函数的返回值组成一个新的数组返回
$(function () {

  // 4.1遍历数组

  var arr = [1, 3, 5, 7, 9];

  // 4.1.1通过原生方法遍历数组

  // 第一个回调函数参数是遍历到的元素

  // 第二个回调函数参数是当前遍历的索引

  // 第三个回调函数参数是当前被遍历的数组

  // 返回值: 将回调函数返回值收集起来组成一个新的数组

  var res = arr.map(function (ele, idx, arr) {

    console.log(idx, ele, arr);

    return ele + idx;

  });

  console.log(res);

  // 4.1.2通过jQuery静态方法遍历数组

  // 第一个回调函数参数是遍历到的元素

  // 第二个回调函数参数是当前遍历的索引

  // 返回值: 将回调函数返回值收集起来组成一个新的数组

  var $res2 = $.map(arr, function (ele,idx) {

    console.log(idx, ele);

    return ele + idx;

  });

  console.log($res2);

  // 4.2遍历对象

  var obj = {name: "lnj", age:"33", gender:"male"};

  /*

  obj.map(function (ele, idx, obj) {

    // 报错,原生JS没有map方法

    console.log(idx, ele, obj);

  });

  */

  var $res = $.map(obj, function (value, key) {

    console.log(key, value);

    return key + value;

  });

  console.log($res);

});

  • $.trim(str)

    • 去掉字符串起始和结尾的空格。
<script>

  $(function () {

    var str = "   lnj   ";

    console.log("---"+str+"---");

    var $res = $.trim(str);

    console.log("---"+$res+"---");

  });

</script>

  • $.isArray(obj)

    • 判断是否是数组
<script>

  $(function () {

    // 对象

    var obj = {name:"lnj",age: "33", gender:"male"};

    // 真数组

    var arr = [1, 3, 5, 7, 9];

    var $res = $.isArray(obj);

    console.log($res);// false

    var $res2 = $.isArray(arr);

    console.log($res2);// true

  });

</script>

  • $.isFunction(obj)

    • 判断是否是函数
<script>

  $(function () {

    var obj = {name:"lnj",age: "33", gender:"male"};

    var arr = [1, 3, 5, 7, 9];

    var fn = function () {}

    var $res = $.isFunction(obj);

    console.log($res);// false

    $res = $.isFunction(arr);

    console.log($res);

    $res = $.isFunction(fn);

    console.log($res);

    // 通过该方法验证了我们前面所说的,jQuery框架本质是一个匿名函数

    $res = $.isFunction($);

    console.log($res);

  });

</script>

  • $.isWindow(obj)

    • 判断是否是window对象
<script>

  $(function () {

    var obj = window;

    var arr = [1, 3, 5, 7, 9];

    var arrlike = {0:"zs", 1:"ls", length:2};

    var $res = $.isWindow(obj);

    console.log($res); // true

    $res = $.isWindow(arr);

    console.log($res); // false

    $res = $.isWindow(arrlike);

    console.log($res); // false

  });

</script>
这篇关于JQuery-静态方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航