jQueryの基本ルール
jQueryの基本ルールは極めてシンプルで2つだけです!
①操作したいHTML要素(DOM要素)を取得。
・$(‘button’)の部分がHTML要素取得です!
②取得したHTMLに操作(命令)を付与。
・$(‘button’)以降が操作を与えているところです!
clickしたらなんちゃらかんちゃらしろと言ってますね。
つまりここで起こるキッカケ(click,hover等)を設定してあげないといけなんですね。
これを「イベント設定」と言います。
便利なメソッド
ここでいうメソッドとは指示の事です。
例えばクリックした時にこんなことしてくださいとか、あんなことして下さいなどの指示を与えることです。
上の写真で言う.onや.toggleClassなどがそれに当たります!
よく使う便利なメソッドを5つ紹介していきますのでチェックして行きましょう!!
①.on(”click”, 機能)メソッド
clickされた時に機能を発動して!
②.append(“<li>追加された要素</li>”)メソッド
(“”)内の要素を追加して!
③.remove()メソッド
ドットの前で指定した要素を削除してくれ!
④.addClass(“active”)メソッド
ドットの前の要素に.activeを追加して!
つまり1つの要素が2つのclassを持つことになります。
そしてドットをかっこの中に書かないでください。
動かなくなります…..。
⑤.toggleClass(“active”)
ドット前の要素に.activeが無ければ付ける、あれば外す。
とても便利なメソッドです!
これらが代表的なjQueryのメソッドになります。
いくつかのメソッドを自分の環境に落とし込んで使用してみることは本当に重要なことです。
ぜひ自分の使っていく中で組み込んでみましょう!