jQuery之工具方法(type、isArray、isFunction、isWindow、noConflict、each、map)

&XYZ&

于 2020-04-13 08:47:14 发布

阅读量307

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/105402370

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

$ .type()、$ .isArray()、 $ .isFunction()、$ .isWindow()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知“心”</title>
</head>

<body>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  // typeof() 里面的数据是什么类型
  
  // $.type() 里面的数据到底是什么
  console.log( $.type(undefined) )
  console.log( $.type("abc") )
  console.log( $.type(123) )
  console.log( $.type(true) )
  console.log( $.type(function() {}) )
  console.log( $.type(null) )
  console.log( $.type({}) )
  console.log( $.type([1, 2, 3, 4]) )
  console.log( $.type(new Date()) )
  console.log( $.type(new Number) )
  console.log( $.type(new Person()) )
  function Person(){}

  // $.isArray()  判断是不是数组，返回boolean值
  const arrays = [1, 2, 3];
  console.log( $.isArray(arrays) )
  // $.isFunction()  判断是不是方法，返回boolean值
  function fn(){}
  console.log( $.isFunction(fn) )
  // $.isWindow()  判断是不是window，返回boolean值
  console.log( $.isWindow(window) )

  // $.trim()消除空格
  const text = "      1     2    3      ";
  console.log(text)
  console.log( $.trim(text) )
</script>
</html>

$.noConflict()防止冲突

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知“心”</title>
  <style>
    .demo {
      width: 100px;
      height: 100px;
      background-color: #ff0000;
    }
  </style>
</head>

<body>
  <div class="demo"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  // $.noConflict()防止冲突
  const $C = $.noConflict();
  // 变量命名冲突 $
  $C('.demo').css({ backgroundColor: '#0000ff' })
</script>

</html>

$ .each() 、$.map（）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知“心”</title>
  <style></style>
</head>

<body>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  /*
    $.each()是没有ES5的forEach效率高的
  */
  const arr = [1, 2, 3];
  $.each(arr, function (index, ele) {
    console.log(index, ele)
  })

  // ES5的map是根据JQuery的$.map()演变来的
  const cont = $.map(arr, function (index, ele) {
    return ele * index
  })
  console.log(`cont`, cont)
</script>

</html>