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

最新推荐文章于 2024-08-28 14:58:40 发布

Etui۹(･༥･´)و ̑̑

最新推荐文章于 2024-08-28 14:58:40 发布

阅读量232

点赞数 1

分类专栏： jQuery 文章标签： javascript jQuery jQuery核心函数 jQuery对象

本文链接：https://blog.csdn.net/m0_47015897/article/details/116890577

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

jQuery核心函数

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

jQuery核心对象

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

二、jQuery核心函数

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


<!--
1. 作为一般函数调用: $(param)
  1). 参数为函数 : 当DOM加载完成后，执行此回调函数
  2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
  3). 参数为DOM对象: 将dom对象封装成jQuery对象
  4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
2. 作为对象使用: $.xxx()
  1). $.each() : 隐式遍历数组
  2). $.trim() : 去除两端的空格
-->
<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）jQuery对象，即执行jQuery核心函数返回的对象
2）jQuery对象内部包含的是dom元素对象的伪数组（可能只有一个元素，伪数组的定义在例举代码中做出了介绍）
3）jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom
jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
基本行为
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>

<!--
1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2. 基本行为
  * size()/length: 包含的DOM元素个数
  * [index]/get(index): 得到对应位置的DOM元素
  * each(): 遍历包含的所有DOM元素
  * index(): 得到在所在兄弟元素中的下标
-->
<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>

Etui۹(･༥･´)و ̑̑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的两把利器，jQuery核心函数与jQuery对象

本文章主要通过小练习的形式，来体现jQuery的核心函数以及jQuery对象。注：作者为jQuery初学者，本文为作者通过学习尚硅谷前端教程时，根据老师教学内容所作，仅供学习参考，如有错误请私信更正！一、什么是jQuery核心函数、jQuery对象jQuery核心函数简称: jQuery函数($/jQuery)jQuery库向外直接暴露的就是$/jQuery引入jQuery库后, 直接使用$即可当函数用: $(xxx)当对象用: $.xxx()jQuery核心对象简称
复制链接

扫一扫

专栏目录