-
メニューなど同じカテゴリの要素のうち、クリックされた要素だけ操作したい場合が良くある。そのような時に()を利用して対応する。
this
-
イベントが発生した要素のIDを取得する
this.id
-
DOMとは()の略で、()や()の()する仕組み
Document Object Model、html、xml、構造を操作
-
DOMの操作される対象のことを()または()と
DOM要素、エレメントノード
-
thisを$()内で利用したのは()を利用するため
jQuery用のメソッド
-
jQueryオブジェクトの中身は()のようなもの。
DOM要素の配列
$("div")[0]などで参照できる。配列のようだが実は本当の配列ではない
-
jQueryオブジェクトの中の()にアクセスすることで、()を利用できるようになる
DOM要素の配列、JSのメソッド
-
対象が表示されている時は消して、消えている時は表示するメソッド
toggle()
-
対象が表示されている時はフェードアウトして、消えている時はフェードインするメソッド
fadeToggle()
-
パソコンにとってグラフィックの描画は非常に負荷が掛かる。その中でも()の処理は重く、これを軽減するためにプログラマーは様々な工夫をしなければならない。jQueryでも()要素は()ように(自動的に)されることが多い
透明度、見えない要素、表示されない
-
対象が表示されている時はスライドアップして消し、消えている時はスライドダウンして表示するメソッド
slideToggle()
スライドアップだけの場合はslideUpメソッド、スライドダウンだけの場合はslideDownメソッド
-
トラバースとは?
現在選択されている要素を変更すること
イベントが発生した要素に関連した要素を操作すること
-
イベントが発生した要素の次の兄弟要素に選択を変更するトラバース(メソッド)
next()
-
fadeToggle()やfadeSlide()は透明度や高さなど、操作できる属性が固定されているため利用範囲が限られる。(そのぶん簡単な構文で利用できる)それを補うようにjQueryには()があり、これは位置や幅などの属性を操作できる非常に()が高いメソッドとなっている。
animate()、汎用性
-
「$(this).animate({width: "100px"});」これの「{}」部分のことを()、「width: "100px"」部分のことを()と()という
Objectオブジェクト(属性のオブジェクト)、属性、値
値は「px」がついていて文字列なのでクォートが必要。実は単位を省略して「animte({width: 100});」とすることもできる。
-
なぜobjectオブジェクトを利用する必要があるかというと、()を設定するためである
複数の属性
$("#animeTarget").animate({width: "300px", height: "300px"});のように複数指定できる
-
animateメソッドで操作できる属性は、width (幅), height (高さ), left(X座標), top(Y座標), opacity(透明度)など()の値で設定できるものに限られる。()を設定するmarginやpaddingなどの他、()が必要なcolorなどは利用できない。
10進数、複数の値、16進数
-
属性名に()が含まれる場合は()を外して続く最初の文字を大文字(いわゆるキャメルケースの形)にする必要がある。例えばmargin-topであれば()にしなければならない。
-(ハイフン)、ハイフン、marginTop
-
相対的に現在の位置から50px左に移動するようにanimateメソッドを記述せよ
animate({left: "+=50px"});
-
1秒後に幅を200pxにするanimateメソッドを記述せよ
animate({width: "200px"},1000);
-
animateメソッドにおけるイージングとは、()のことである
加速の種類
-
jQueryで利用できるイージングは()と()の2種類だけ
swing、linear
-
swingとは()のち、()すること
徐々に加速した、減速して停止
-
linearとは()すること。つまり加速度が()の状態
等速移動、0
-
1秒後にTOP200pxの位置に等速で移動するanimateメソッドを記述せよ
animate({top: "200px"},1000,"linear");
-
1秒後にTOP200pxの位置に徐々に加速して減速するanimateメソッドを記述せよ
animate({top: "200px"},1000,"swing");
-
コールバックとは()したら、()処理のこと
特定の処理が完了、それを知らせる
-
1秒後にTOP200pxの位置に等速で移動したあと、アラートを表示する「alertFunc()」を実行するanimateメソッドを記述せよ
animate({top: "200px"},1000,"linear",alertFunc);
-
animateメソッドの構文を記述せよ
animate(属性,期間,イージング,コールバック)
animateメソッドの構文では属性以外の引数は省略可能
-
jQueryのアニメは()されるという特徴がある
1つずつ実行
-
複数のアニメを同時に実行したい場合は()を()設定する
複数の属性、同時に設定
animate({top: "200px",left: "200px"});
-