jQuery的两把利器，jQuery核心函数与jQuery对象

灰太狼 2023-10-08 12:49 1阅读 0赞

本文章主要通过小练习的形式，来体现jQuery的核心函数以及jQuery对象。  
注：作者为jQuery初学者，本文为作者通过学习尚硅谷前端教程时，根据老师教学内容所作，仅供学习参考，如有错误请私信更正！

一、什么是jQuery核心函数、jQuery对象

1.  jQuery核心函数

*  简称: jQuery函数($/jQuery)
 *  jQuery库向外直接暴露的就是$/jQuery
 *  引入jQuery库后, 直接使用$即可
    
     *  当函数用: $(xxx)
     *  当对象用: $.xxx()

1.  jQuery核心对象

*  简称: jQuery对象
 *  得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
 *  使用jQuery对象: $obj.xxx()

二、jQuery核心函数

1.  理解  
    1）jQuery核心函数即：$或jQuery  
    2）jQuery定义了这个全局的函数供我们使用  
    3）它既可以作为一般函数调用，且传递的参数类型不同、格式不同功能就完全不同，也可作为对象调用其他定义好的方法，此时＄就是一个工具对象
2.  作为一般函数调用: $(param)  
    1). 参数为函数 : 当DOM加载完成后，执行此回调函数  
    2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象  
    3). 参数为DOM对象: 将dom对象封装成jQuery对象  
    4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
3.  作为对象使用: $.xxx()  
    1). $.each() : 隐式遍历数组  
    2). $.trim() : 去除两端的空格

源码解释：

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>03_jQuery核心函数</title>
    </head>
    
    <body>
    
    <div>
      <button id="btn">测试</button>
      <br/>
    
      <input type="text" name="msg1"/><br/>
      <input type="text" name="msg2"/><br/>
    </div>
    
    
    
    <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    <script type="text/javascript">
      /*
       需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
       需求2. 遍历输出数组中所有元素值
       需求3. 去掉"  my atguigu  "两端的空格
       */
    
      $(function(){
          //绑定文档加载完成的监听
        //2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
        var $btn = $("#btn");
        $btn.click(function (){
          //点击事件监听器
          //this是什么？ 发生事件的dom元素
          this.innerHTML;
          // console.log(this.innerHTML);
          $(this).html()//3). 参数为DOM对象: 将dom对象封装成jQuery对象
          console.log($(this).html());
    
          //4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
          $('<input type="text" name="msg3"/><br/>').appendTo('div');
        });
      });
    
      //需求2. 遍历输出数组中所有元素值
      var arr = [1,2,3,4,5,6,7,8,9];
      //1). $.each() : 隐式遍历数组
      $.each(arr, function(i, v){
         
        console.log(i, v);
      });
    
      //需求3. 去掉"  my atguigu  "两端的空格
      var str = "   I like China.   ";
      console.log("----"+$.trim(str)+"----");
    </script>
    </body>
    
    </html>

三、jQuery对象

1.  理解  
    1）jQuery对象，即执行jQuery核心函数返回的对象  
    2）jQuery对象内部包含的是dom元素对象的伪数组（可能只有一个元素，伪数组的定义在例举代码中做出了介绍）  
    3）jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom
2.  jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
3.  基本行为  
    1）size()/length: 包含的DOM元素个数  
    2） \[index\]/get(index): 得到对应位置的DOM元素  
    3）each(): 遍历包含的所有DOM元素  
    4） index(): 得到在所在兄弟元素中的下标

源码解释:

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>04_jQuery对象</title>
    </head>
    
    <body>
    <button>测试一</button>
    <button>测试二</button>
    <button id="btn3">测试三</button>
    <button>测试四</button>
    
    
    <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    
      /*
       需求:
       需求1. 统计一共有多少个按钮
       需求2. 取出第2个button的文本
       需求3. 输出所有button标签的文本
       需求4. 输出'测试三'按钮是所有按钮中的第几个
       */
    
      // 需求1. 统计一共有多少个按钮
      /* size()/length:包含的DOM元素 */
      var $btn1 = $("button");
      console.log($btn1.size() + "--" + $btn1.length);
      
      // 需求2. 取出第2个button的文本
      /* [index]/get(index):得到对应位置的DOM元素 */
      console.log($btn1[1].innerHTML +"---"+ $btn1.get(1).innerHTML);
    
      // 需求3. 输出所有button标签的文本
      /* each():遍历包含的所有DOM元素 */
      $btn1.each(function(i, e){
         
        console.log("index = "+i+", text = "+e.innerHTML);
        console.log(this.innerHTML);
      });
    
      // 需求4. 输出'测试三'按钮是所有按钮中的第几个
      /* index():得到所在兄弟元素中的下标 */
      console.log($('#btn3').index());
    
      /*  
        1.伪数组
          Object对象
          length属性
          数值下标属性
          没有数组特别的方法：forEach(), push(), pop(), splice()
      */
      //验证伪数组是否为数组
      console.log(typeof $btn1);
      console.log($btn1 instanceof Array);
      var fakeArr = {
         };
      fakeArr.length = 0;
      fakeArr[0] = 'Etui';
      fakeArr.length = 1;
      fakeArr[1] = 123;
      fakeArr.length = 2;
      for(var i=0; i<fakeArr.length; i++){
         
        console.log('index:'+i+"value:"+fakeArr[i]);
      }
      console.log(fakeArr.forEach, $btn1.foreach);
    </script>
    </body>
    </html>