Jqueryのクリックとかミスしたこととかのメモ

1、jQueryのクリック操作について

以前はjQueryのクリック操作において、以下の様にする癖があった。

linkAndRemoveButton.click(function(){
  bookmarks.popup.removeBookmark(id,p);
});

 

しかし、これだとnative jsで言うonclickのような処理になってしまい、複数のイベントを登録できない等の弊害がある。

そこで以下の様に書くこと。

linkAndRemoveButton.on("click",function(){
  bookmarks.popup.removeBookmark(id,p);
});

 

これだと、addeventlistener風に使える。

また、レシーバーは$("#hoge")で定義したものを使うこと。

よくnative jsで定義した変数を使いがちだが、jQueryは自身をインスタンス化した上でonメソッド等を使うので、$で定義したものをレシーバーにする必要がある。

(と言うより、jQueryのメソッドを使いたければ、レシーバーは必ず$やjQueryで定義したものでなければダメ)

appendとかappendChildとか

appendとかappendChildとかがややこしい。

jQueryの場合はappend。jQueryらしく簡潔なメソッドになっているのが特徴。

$('.hoge').append(hoge)

一方でJavascriptの方は冗長な印象。

let parent = ;
let child = ;
parent.appendChild(child)

後、子要素を前に持ってきたい場合はjqueryではprependがある。

$('#parent').prepend(child);

JavaScriptの場合はinsertBeforeメソッドを使って実現する。

child.parentNode.insertBefore(newElement,child.parentNode.firstElementNode);