ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

jQuery

【jQuery】toggleをmigrateで有効にした画像置換

DEMO <html> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> </head> <body> <p id="imgChange"><img src="../img/buta.jpg"></p> <script> $(function(){ $('#imgChan…</body></html>

【jQuery】jQueryの高速化

バージョンを分ける 引用元 jQuery高速化!処理速度を10倍上げるテクニック20選 jQuery 2.x 系 モダンブラウザに最適化されたバージョン(IE6/7/8はサポート対象外) jQuery 1.x 系 古いブラウザにも対応したバージョン IE9以上ならなら2.x系をIE9以下なら1.…

【jQuery】readyイベント

javascriptはHTML,CSSの読み込みが全て終わってから読み込まれる必要がある。 jQueryでの記述 以下は全てjQueryをHTML,CSSの読み込みが全て終わってから読み込ませる書き方。 $( document ).ready( function() { }); $( document ).on( 'ready', function() …

【jQuery】thisセレクター

メソッドを指定するときは$(this)と記述する (jQUeryのオブジェクトではなくDOM要素なので) $(this).css('color','red'); イベントハンドラ内のthisはイベントの対象が指定される 親、先祖要素を指定 親要素を指定 $(this).parent() 親or先祖要素を指定 $(…

【jQuery】ライブラリ読み込み時の注意(https対応、コンクリフトを避ける)

httpとhttpsへ対応する ライブラリを読み込む際は、次のように記述し「http」か「https」かを分ける。 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> $のコンクリフトの回避 ライブラリ同士が、$関数に対してそれぞれ違う定義をしている場合、正しい動作をしない。 回避法1 $をjQuery内で無効にして他の…

【jQuery】アコーディオンメニュー、thisセレクターを使う

DEMO <ul class="box"> <li class="button">&#x25BC;おはよう <ul class="inner"> <li>早上好</li> <li>good morning</li> </ul> </li> <li class="button">&#x25BC;こんにちは <ul class="inner"> <li>你好</li> <li>hello</li> </ul> </li> <li class="button">&#x25BC;こんばんは <ul class="inner"> <li>晚上好</li> <li>good night</li> </ul></li></ul>

【jQuery】基礎知識の復習と画像置換(訓練校授業分)

最終更新:2017//4/22 授業のメモ セレクタ等は基本的にチートシートを使う。 マウスのイベントはonで統一される。 変数のデバッグはconsole.log( 変数名 ) で行う。 公式サイトからダウンロードするときは基本的にはcompressedw使う jQuery直リンクで読み込…

jQueryプラグイン①bxSlider導入方法

今回はbxSliderをつかったスライドの作り方に着いて勉強しました。 bxSlider導入方法 1.まず[bxSlider](http://bxslider.com/)のサイトに行き、ダウンロードします。 2.「jquery.bxslider.zip」がダウンロードできるので解答し、フォルダ内にある「jquery.bx…

jQuaryのメソッド2

・メソッドの種類2 ・hide(表示されている#aを隠す) ・すぐに隠す alert($("#a").hide()); ・スピードを指定する(slow,normal,fast) alert($("#a").hide('slow')); ・スピードを秒数で指定する(1000=1秒) alert($("#a").hide(1000)); ・show(非表示の#aを…

jQuaryのイベントの種類

・イベントの記述 ・一つのイベント $("セレクタ").イベント(function(){ }}); ・複数のイベント $("セレクタ").イベント1 イベント2 (function(){ }}); ・親セレクタの中の子セレクタを指定 $("親セレクタ").イベント("#子セレクタ"function(){ }}); ・thi…

jQuaryのメソッド

・メソッドの記述 ・1つの指示の場合 $("セレクタ").css("color","#fff"); ・複数の指示の場合 $("セレクタ").css("color","#000"); $("セレクタ").css("font-size",12px"); $("セレクタ").css("border","2px dotted #9df"); ・セレクタが同じ場合 $("セレク…

jQuaryのセレクタ

主なセレクタの種類 ・全ての要素 $("*") ・その要素全て $(".要素名") ・nameを指定 $("[name=name名]") ・idを指定 $("#id名") ・classを指定 $(".class") ・AもしくはBに一致する要素 $("A,B") ・Aの中のB(子要素と孫要素全て) $("A B") ・Aの中のB(子…

jQuary 記述方法など

基本的な記述 ・$かjQueryから記述が始まる。 ・WordPressの場合はjQueryでしか動作しない。 ・行末に必ず;(セミコロン)をつける。 $("セレクタ").イベント(function(){ $("セレクタ").メソッド("値"); }); 後から読み込ませる ・jQuaryをHTMLより後に読み…