IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JQuery-静态方法 -> 正文阅读

[JavaScript知识库]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>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-30 12:39:12  更:2021-07-30 12:40:03 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/2 21:30:26-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码