提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

【jQuery】jQuery之类数组对象操作_08

jQuery对象数组 操作 08 之类
2023-09-14 09:13:40 时间

目录

❣️ 类数组对象操作

1. 问题

2. 解决

3. 遍历

4. 查找元素

❣️ 总结：jQuery简化版函数3大特点 

❣️ 总结：$()共有4种

❣️ 总结：知识点提炼

🆙【前文回顾】👉 一文详解jQuery动画_07

❣️ 类数组对象操作

1. 问题

js中类数组对象非常受歧视。因为虽然类数组对象长的像数组，但是却无法使用数组家提供的所有好用的函数。

⏬ 关于类数组对象的定义：
 

所谓"类数组对象"就是一个常规的Object对象，如$("p")但它和数组对象非常相似：具备length属性，并以0、1、2、3……等数字作为属性名。
 

不过它毕竟不是数组，没有从数组的原型对象上继承下来的内置方法(例如：push()、 sort()等)
 

⏬  jQuery中将类数组对象转换为数组对象的方法

在jquery中可以通过markArray方法将类数组对象转换为数组对象，如：
 

var result = $.makeArray($("p"));
console.log(result instanceof Array);

此时的代码打印出来的结果为true、在es6中，可以使用Array.from(...)来实现数组的转换：
 

Array.from(document.getElementsByTagName("p")

2. 解决

因为jQuery的查找结果对象都是类数组对象，所以，为了便于对jQuery查找结果对象进行常用的操作，jQuery中模仿着js中数组的函数，定义了两个功能类似的函数: 遍历each()  查找index()

3. 遍历

         (1). 回顾: js中:

         a. 数组.forEach(function(elem,i,arr){

                  对当前元素值elem执行操作

           })

         b. 原理:

                  1). forEach内自带for循环，自动遍历数组中每个元素

                  2). 每遍历一个元素就自动调用一次回调函数

                  3). 每次调用回调函数时都自动传入三个值:

                  i. 将当前正在遍历的元素值传给回调函数的第一个形参

                  ii. 将当前正在遍历到的下标位置传给回调函数的第二个形参

                  iii. 将当前正在遍历的整个数组对象传给回调函数的第三个形参

                  4). 在回调函数内部对每个遍历出的元素值执行相同的操作

正在上传…重新上传取消正在上传…重新上传取消

         (2). jq中:

         a. $查找结果.each(function(当前下标位置, 当前DOM元素){

                  对当前DOM元素执行相同的操作

           })

         b.原理:

                  1). each内自带for循环，自动遍历jq查找结果中每个DOM元素对象

                  i. 强调: 因为jq查找时，是将找到的多个DOM元素对象放入jq查找结果中。所以当each遍历jq查找结果时，取出的也是每个DOM元素对象

                  2). 每遍历一个DOM元素对象就自动调用一次回调函数

                  3). 每次调用回调函数时都自动传入两个值:

                  i. 将当前正在遍历到的下标位置传给回调函数的第一个形参

                  ii. 将当前正在遍历的DOM元素对象传给回调函数的第二个形参

                  4). 在回调函数内部对每个遍历出的DOM元素对象执行相同的DOM操作。

                  i. 强调：each遍历出的每个DOM元素对象不能直接调用jquery简化版函数。如果需要调用简化版函数，必须用$()再封装一下。

         c. 示例: 遍历查找结果中每个元素，执行要求的操作

         9_each.html

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
</head>

<body>

  <ul id="list">
    <li>98</li>
    <li>85</li>
    <li>33</li>
    <li>99</li>
    <li>52</li>
  </ul>

  <script src="js/jquery-1.11.3.js"></script>
  <script>
    //回顾:js中的arr.forEach()
    var arr = ["亮亮", "然然", "东东"]
    //              当前姓名字符串
    //                    ↓
    arr.forEach(function (elem) {
      console.log(`${elem} - 到！`)
    })

  //请给每个不足60分的成绩+10分，并将超过90分的成绩用绿色背景标识出来
    $("ul>li").each(function(i,elem){
      console.log(`自动调用了一次回调函数`);
      console.log(elem);
      //需要将取出的每个DOM元素对象，再包装成jq对象，才能继续调用简化版函数！
      var $elem=$(elem);
      //先获得当前元素中保存的成绩，转为整数
      // var score=parseInt(elem.innerHTML);
      var score=parseInt($elem.html());
      //如果成绩<60分，就+10分，然后再放回当前元素中
      if(score<60){
        score+=10;
        // elem.innerHTML=score;
        $elem.html(score);
      }else if(score>=90){//否则如果成绩>=90分，就让当前元素背景变绿
        // elem.style.backgroundColor="green";
        $elem.css("backgroundColor","green");
      }
    })
  </script>
</body>

</html>

运行结果：
 

4. 查找元素

         (1). 回顾: js中:

         a. var i=arr.indexOf(元素值)

         b. 原理: 查找指定元素值在数组中的下标位置。

                  1). 如果找到，返回元素所在的下标位置

                  2). 如果没找到，返回-1

         (2). jq中:

         a. var i=$查找结果.index(DOM元素)

         b. 原理: 查找指定的一个DOM元素在整个查找结果中的下标位置

                  1). 如果找到，返回元素所在的下标位置

                  2). 如果没找到，返回-1

         c. 示例: 5分好评

         10_index.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .score {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .score li {
      display: inline-block;
      width: 50px;
      height: 50px;
      border: 1px solid #f00;
      border-radius: 50%;
      cursor: pointer;
    }
  </style>
</head>
<body>

<h3>请打分</h3>
<ul class="score">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<script src="js/jquery-1.11.3.js"></script>
<script>
  //回顾: js中
  var arr=["亮亮","然然","东东"];
          // 0      1      2
  var i=arr.indexOf("然然");
  console.log(`然然坐在${i}位置`);
  var i=arr.indexOf("凉凉");
  console.log(`凉凉坐在${i}位置`);


  //获得当前单击的li在所有li中的位置i,i及其执行的都变为红色，i之后的都变为白色
  //DOM 4步
  //1. 查找触发事件的元素
  //本例中: 查找class为score的ul下的所有li
  $("ul.score>li")
  //2. 绑定事件处理函数
  .click(function(){
    //3. 查找要修改的元素
    //4. 修改元素
    //获得当前点击的li是所有li中第几个
    var i=$("ul.score>li").index(this)
          //查找结果             当前点的li
    alert(i);
    //让>i位置的所有li，背景变为白色
    $(`ul.score>li:gt(${i})`)
    .css("backgroundColor","#fff");
    //让<i+1位置的所有li，背景变为黄色
    $(`ul.score>li:lt(${i+1})`)
    .css("backgroundColor","yellow");
  })

</script>
</body>
</html>

运行结果:

  

❣️ 总结：jQuery简化版函数3大特点 

1. 自带for循环

2. 一个函数两用

3. 绝大多数函数都会自动返回正在操作的.前的主语jq对象。如果后一句话所需的.前的主语，刚好和前一句话返回的主语相同，则可以直接用.继续操作，不用把.前主语反复写2遍！——链式操作。👉 链式操作具体示例——参看按节点间关系查找之示例7_tabs.html⏫

❣️ 总结：$()共有4种

1. $("选择器") 查找DOM元素，并包装进jQuery对象中

2. $(DOM元素对象) 不用查找，直接将DOM元素包装进jQuery对象中

3. $(`HTML片段`) 创建新元素

4. $(function(){ ... }) 绑定DOMContentLoaded事件处理函数，在DOM内容加载后就自动提前执行！

❣️ 总结：知识点提炼

1. 引入jQuery.js: 2种

(1). 引入项目本地jquery.js文件:

<script src="js/jquery-1.11.3.js">

(2). 引入CDN网络中共享的jquery.js文件:

<script src="官方提供的CDN上jquery.js文件地址">

2. 创建jQuery类型子对象: 2种

(1). 只有jQuery类型子对象才能使用jQuery家简化版函数。

DOM家元素对象无权直接使用jQuery家简化版函数。

所以只要使用jQuery家简化版函数，都要先创建jQuery家子对象，其中保存一个要操作的DOM元素对象。

(2). 如何:2种:

         a. 查找DOM元素对象，并保存进新创建的jQuery对象中:

         var $jq子对象=$("选择器")

         b. 不查找，直接将DOM元素对象保存进新创建的jQuery对象中:

         var $jq子对象=$(DOM元素对象)

3. 原理:

(1). $=jQuery=new jQuery

(2). jq子对象其实是一个类数组对象，可保存找到的多个DOM元素对象

(3). 对jq子对象调用简化版函数，会被自动翻译为对应的原生DOM的方法和属性。

         所以jQuery中的所有简化版函数效果和DOM中原生方法和属性效果一样。

         jQuery中的this、e、e.target等，和DOM中的完全一样！

4. jQuery简化版函数3大特点:

(1). 自带for循环: 对整个jquery子对象调用一次简化版函数，等效于对jQuery子对象中保存的每个DOM元素对象分别调用一次对等的DOM原生方法或属性——不用自己写for循环

(2). 一个函数两用: 调用函数时:

         a. 没给新值作为参数，默认执行获取旧值的操作

         b. 给了新值作为参数，自动切换为执行修改操作

(3). 多数函数都会返回正在操作的.前的主语jq对象——链式操作。

5. 查找元素:

(1). jQuery支持用所以CSS3选择器查找

(2). jQuery新增选择器: (css中不能用)

         a. 基本过滤: (下标从0开始)

         :first :last :eq(i) :lt(i) :gt(i) :even  :odd

         b. 内容过滤:

         :contains(文本) :has(选择器) :parent :empty

         c. 可见性过滤:

         :visible  :hidden(只能选择display:none和input type="hidden")

         d. 表单元素过滤:
         :input  :text  :password  :radio  :checkbox ... ...

(3).用节点间关系查找: 2大类关系, 8个函数

      a. 父子关系：3个函数:

      $元素.parent()

      $元素.children("选择器")

      $元素.find("选择器")

      b. 兄弟关系：5个

      $元素.prev() 

      $元素.prevAll("选择器")

      $元素.next() 

      $元素.nextAll("选择器")

      $元素.siblings("选择器")

6. 修改元素: 3种:

修改中的所有函数，都是一个函数两用！

(1). 内容: 3种:

         a. 原始HTML内容:

         $元素.html("新HTML内容") 代替.innerHTML

         b. 纯文本内容:    

         $元素.text("纯文本内容") 代替.textContent

         c. 表单元素的值:  

         $元素.val("新值") 代替.value

(2). 属性: 3种:

         a. 字符串类型的HTML标准属性:2种:

      1). $元素.attr("属性名","新属性值")

      代替 元素.getAttribute()和setAttribute()

      2). $元素.prop("属性名", bool值)

      代替 元素.属性名=bool值
         b. bool类型的HTML标准属性: 只有1种

         $元素.prop("属性名", bool值)

         代替 元素.属性名=bool值

         c. 自定义扩展属性:只有一种:

         $元素.attr("属性名","新属性值")

         代替 元素.getAttribute()和setAttribute()

         反过来总结:

         $元素.attr()可修改一切字符串类型的属性(字符串类型HTML标准属性+自定义扩展属性)

         $元素.prop()可修改一切可用.访问的属性(所有HTML标准属性)

(3). 样式:

         a. 获取或修改单个css属性: 只有1种

         $元素.css("css属性名", "属性值")

         获取属性值时被翻译为getComputedStyle(元素)

         修改属性值时被翻译为.style.css属性=属性值

         b. 使用class批量修改样式:

      $元素.addClass("class名")

      $元素.removeClass("class名")

      $元素.hasClass("class名")

      $元素.toggleClass("class名")

修改相关的函数都可同时修改多个属性值:

$元素.attr或prop或css({

   属性名:"属性值",

       ... : ...

})

7. 添加删除替换克隆元素: 

(1). 添加新元素: 2步

         a. 使用HTML片段批量创建新元素:

         $(`HTML片段`)

         b. 将新元素添加到DOM树: 5种方式，10个函数

      1). 末尾追加:

      $父元素.append($新元素)

      $新元素.appendTo($父元素)
      2). 开头插入: 新增:
      $父元素.prepend($新元素)

      $新元素.prependTo($父元素)

      3). 插入到一个现有元素之前:

      $现有元素.before($新元素)

      $新元素.insertBefore($现有元素)

      4). 插入到一个现有元素之后:

      $现有元素.after($新元素)

      $新元素.insertAfter($现有元素)

      5). 替换现有元素:

      $现有元素.replaceWith($新元素)

      $新元素.replaceAll($现有元素)

(2). 删除元素: $元素.remove()

(3). 克隆元素: $元素.clone()

(4). 判断一个元素是否具有什么特征: $元素.is("选择器")

8. 事件绑定:

(1). 标准写法:
      $元素.on("事件名", 事件处理函数)

      $元素.off("事件名", 原事件处理函数)

(2). 简写: $元素.事件名(事件处理函数)

(3). 事件委托:

$父元素.on("事件名","选择器",function(){

         ...this指向e.target...

})

9. 事件: 

(1). 页面加载后自动执行:

         a. 先$(document).ready(function(){})

      简写: $(function(){ ... })

         b. 后$(window).load(function(){ ... })

(2). 鼠标事件:

mouseenter代替mouseover

mouseleave 代替mouseout

简写: .hover(处理函数1,处理函数2)

等于: .mouseenter(处理函数1)

    .mouseleave(处理函数2)

(3). 模拟触发:

         a. 标准: $元素.trigger("事件名")

         b. 如果属于常用事件列表，可简写为:

      $元素.事件名()

10. 动画:  

(1). 简单动画: 3种固定效果

         a. 显示隐藏:

      .show() .hide() . toggle()

         b. 淡入淡出:

      .fadeIn() .fadeOut() .fadeToggle()

         c. 上滑下滑:

      .slideUp() .slideDown() .slideToggle()

(2). 万能动画:

$元素.animate({

  css属性: 目标值

},动画持续时间,function(){

  动画播放结束自动执行

})

(3). 排队和并发:

         a. 放在一个animate()中的多个css属性并发变化

         b. 放在一个元素的多个animate()中的多个css属性排队变化

(4). 停止动画:

         a. 只停止当前一个动画

      $元素.stop()

         b. 停止队列中所有动画

      $元素.stop(true)

(5). 选择器匹配正在播放动画的元素: :animated

11. 类数组对象操作: ⏬ 👇

(1). 遍历查找结果中每个DOM元素对象:

  $查找结果.each(function(i, domElem){ ... })

(2). 查找一个DOM元素在整个查找结果中的下标位置

  var i=$查找结果.index(要找的DOM元素)

🆕【后文传送门】👉  如何添加自定义函数及封装自定义插件_09

​​​​

如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！ 

相关文章