むむ、難しい…。まだまだ続きます、jQuery!!
前回のブログでも3章は難しいと言いました。3-7まで参考書を進めましたが、書き方が複雑になってきて、難易度が高くなっています!
今日の勉強で気付いたことを何点か書いていこうと思います。
①「:not」はすごくよく使う!
3章の初めからここまで、:notを使って一番初めの要素だけを表示にしておいたり、クラスを付けておいたりする書き方が多いです。
jQueryの命令にはマウスオーバーやクリックなどのイベントが必ずと言ってよいほど登場します。でも、イベント系の命令前に、最初の初期状態を記述しておくんです。例えばcssでdisplay: none;にしておいたり、クラスを前もって付けておくなどです。
②位置を取得する
位置を取得するのに、実は1章でも登場してきたんです。function(e)という書き方をして、3-5のツールチップではpositionを指定していました。
"top": e.pageY + 10 + "px",
"left": e.pageX + 10 + "px"
実は1章の時点で「どこで使うんだろう」と思っていたのですが、こういう場面で出てくると覚えるのが必須に感じました。
それと、「offset()」!これもX座標・Y座標を取得するjQueryの命令です。これも今回初めて登場しました。
③setTimeout()
一定の時間がたった後に…という、時間差を指定できる記述です。今回はツールチップの消える時間を3000で指定しただけですが、この書き方は覚えておけば、今後いろいろ応用が出来ると思いました!(まだ分りませんが…)
④文字列の置換に登場「正規表現」
これは理解するのに時間がかかりそうです…。覚えられたら便利と書いてあったのでググってみました。
jQueryで正規表現を学んでみる。【基礎編】 | webOpixel
現状、「こういう書き方もあるんだ」程度にしておこうかと思います。(^ ^;;
ちょっと先に進みたいので。。
でもおそらく今後この書き方を見る機会が増えるのだと思っています。
まだ参考書を見ながら書いてみて、2回目、3回目は見ないで書いてみる、というやり方で勉強中です。jQueryを書き始める前に、自分で記述する流れをまず紙なんかに書いてみて、(例えば初期状態はこんなの、命令するのにクラスを付けるほうが楽、などです。)設計しておくのが良いかもと思いました。
以上です!