ChatGPTにjQueryをJavascriptに変換して貰った結果

以下は、jQueryからJavaScriptへの変換例です。

document.querySelectorAll('.class-name').forEach(function(element) {
  element.addEventListener('click', function() {
    let getId = this.parentNode.id;
  })
});

このコードは、クラス名が「class-name」であるすべての要素に対して、クリックイベントを追加し、クリックされた要素の祖先の2つ上の要素のIDを取得しています。querySelectorAllメソッドを使用して要素を取得し、forEachメソッドを使用して各要素に対してaddEventListenerメソッドを呼び出しています。また、クリックされた要素を表すthisキーワードを使用するのではなく、element変数を使用して要素を参照しています。

このコードをJavaScriptに変換すると以下のようになります。

var target = document.getElementById('target');
target.addEventListener('mouseenter', function() {
  target.style.background = '#cd5c5c';
});
target.addEventListener('mouseleave', function() {
  target.style.background = '#20b2aa';
});

最初に、 getElementById() メソッドを使用して、 id が target の要素を取得します。次に、 addEventListener() メソッドを使用して、 mouseenter イベント（マウスが要素内に入ったとき）と mouseleave イベント（マウスが要素から出たとき）に対するイベントリスナーを追加します。

イベントリスナー内では、 this を使用してマウスイベントが発生した要素にアクセスし、 style プロパティを使用して要素のスタイルを変更します。 hover() メソッドである2つのコールバック関数を使用して、jQueryのコードをJavaScriptに置き換えます。

このコードは、 maxlength プラグインを使用して、テキストエリアに入力できる最大文字数を制限し、ユーザーに残りの文字数を表示するものです。このプラグインはjQueryに依存しており、同じ機能をJavaScriptのみで実装するのは非常に手間がかかります。したがって、以下にはjQueryを使用したコードが示されています。

$('#name').maxlength({
	'feedback': '#name-maxlength';
});

$('#text').maxlength({
	'feedback': '#text-maxlength';
});

これらのコードでは、 maxlength プラグインが name と text のIDを持つテキストエリアに適用され、残りの文字数を表示するための要素のIDが name-maxlength および text-maxlength であることが指定されています。

プラグインのパラメーターをオプションで渡すことができ、ここでは feedback パラメーターが #name-maxlength および #text-maxlength のIDを持つ要素に設定されています。このパラメーターは、ユーザーが入力するたびにテキストエリアに残りの文字数を表示するために使用されます。

このコードは、 input イベントを監視し、入力されたテキストを別の要素に表示するものです。このコードをJavaScriptに変換すると以下のようになります。

var input = document.getElementById('input');
var output = document.getElementById('output');
input.addEventListener('input', function() {
	output.innerHTML = input.value;
});

最初に、 getElementById() メソッドを使用して、 id が input と output の要素を取得します。次に、 addEventListener() メソッドを使用して、 input イベントに対するイベントリスナーを追加します。

イベントリスナー内では、 input 要素の値を取得し、 innerHTML プロパティを使用して、 output 要素に表示します。jQueryの .on() メソッドは、JavaScriptの addEventListener() メソッドに相当します。また、jQueryの .html() メソッドは、JavaScriptの innerHTML プロパティに相当します。