JQuery对象与Dom对象初次入坑

首先感谢前端大佬对自己的指点
问题背景：测试平台在做api用例管理的时候，有对api的编辑功能，用户点击编辑打开的编辑页面中有动态的根据api的参数的数量生成input输入框并进行赋值，然后博主在使用JQuery赋值函数.val()的时候发现前端报错 inputs[i].val is not a function，下面进行分析
下图是截取的api表格中的，可以看到这里有两个请求参数 phone 和action

用户点击编辑后的实现效果如下图

这部分的处理代码如下

let params = [];params = para.split(',');//console.log(params);for (let i=0;i<params.length;i++){    add_params();    setTimeout(function () {        let inputs = $('#paramsgroup > input');        //console.log(inputs[i], typeof inputs[i]);        $(inputs[i]).val((params[i]))    },10)}

这里博主在调试的时候打印了inputs[i]和他的类型，确实没有问题，然后使用以下代码进行input赋值的时候就出现了错误提示

inputs[i].val((params[i]))

这个是因为通过定位获取到的inputs对象组就是dom对象，inputs[i]当然也是dom对象，是没有val()函数的，必须使用美元符号转成JQuery对象之后就成功实现了效果，为了对比，我们使用dom对象的value属性

let params = [];params = para.split(','); //console.log(params); for (let i=0;i<params.length;i++){     add_params();     setTimeout(function () {         let inputs = $('#paramsgroup > input');         //console.log(inputs[i], typeof inputs[i]);         //$(inputs[i]).val((params[i]))         inputs[i].value = params[i]     },10) }

也实现了同样的效果，证明确实之前的问题是JQuery对象与dom对象混用导致
附上在chrome console里面进行测试。

显然a[0]是个dom对象，我们通过美元符号转成JQuery对象之后，可以点击查看‘proto’，里面包含了各种函数