2章：jQuery基礎

単語カード

設定全面表示

• メニューなど同じカテゴリの要素のうち、クリックされた要素だけ操作したい場合が良くある。そのような時に（）を利用して対応する。

  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で利用できるイージングは（）と（）の２種類だけ

  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"});

広告

コメント