読者です 読者をやめる 読者になる 読者になる

関数とメソッド HTML・CSSの操作

jQuery

jQueryの関数

  • jQueryは、関数オブジェクトです

f:id:web-design-lesson:20160522121424p:plain

  • 「function」と表示され、jQueryがfunctionオブジェクトであることを示しています


jQuery = window . jQuery = function( ){ };

jQueryメソッド

  • jQuery関数が、jQuery関数オブジェクトがもつ関数オブジェクトであったのに対して、jQueryメソッドはjQueryセレクタがもつ関数オブジェクトになります


$( 'セレクタ' ) . myMethod();

メソッドチェーン
  • jQueryには、メソッドを連結させて順番にメソッドを処理していく仕組みがあります
  • これを「メソッドチェーン」と呼びます


$( 'セレクタ' ) . methodA() . methodB() . methodC();

HTMLの操作

テキストの設定
  • 要素内のテキストを設定する場合は、text( )メソッドを使用します
  • text( )メソッドに引数がない場合には、そのセレクタの要素のテキストを取得します


var txt = $( '#text' ) . text( );

HTML要素の設定
  • HTML要素を設定したい場合は、html( )メソッドを使用します
  • html( )メソッドに引数がない場合には、そのセレクタの要素のHTML要素を取得します


var html = $( '#content' ) . html( );

CSSの操作

  • CSSを設定する場合は、css( )メソッドを使用します


$( 'セレクタ' ) . css( 'プロパティ名', '値' );

幅・高さの設定と取得
  • css( )メソッドを使用せずに、幅と高さを設定・取得できるメソッド
  • width( )メソッド
  • height( )メソッド