jquery原理与ajax基础系列(二)之核心函数

10 篇文章 0 订阅
9 篇文章 0 订阅

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);
      // }
     

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值