【jQuery】カスタムデータ属性を持っているかどうか判別する方法

カスタムデータ属性を持っているかどうかチェックしたかったときの備忘録
is()とdata()を使ってカスタムデータ属性の有無をチェックできた

is()を使ってカスタムデータ属性の確認

<div id="btn" data-test="aaa">ボタン</div>

<script>
if($('#btn').is('[data-test]')){
	console.log('true');//カスタムデータ属性持っているからtrue
}else{
	console.log('false');
}
//　出力結果
console.log($('#btn').is('[data-test]'));// true
</script>

is()はセレクタを指定できるみたい

メモ；セレクタとは

セレクタってなんだっけ？って調べたら
CSSでスタイルを指定するための条件式みたい

div{}や#btn{}とか[data-test]{}もセレクタだって

試しに以下のCSSやってみたら適用された

<style>
[data-test]{
	background: red;
}
</style>

この書き方できるの知らなかった…

data()を使ってカスタムデータ属性を確認できる

<div id="btn" data-test="aaa">ボタン</div>

<script>
if($('#btn').data()){
	console.log('true');//カスタムデータ属性持っているからtrue
}else{
	console.log('false');
}
//　出力結果
console.log($('#btn').data());// {test: "aaa"}←キーと値返す
console.log($('#btn').data('test'));// aaa←値返す
console.log($('#btn').data('test','aaa'));// n.fn.init [div#btn…]←なんだこれ？
</script>

data()使ってもカスタムデータ属性があるかどうか確認できる
こっちのがシンプルだしいいかも

メモ：n.fn.initってなんだ？

デベロッパーツールで確認してたら$('#btn').data('test','aaa')の時にn.fn.init [div#btn…]って出てくるんだけど、jQueryオブジェクトってやつみたい
調べても理解できん

$.fn.log = function() {
	console.log.apply(console, this);
	return this;
};
console.log($('#btn').data('test','aaa').log());

と書くことで

<div id="btn" data-test="aaa">ボタン</div>

というわかりやすいデバック結果を得られるとのこと
何をしているのかはわからん