jQueryを利用してナビゲーションを実装する
第3回・
今回の記事で使うメソッドの紹介と簡単な説明
前回同様本題に入る前に,
jQueryオブジェクト
第1回,
jQuerifyをクリックしてjQueryをロードする
(jQueryを使っていないページの場合) jQuerifyが有効になったことを確認 $jq()で使えるようになる
consoleに実行したい命令を入力する
結果の出力
出力されたデータの通り,
each()
eachメソッドは対象の複数のjQueryオブジェクトに対してそれぞれ関数を実行するメソッドです。関数の引数にiを持たせることで,
上記のサンプルでは,
hover()
hoverメソッドは対象のjQueryオブジェクトのmouseover,mouseoutイベントに任意の関数をbindするメソッドです。hoverメソッドの第1引数にmouseover,
hover()-HTML
<ahref="#">ここにマウスカーソルをのせたり外したりしてください</a>
hover()-JS
jQuery(function($){
$('a').hover(function(){
console.log('mouseover');
},function(){
console.log('mouseout');
});
});
parent()
parentメソッドは対象のjQueryオブジェクトの親要素を取得して返すメソッドです。
parent()-HTML
<p><ahref="#"id="child">consoleにA要素の親要素を表示します</a></p>
parent()-JS
jQuery(function($){
console.log($('#child').parent());
});