JS
簡単なページ内リンクのプラグインを作成しました。 The Link In A PageHTML <body> <div id="container"> <header> <h1>The Link In A Page</h1> </header> <nav> <ul> <li class="ex01 link_button" data-from="ex01"> <p><a href="#ex01">ex01</a></p> </li> <li class="ex02 link_button" data-from="ex02"> <p><a href="#ex02">ex02</a></p> </li></ul></nav></div></body>
簡単なプラグインを作成しました。 OmitjQuery ;(function($){ $.fn.omit = function(cnt){ var elem = $(this); var mark = '...'; elem.each(function(){ var str_origin = $(this).text(); //文字数でカット var str = str_origin.slice(0,cnt); //タイト…
tooltip簡単なツールチップのプラグインを作成してみました。 data-tooltipで対象の要素を指定し、ホバーしている最中にマウス付近に表示されます。 ;(function($){ $.fn.toolTip = function(options){ var elem = $(this); var opts = $.extend({},$.fn.too…
Manipulation append() 要素内部にコンテンツを追加する appendTo() 要素の中身を他の要素に追加する prepend() 要素内部の先頭にコンテンツを追加する prependTo() 要素の中身を他の要素に追加する after() 各要素の後ろにコンテンツを追加する before() 各…
Traversing prev() 一つ前の要素 prevAll() 前の要素すべて siblings() 要素の兄弟すべて返す andSelf() 現在の要素に加え、一つ前の要素を選択する end() 現在の選択から、一つ前の状態に戻す
Traversing next() 要素のひとつ次の要素を取得 nextAll() 現在の要素の次以降の兄弟要素をすべて取得 parent() 要素の親要素を取得 parents() 要素の先祖要素をすべて取得
Traversing add() 現在の要素集合にさらに指定した要素を追加出来る children() 条件を指定し、直下の子要素を取得できる。条件はなしでも可 closet() 条件に合う最も近い親要素を取得出来る ない場合はnoneが返る contents() テキストも含めた全子要素を取…
Traversing filter() 条件に合う要素を抽出する セレクタなどはカンマ区切りで複数指定できる セレクタではなく、関数を指定することも出来る is() 条件に合う場合はtrueを返す 逆の場合はfalseを返す map() jQueryオブジェクトが持つ要素集合を、elementな…
Attribute html() HTMLを文字列として取得する html(val) 要素にvalをセットする text() 要素がもつテキストを取得 test(val) 要素にテキストをセット val() 要素がもつvalue値を取得 val(val) 要素no valueにvalをセット
Attribute addClass() クラスを追加する removeClass() クラスを削除する toggleClass() クラスがなければ追加し、あれば削除する toggleClass(name,switch) switchがtrueであれば追加する。falseであれば削除する
Attributes attr(name) 属性の値を返す <div id="test" class="test"></div> $(function(){ $('#test').attr('class');//testを返す }) attr(key,value) 属性名と、値を指定し、要素に設定する <div class="test"></div> $(function(){ $('#test').attr('id','test');//id="test"が設定される }) 複数指定の場合は以下の…
Selector :hidden 非表示の要素 :visible 表示されている要素 :animated アニメーション中の要素使う頻度は高いと思います。
プラグイン jQuery.fn.extend() プラグイン作成の時によく使います。 <ul> <li>test</li> <li>test</li> <li>test</li> </ul> jQuery.fn.extend({ color:function(color){ return this.css('color',color); } }); $(function(){ $("ul li").color("red"); }); liの文字がすべて赤になります。プラ…
オブジェクト操作 eq() エレメントの集合から、指定したポジションのエレメントだけを取り出す。 <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> <li>test5</li> </ul> li.eq(2).css('color','red'); この場合は「test3」だけが赤くなります。これも良く使いますねー！
復習を兼ねて、jQueryのリファレンスを参考に命令などをメモ オブジェクト操作 each() 合致するすべての要素に対して関数を実行する。 関数内で戻り値にfalseを設定した場合、ループは終了する。 <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> <li>test5</li> </ul> $(function(){ $('li').eac…
jQueryのアニメーションではなく、CSS3のtransitionで作成しました。 プラグインになっています。 画像サイズに合わせて、スライドショーの幅、その他のサイズの調整をします。 オプションでその他指定出来ます。 アップロードしました → http://yuto-m.saku…
アコーディオンパネルをjQueryとCSS3で作成しました。 今回はプラグインにしてみました。 動きをCSS3で作ったりしているので、オプション指定はあまり出来ません。 CSSのクラス名、HTMLを変えなければ、CSSをいじるだけで、見た目を変えることはできます。 …
以下、練習問題の回答です。 Q01 for(var i = 1; i <= 3; i++){ alert(i); } Q02 var point = prompt('何点ですか？'); (point < 70)? alert('不合格！') : alert('合格！'); Q03 var messages = new Array('今日はラッキーデー！','ボチボチ頑張っていきま…
jQueryとCSS3を使って、エフェクトのあるタブを作りました！ アップロードしてあります→http://yuto-m.sakura.ne.jp/admin/assignment/js/tabs_effect/index.htmlHTML <html lang="ja"> <head> <meta charset="utf-8"> <title>Tabs Effect</title> <link rel="stylesheet" href="common.css"> </link></meta></head></html>
for文を使って、掛け算の表を作りました。 9×9だけでなく、引数に入れた数値を元に作成します。 calc(row,line)でrowが横、lineが縦です。 以下スクリプトになります。 JavaScript window.onload = function(){ calc(18,18); } function calc(row,line){ var…
授業中のスクリプトを少し変えて見ました。 関数の引数に最小値と最大値を設定して、その差だけ繰り返します。以下のスクリプトはフォームでの年齢の選択で、限られた範囲のみ表示するスクリプトです。 以下コードになります HTML <form action="#" method="post"> <p id="slct_age">年齢 :</p> </form> JavaScript windo…
授業でのスクリプトを自分なりに書いてみました。 HTML <h1>月別に季節を判別</h1> <p>ボタンをクリックすると月を入力するウィンドウが表示されます。</p> <p><button id="btn">月別に季節を判別</button></p> JavaScript window.onload = function(){ distinctionMonth(); } function distinctionMonth(){ va…
作れないだろうなと思って、やってみたんですけど、意外と出来てしまいました。画面がロードされた時、ウィンドウのリサイズ時にボックスが整列します。ウィンドウ幅に合わせ、カラム数が決まります。並び順は最初の列は、左から右と並びますが、２列目以降…
先ほどのスクリプトを少し変えて、サムネイルをマウスオーバーしたら、メインの画像が切り替わるスクリプトを授業中に作りました。以下コードになります。HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>img_change02</title> <link rel="stylesheet" href="img_change02.css"> <script src="img_change02.js"></script> </head> <body> <div id="container"> <ul> </ul></div></body></html>
いつも使ってるjavascriptによる画像置換スクリプトです。 すこし簡略化しています。 以下コードになります。JavaScript function changeImg(){ var images = document.getElementsByTagName('img'); for(var i = 0; images.length > i; i++){ var img = ima…
まずはコードになります。 JavaScript window.onload = function(){ change(); } function change(){ function num(){return Math.floor(Math.random()*256)}; function opacity(){return Math.floor((Math.random()*10+1)) / 10}; var rgba = 'rgba('+num()…
授業で出た、スクリプトをすこしだけ工夫してみました 関数の引数に、入力した値段と消費税（％）で計算し、コンソールに表示します。JavaScript window.onload = function(){ var price = parseInt(prompt('金額を入力してください')); var t = parseInt(pr…
うる覚えだったのでメモ書きです。 if (a > b){ a = b; }else{ a = c; } この条件式は省略することができ、以下のようになります。 (a > b)? a = b: a = c; a = (a > b)? b: c; そして、三項演算子は式なので、以下のようにもできます。 var sex = ['男','女…
