jquery原理与ajax基础系列（二）之核心函数

1th.何谓“核心函数”？

形式如$()即为"核心函数"。

要考虑的是核心函数的参数问题，

1.如果参数是function,结构变成$(function(){}),则"核心函数"变成"入口函数"，具体见前一章。

2.原生js中的选择器的获取（类似于.getElementById...）得到了简写：

$("div");
$(".box1");
$("#id1");

3.原生js中的/document.body.createElement()类似操作在jquery中得到了简写：

let $p=$("<p>这是一个P标签</p>");

document.body.append($p);
//原生js
document.body.appendChild($p);

.append后可以跟一个具体的jquery对象形如.append($(""))，也可以直接跟一个字符串比如.append("")。当.append()后接的对象比较复杂比如包含多个DOM且多个DOM之间有层级关系，个人还是建议写成文本文件text（字符串）的形式（但是无论是那种方式，都要经过处理，将HTML中复制过来的代码去掉空格）：

//直接后接文本的形式 没有包装成jquery对象。强烈建议！
let text1=  ' <div class="mask"><div class="login"><span></span><form class="biankuang"  action=""> </form></div></div>';
$("body").append(text1);


//包装成了jquery对象传进去！
let $mask = $('<div class="mask"><div class="login"><span></span><form class="biankuang" action=""> </form></div></div>'）
 $("body").append($mask);

要注意的是，只要使用了形如$()的形式，最终返回的都是一个jquery对象，只是这个jquery对象中包含了选择器所选中的DOM元素第（2）条，自我创建的DOM元素第（3）条.

 

2th.静态方法与实例方法

对于有java基础的，要学习js的静态方法与实例方法，可能仅仅就是个记忆型的问题，你要记住js的静态方法/实例方法与java的不同。

      <script>
            function Aclass() {}
            //静态方法
            Aclass.method1 = function() {
                  alert("this is a statciMethod");
            }
            //实例方法
            Aclass.prototype.method = function() {
                  alert("this is  a  instancMethod,it's oriented objects");
            }
            Aclass.method1();
            // 不要写成类似于“Aclass a=new Aclass();” 的形式，这是java的写法
            // Aclass a=new Aclass();
            let a = new Aclass();
            a.method();
      </script>

初步总结下不同：

1.js不存在真正的类的概念，在涉及到java中本该用类"class"的时候，js是用function来代替的

2.静态方法是直接加，使用也是直接使用；实例方法存在"Aclaas.prototype.method"，使用的时候也是需要先创建对象（要仔细辨别与java的不同，上述代码部分标识出来了）。

3.相对于java，js中的实例方法给人的感觉就是”强行面向对象“，通过”.prototype“实现的”强行面向对象“。关于面向对象的好处，就是可以少些代码，尽可能多的达到代码的复用（这一点对于所有的面向对象的语言都是存在的）。

 

3th.jquery中的静态方法

注意与原生的js的方法比较，便于记忆。

数组  && 伪数组 && json

数组 ：【1,2,3,4,5】

伪数组：{0:6,1:6,2:6,3:4,4:3,5:6,length:6}伪数组是相对于数组而言的，重点强调在“伪”。它有2个要素：1.有length 2.序列下标从0开始且为顺序序列

json：{"name":"purple","age":22,"gener":"female"}。没有length。下标无序。

one.    $.each(xxx,function(index,value))  vs   xxx.forEach(function(value,index))

格式：$.each(obj,funciton(index,value){})

            // 数组arr的比较
            // 原生的js只能在数组arr中使用，在伪数组f_arr以及json中无法使用,注意function中
            // index value的前后位置。
            arr.forEach(function(value, index) {
                  console.log(index - value);
                  console.log(index, value);
            })
            $.each(arr, function(index, value) {
                  console.log(index + value);
                  console.log(index, value);
            })

            //伪数组f_arr的比较
            // Uncaught TypeError: f_arr.forEach is not a function，报错类型。
            // 伪数组无法在原生forEach中使用。可以在$.each(f_arr,function(){})中使用
            f_arr.forEach(function(value, index) {
                  console.log(index, value);
            })
            $.each(f_arr, function(index, value) {
                  console.log(index, value)
                  console.log(index + value)
            })

            // json的比较
            // Uncaught TypeError: json.forEach is not a function，报错类型
            // json无法在原生forEach中使用。可以在$.each(f_arr,function(){})中使用
            json.forEach(function(value, index) {
                  console.log(index, value)
            })
            $.each(json, function(index, value) {
                  console.log(index, value);
                  // 字符串
                  console.log(index + value);

            })

two.  $.map(xxx,function(value,index){}) vs arr.map(function(value,index,arr))  

与“one.”类似，$.map(xxx,function(value,index){})适用于数组arr/伪数组f_arr/json.依旧需要强调的是要注意参数位置/参数个数的问题。

three. $.each(xxx,function(index,value))  vs $.map(xxx,function(value,index)) vs arr.map(function(value,index,arr))

这三者的区别主要体现在返回的参数上（原数组arr都不会发生变化，变化的是新生成的arr的返回值，故原数组不做比较）：

//组arr都不会发生变化，变化的是新生成的arr的返回值，故原数组不做比较
    let arr1 = arr.map(function(value, index, arr) {
                  console.log(index, value)
                  // 可以使用,改变返回值
                  return value + 1
            })
            // //  [undefined, undefined, undefined, undefined, undefined, undefined, undefined]
            console.log(arr1)

            let arr2 = $.map(arr, function(v, i) {
                  console.log("   " + i, v)
                  // 可以使用，改变返回值
                  return v + 1;
            })
            // 空数组，length长度为0
            console.log(arr2)

            // undefined
            let arr3 = arr.forEach(function(value, index) {
            //依旧是undefiend，失效。
                  return value + 1;
            })
            console.log(arr3)

            //  [1, 3, 5, 6, 7, 3, 4],原数组返回。
            let arr4 = $.each(arr, function(index, value) {
            //依旧是原数组返回，失效。
                  return value+ 1;
            })
            console.log(arr4)

简言之，一句话：forEach/$.each返回的是undefined/原数组，都无法通过return修改返回值;map/$.map返回的是【undefined,undefined,undefined,.....】或者空数组【】,都可以通过return修改返回值（jquery与原生代码策略上的“一致性”）。

总结，

只有$.each(function(index,value))中function的参数是（index,value）顺序，其他的都是（value,index）顺序。【便于记忆】; arr.map(function(value,index,arr))  中的function是3个参数，（value ,index,arr）。

Four.  $.trim(str)

主要用于祛除字符串str两边的空格，常见于校验等操作。使用的是返回的结果，并不改变原有字符串。

       let str="     左边空五格右边空五格      ";
                  // 去除两边的空格
                alert( "+++"+$.trim(str)+"+++") ;
                alert( "+++"+str+"+++") ;

 

Five.    $.isArray    vs  $.isFunction  vs  $.isWindow

三者的返回值都是布尔值，true/false。要特别说明的是let fn=$.isFunction(jQuery)返回值是true,表明jquery这个框架本身是个函数  ，打开jquery源代码，取首尾部分，格式形如（function()）（window）[随着版本的不同，function的参数不同，可以是( window, undefined )，也可以是( global, factory )],典型的匿名函数自调用。

            // 只能判别是否是“真”数组，伪数组不在其列
            alert($.isArray(arr))
            alert($.isArray(f_arr))  //伪数组，返回的是false

           //下面两种返回ture，说明jQuery框架本身是一个自调用函数！
            alert($.isFunction(jQuery));
            alert($.isFunction($));
           // 区分大小写，否则会报错：“jquery  is not  defined”.jQuery为正确。
            alert($.isFunction(jquery)); 
          
          //参照 window.load=function(){} 中的window。注意大小写
            alert($.isWindow(w));
            alert($.isWindow(window))
            //Window is undefined。正确格式：window
            alert($.isWindow(Winodw));

six

注意$.holdReady(false)的位置，目前来看，$.holdReady(false)只能写在html这里(行间样式)。我觉得这个可能是$.holdReady(true/false)较少用到的原因之一？！代码如下：

  <script>
            // 通常是成对的出现，中间包裹着“预加载”。这个预加载可以是原生的写法，也可以是
            // jquery的写法。
            $.holdReady(true)
            $(function() {
                  alert("$.holdReady(true) && $.holdReady(false) 是一对好机油啊！")
            })

            // 写在这里貌似没用！而且还会报错。
            // let btn = document.getElementsByTagName("button")[0];
            // btn.onclick = function() {
            //       $.holdReady(flase)
            // }
      </script>

</head>

<body>
<!-- $.holdReady(false)必须的得写在这里啊！ -->
      <button type="button" name="button"  onclick="$.holdReady(false)" >true --->flase </button>
</body>

<script>
// 写在这里也没有用！报错：“false”  is undefined。这么设计也有好处，因为写在这里，HTML已经加载完成了，无必要再使用$.holdReady(true/false)了：

      // $("button")[0].onclick = function() {
      //       $.holdReady(flase);
      // }