jQueryの要素の選択方法:$( "セレクタ")
jqueryのセレクタセレクタメソッドはjQueryの自体が現実的な選択方法の多くが付属して、CSSを適用することができます。
セレクタをフィルタします:
$( 'P:まず') // 最初のp要素 $( 'P:最終') // 最後のp要素の $( "P:でも") // インデックスpが偶数の要素は、0から始まります $ ( "P:ODD") // 0から始まるインデックスpの奇数要素、 $( "EQ(1)P") // 指定された要素のインデックス値 $( "P:GT(0)") / / 素子に所定の指標値より大きい :$(「LT(2)P」) // 素子に所定の指標値未満 $(「焦点」) // 現在取得した焦点要素 $(「アニメーション」) / / 実行アニメーション要素 $( "P")。EQ(N) // N番目の電流jQueryオブジェクトの動作は、インデックスと同様 $(この).hasClass( " テスト") //それはブール値を返し、特定のクラスの要素が含まれているかどうか $(「李」)。(「UL」)は //は将来の世代の特定の要素が含まれています
関係セレクター:
$( "div要素")。子供() // 第一層内の各サブdiv要素 $( "div要素")。検索( "スパン") // div要素に含まれるすべてのスパン要素、子供や孫 $ ( "P")。次の()は // p要素の近い兄弟 $( "P")を。nextAll() // すべての兄弟p要素の後に $( "#テスト")。 nextUntil(「# TEST2「) // 「#のtest2は」の間のIDへの要素の後に」すべての兄弟、「#test IDで終わる両方絶つ $(」P「)。前のページ() // 兄弟要素近いPの前に要素 $( "P")。prevAll() // p要素の前にすべての兄弟 $( "#テスト")。prevUntil( "#のTEST2") // ID "#test"要素の前に#」のIDへtest2の間のすべての兄弟」両端断ち切る $(「P」)を。親() // 各p要素の親要素 $( "P")。親() // すべての祖先要素の各p要素 $( "#test")。parentsUntil( "#のTEST2") // idが#1 TEST2としてIDに"#test"要素であります親の、両方が終了折れ間のすべての要素 $(『div要素』)。兄弟() // すべての兄弟、自分自身を含めません
HTML要素へのjQueryのメソッド共通の属性:
基本的な属性の操作:
$は( "IMG")のattr( "SRC");. // すべての画像のsrc属性値に文書を返す $( "IMG")のattr( "SRC"、 "test.jpg");. // すべての画像を設定しますsrc属性の $( "IMG")removeAttr( "SRC");. // 文書画像のsrc属性を削除するには、 $( "[タイプ= 'チェックボックス'の] INPUT")を支柱(,. "確認" をtrueに)。 // ボックスのチェック $( "[タイプ= 'のチェックボックス'の] INPUT")小道具( "確認" ,. 偽); $( "IMG")RemoveProp( "SRC")を;. // のimg src属性を削除します
CSSの操作:
$( "P")。addClass( "選択");. // プラス'選択'のp型の素子である $( "選択")( "P")removeClass ;. // 削除したp型の素子から'選択'は $(「p型」)toggleClass(「選択」);. // 削除するには、または追加することがある場合
HTMLテキスト:
$( 'P')HTML();. //は、HTMLコンテンツの要素pの返す $( "P")HTML( "こんにちは、<B>ニック</ B>!");. // 設定されたHTMLコンテンツ要素pを $( 'P')テキストは、();. // テキスト要素のp返す $( "P")、テキスト( "ニック");. // 設定されたテキスト要素p 。$( "入力")のvalを ( ); // テキストボックスの値を取得 $(「INPUT」)ヴァル(「ニック」);. // テキストボックスの内容を
操作のjQueryのCSSスタイル一般的に用いられている方法:
$( "P")CSS( "カラー");. // 色属性p要素を表示するためのアクセス $( "P")CSS( "色"、 "赤");. // p要素の色属性を設定します赤 。$(「P」)CSS({「色」:「赤」、「背景」:「黄」}); // 色要素を設定されたP赤、背景黄色属性(複数の属性を使用オブジェクト形式) $( 'P')はオフセット() // 要素のビューポートの相対オフセット電流、オブジェクト{トップ:122、左:260} $( 'P' ).offset()トップ。 $( ' P ' ).offset()左。 $( "P")の位置() // 要素は、可視要素に対して有効な、親要素に対してオフセット、オブジェクト{トップ:117、左250} $(ウィンドウ)。 scrollTopスプライト() // ローラーキャリッジの高さを取得 $(ウィンドウ).scrollLeftを() // ローラーキャリッジの幅を取得します。 $(ウィンドウ).scrollTop( '100') // ローラーキャリッジの高さは100に設定 $( "P")を身長();. // 要素のpの高さを取得 $( "P")の幅を();. / / 要素のpの幅を取得 $( "P:最初の")。innerHeightはを、() // (国境を含まないパディングを含め、)最初にマッチした要素の内側の高さ領域を取得します $( "P:最初の")はinnerWidth()。 / / (国境を含まないパディングを含め、)最初にマッチした要素の内側領域幅を取得します $(「P:最初」。)outerHeight() // マッチした要素の外部高さ(パディングとボーダーを含むデフォルト) $(「P:最初に」 ).outerWidth() // デフォルトのパディングとボーダーを含む要素の外部の幅を()と一致する $(「P:第一」。)outerHeight(真の) // 真のマージン備えています
一般的に使用されるjQueryのイベントメソッド:イベントの$(「セレクタ」)名前(関数{}関数は、トリガ・イベントの後に実行されます())。
$( "p型")をクリックします();. // イベントをクリック $( "p型")DBLCLICK();. // ダブルクリックイベントを
。$( "INPUT [タイプの=テキスト]")フォーカス() // 要素を取得しますフォーカス、イベントトリガーフォーカス
$(「[タイプ=テキストの] INPUTを」)。(ぼかし) // 要素は、ぼかしがイベントのトリガ、フォーカスを失った
。mouseDownイベント()$(「ボタンを」)// マウスボタンが押されたときにイベントがトリガされます
$(「ボタン」)。のmouseUp() // 緩和要素の上でマウスボタン際にイベントをトリガ
$(「P」)。mouseMoveイベントは、() // イベントがトリガされたときに指定した要素内にマウスポインタを移動する
$(「P」)。 mouseOver() // マウスポインタが要素のイベントの上にあるときにトリガ
$(「p型」)。マウスアウト() // イベントがトリガされた離れた要素からマウスポインタ
$(ウィンドウ).keydown() // 際に、キーボードまたはボタンが押されたときにイベントがトリガされる
$(ウィンドウ)。 キーの押下() //イベントは、キーボードやボタンが押されたときにトリガされ、トリガする各入力文字
$(「INPUT」)を。keyUpイベント() // ボタンが離されたときにイベントがトリガされた
$(ウィンドウ).scroll() // 場合には、ユーザートリガイベントスクロール
(ウィンドウ).resize()$を // ブラウザウィンドウのトリガイベントのサイズ調整するときに
()$(「[タイプ= 『テキスト』の] INPUTを」)。変更 // 際の要素の値が変更イベントトリガー
$(「入力」)。SELECT() // テキストの入力要素が選択されたときにイベントがトリガされます
$(「フォーム」)を。提出() // フォームが送信されたときにイベントがトリガされた
$(ウィンドウ)を.unload( ) // ユーザーがページを離れるとき