jQuery的第二天~

强风拂过
122 阅读1分钟

「这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战」

第四节

jQuery核心函数

$()：就代表调用jQuery的核心函数。

HTML代码：

    <body>
        <div class="box1"></div>
        <div id="box2"></div>
        <span>我是span</span>
    </body>
  • 接收一个字符串选择器，返回一个jQuery对象，对象中保存了找到的DOM元素
       var $box1=$(".box1");
       console.log($box1);
       var $box2=$("#box2");
       console.log($box2)
  • 接受一个字符串代码片段，返回一个jQuery对象，对象中保存了DOM元素
       var $p=$("<p>我是一个段落</p>");
       console.log($p);
       //将$p代码片段添加到$box1中去（即：给类名为box1的div添加一个p段落元素）
       $box1.append($p)
  • 接收一个DOM元素
       var span=document.getElementsByTagName("span")[0];
       console.log(span);
  • span被包装成一个jQuery对象返回
       var $span=$(span);
       console.log($span);

jQuery对象

1. 什么是jQuery对象？

  • jQuery对象是一个伪数组

2. 什么是伪数组？

  • 有0到length-1的属性，并且有length属性

示例代码：

        <body>
            <div>div1</div>
            <div>div2</div>
            <div>div3</div>
        </body>

        var $div=$("div");
        console.log($div);
        
        var array=[1,3,5];
        console.log(array);

结果：

image.png

jQuery的静态方法和实例方法

step1. 定义一个类

     function AClass(){}

step2. 给这个类添加一个静态方法（直接添加给类的就是静态放法）

      AClass.staticMethod=function(){
          alert("staticMethod");
      }

step3. 给这个类添加一个实例方法

      AClass.prototype.instanceMethod=function(){
          alert("instanceMethod");
      }

方法的调用：

  • 静态方法通过类名调用
    • 类名.静态方法名：AClass.staticMethod();
  • 实例化方法调用
    • 通过实例调用方法 
            //创建一个实例化对象并调用其方法
      var a=new AClass();
      a.instanceMethod()

调用结果：

image.png

jQuery 的常用内置静态方法

$.trim();

  • 作用：去除字符串两端的空格
  • 参数：需要去除空格的字符串
  • 返回值：去除空格之后的字符串 代码示例：
     var str="   zxy   ";
     console.log("---"+str+"---");
     var res=$.trim(str);
     console.log('---'+res+'---');

结果：

image.png

$.isWindow(w);

  • 作用：判断传入的对象是否是window对象
  • 返回值：True/False

代码示例：

    var w=window;
    var res=$.isWindow(w);
    console.log(res);

结果：

image.png

$.isArray(arr);

  • 作用：判断传入的对象是否是真数组
  • 返回值：True/False 代码示例：
    var arr=[1,3,5,7,9];
    var res=$.isArray(arr);
    console.log(res);

结果：

image.png

$.isFunction(fn);

  • 作用：判断传入的对象是否是函数
  • 返回值：True/False
  • 注意点：
    • jQuery本身就是一个函数(function(window,undefined){})(window));

代码示例：

        var arr=[1,3,5,7,9];
        var res = $.isFunction(jQuery);
        console.log(res);
        var res1 = $.isFunction(arr);
        console.log(res1);

结果：

image.png

type();

  • 作用：判断传入对象的类型。 代码示例：
        var arr=[1,3,5,7,9];
        var w=window;
        var obj={"name":"zxy",age:"18"};
        var fn=function(){};

        var a1 = $.type(arr);
        console.log(a1);

        var a2 = $.type(w);
        console.log(a2);

        var a3 = $.type(obj);
        console.log(a3);

        var a4 = $.type(fn);
        console.log(a4);

$.holdReady(true);

  • 作用：暂停ready事件的执行

代码示例： 禁用jQuery的ready事件的默认执行，当点击按钮释放禁用。

<body>
    <button>恢复ready事件</button>
    <script>

        $.holdReady(true);
        $(document).ready(function(){
            console.log("ready");
        });

        var btn=document.getElementsByTagName("button")[0];
        btn.onclick=function(){
            $.holdReady(false);
        }
    </script>
</body>

结果：点击按钮前不会打印 ready 文本，而点击按钮后立即打印。

avatar
文章
阅读
粉丝