フロントエンド - $(...) [0].attr は関数ではありません。

I. 問題分析。
$(...)[0] は dom オブジェクトを返します。
また、attr()メソッドは、JQueryオブジェクトでのみ使用可能です。

そこで、$(...).eq()を使用します。

第二に、DomオブジェクトとJQueryオブジェクトの違いについて
https://www.cnblogs.com/xiaomaozi168/p/8615440.html

1. DOMオブジェクト
DOM は、実際にはオブジェクト指向で記述された文書モデルです。DOM は、文書を表現し修正するために必要なオブジェクト、それらのオブジェクトの動作と特性、およびそれらのオブジェクト間の関係を定義しています。
W3CのDOM仕様によると、DOMはHTMLとXMLのアプリケーションプログラミングインターフェース（API）である。
DOM を使用すると、すべての HTML 要素に、それらが含むテキストと属性とともにアクセスすることができます。また、その中のコンテンツを変更したり削除したり、新しい要素を作成することもできます。
HTML DOMは、プラットフォームやプログラミング言語に依存しません。Java、JavaScript、VBScript などのあらゆるプログラミング言語で使用することができます。
DOMオブジェクト、つまり従来の方法（javascript）で取得するオブジェクトです。

2. jQueryオブジェクト
jqueryオブジェクトは、実際にはjavascriptの配列です。
この配列オブジェクトには、125のメソッドと4つのプロパティが含まれています
4つのプロパティは
jquery 現在のjqueryフレームワークのバージョン番号です。
length 配列オブジェクトの要素数を表します。
context は一般に HtmlDocument オブジェクトへの参照である
selector 渡されたセレクタの内容（例：#yourId、.yourClass など）。

セレクタを $("#yourId") メソッドを使用して jquery オブジェクトを取得すると
で、あなたのページにはyourIdというidを持つ要素が1つだけあります。
すると $("#yourId")[0] が HtmlElement 要素になります。
document.getElementById("yourId") によって取得されたものと同じ要素である。

簡単に言うと、jQueryが作成したオブジェクトです。
jQueryオブジェクトは、DOMオブジェクトをjQueryでラップして作成されたオブジェクトです。jQueryオブジェクトはjQuery独自のもので、jQueryのメソッドを使用できますが、DOMのメソッドは使用できません

3. DOMオブジェクトとjqueryオブジェクトの違いについて
[javascript】を使用します。］
var domObj = document.getElementById("id"); //DOMオブジェクト
var $obj = $("#id"); //jQueryオブジェクトです。
[javascript] を使用します。
KaTeX のパースエラーです。期待される 'EOF', 得られた '#' at position 3: ("#̲img").attr("src... ("#img") は、jQueryオブジェクトを取得するためのものです。
[javascript] を使用します。
document.getElementById("img").src"test.jpg";// ここで document.getElementById( "img" )はDOMオブジェクトです。
もう一つ例を挙げると、これは私がjQueryを書くときによく書くものだ。
this.attr("src", "test.jpg");
しかし、エラーが発生します。実はこれはDOMオブジェクトであり
.attr("src", "test.jpg")
jQueryのメソッドなので、エラーになります。これを修正するには、DOMオブジェクトをjQueryオブジェクトに変換する必要があります。
$(this).attr("src", "test.jpg") を実行します。

4、DOMオブジェクトとjqueryオブジェクトの変換

DOMオブジェクトをjQueryオブジェクトに変換します。

すでに DOM オブジェクトになっているものについては、単に $() DOMオブジェクトをラップして、jQueryオブジェクトを取得します。
メソッド：$(DOMオブジェクト)

var v=document.getElementById("v"); //DOM object  
var $v=$(v); //jQuery object  

jQueryオブジェクトをDOMオブジェクトに変換します。
2つの変換で、jQueryオブジェクトをDOMオブジェクトに変換します。[index]と.get(index)です。

(1) jQueryオブジェクトはデータオブジェクトであり、[index]メソッドを使用することで対応するDOMオブジェクトを取得することができます。

var $v =$("#v") ; //jQuery object  
var v=$v[0]; //DOM object  
alert(v.checked) //check if this checkbox is checked  

(2) jQuery自身が、.get(index)メソッドを介して、対応するDOMオブジェクトを提供する。

var $v=$("#v"); //jQuery object  
var v=$v.get(0); //DOM object  
alert(v.checked) //check if this checkbox is checked