首页 前端知识 jQuery中的find()和原生JS中的find()方法的区别

jQuery中的find()和原生JS中的find()方法的区别

2024-07-24 23:07:43 前端知识 前端哥 647 898 我要收藏

jQuery find()方法?

1、定义及用法:返回被选元素的后代元素,后代是子、孙、曾孙,依此类推。

     $(selector) .find(filter)  ; 参数必选,可为元素、jQuery对象或选择器表达式。

    若要返回所有的后代元素,请使用"*"选择器。

    若返回多个后代,用逗号分隔每个表达式。

    扩展:DOM树--该方法沿着DOM元素的后代向下遍历,直到最后一个后代。

   若只需遍历向下遍历DOM树中的单一层级(返回直接子元素),请使用children()方法。

2、简单 示例:$(“ul”).find(“span”).css({“color”:“red”});

       返回所有<ul>后代中的所有<span>元素,样式改为红色。

     $("html").find("*").css({"color":"red"});

       返回所有<html>后代中的所有元素,样式改为红色。

     $("div").find(".name1").css({"color":"red"});

       返回所有类名为name1的所有元素,样式改为红色。

     即,<div>下的元素,属性class=name1,的所有元素。

原生JS中的find()方法

一:概念
find()方法用于查找数组中符合条件的第一个元素,如果没有符合条件的元素,则返回undefined

注意:

find() 对于空数组,函数是不会执行的。

find() 并没有改变数组的原始值。

二:语法

array.find(function(currentValue, index, arr),thisValue)

参数

callback:必须。为数组中每个元素执行的函数,该函数接受三个参数:
currentValue:必须。数组中正在处理的当前元素。
index:可选。当前元素的索引值。
arr:可选。当前元素所在的数组对象。
thisValue:可选。传递给函数的值一般用 “this” 值。
如果这个参数为空, “undefined” 会传递给 “this” 值

三:实例
1、求数组中第一个大于1的值

let arr1 = [1, 2, 3, 4, 5];
let num = arr1.find(item => item > 1);
console.log(num)  //輸出的結果是2

2、提取第一个id为1的对象

 var arr = [{
        id: 1,
        name: '张一',
        age: 25,
        class: '一班'
    }, {
        id: 1,
        name: '张二',
        age: 25,
        class: '二班'
    }, {
        id: 2,
        name: '张三',
        age: 25,
        class: '三班'
    }]
    let obj = arr.find(item => item.id == 1)
    console.log(obj); 
    // 结果:{id: 1, name: '张一', age: 25, class: '一班'}

原文链接:https://blog.csdn.net/m0_59168984/article/details/121557906

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14331.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!