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

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

end()メソッドを使う場合と使わない場合

jQueryの公式リファレンスによると、end()メソッドはこんな説明があります。 jQueryオブジェクトを連鎖的に呼び出していった際に、現在の選択状態を破棄して1つ前の状態に戻します。 http://semooh.jp/jquery/api/traversing/end/_/これだけだと微妙にわかり…

jQueryでlistの中のhrefの値を取得して、クラスを追加

以下のようなナビゲーションメニューがあるとする。 <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="test1">テスト1</a></li> <li><a href="test2">テスト2</a></li> <li><a href="test3">テスト3</a></li> <li><a href="test4">テスト4</a></li> <li><a href="test5">テスト5</a></li> </ul> </div> これはbootstra…

jQuery find()とfilter()の違い

id:buzzword111さんが以下の記事で、「jQueryで、HTML文字列をDOM変換したDOMオブジェクトをfindで検索が出来ない・・・・・。」と悩んでおられた。 http://buzzword111.hatenablog.com/entry/2014/02/20/021433 ちょっと調べてみたんだけど、結論からいうと…

jQuery news tickerでRSSのリンクをティッカー表示する。

1.前提 以下の画像のように、左から右に流れるような帯に、RSSフィードの内容を表示させたい。 クリックすると、そのタイトルの先に飛べれば、Webページのちょっとした飾りにも使えるかもしれない。こんな感じで、文字が左から流れてくる。 で、クリックする…

Deferredのdone(), fail(), always()

1.基礎 ・done() done()は状態がresolvedになった場合に実行する・fail() fail()は状態がrejected()の場合に実行する・always() always()で指定した処理はresolved,rejected両方で実行される・resolveWith(), rejectWith() 第一引数に後続関数内でthisが参照…

jQuery Deferredの基礎 then()メソッドの使用例

1.基礎 Deferredは非同期処理をわかりやすいソースコードとして読み書きするための仕組みである。Deferredはunresolved,resolved,rejectedのいずれかの状態を持つ。 初期状態はunresolvedで、状態がunresolvedである限り、皇後続の処理は実行されない。 2.サ…

jquery-webtickerを使って、文字が流れるティッカーを作ってみるサンプル

なんか株価が流れる電光掲示板みたいに、ブラウザ上で文字が右から左へと流れる仕組みを作りたい。 ニュースとか、ツイートとか、動きながら右から左へ流れていくとちょっとカッコ良さそうだ。で、そういうのを実装するのに適したライブラリがjquery-webtick…

jQuery Deferredを使って、2つのリクエストの結果を待ち合わせて後続の処理を実行する。

基礎知識 jQuery Deferredは、jQueryのバージョン1.5からサポートされた機能で、Ajaxのような非同期処理を監視することができる。下記の2つのリンクが非常に詳しい。 http://s3pw.com/qrefy/deferred.done/ 爆速でわかるjQuery.Deferred超入門defferedとは…

jQueryの基礎と、animate()メソッドやon()メソッドの使い方

jQueryって何? jQueryというのは、オープンソースのJavaScriptのライブラリのこと。 2006年にJohn Resig氏によって開発・発表された。ライブラリというのは、よく使用する機能や効果を実現するプログラムをあらかじめ作成しておき、再利用できる形にまとめ…

jQueryでツールチップを自作&カスタマイズして表示させてみるサンプル

ツールチップって? ツールチップとは、補足情報を表示するための吹き出しのこと。 何か注意書きをするときに、カーソルを当てたときにフワッと浮き出る感じになる。 サンプルの画像のイメージはこんな感じ。 サンプルコード まずは、プラグイン風にツールチ…

jQueryプラグインballoon.jsを使って吹き出し表示したり非表示にする方法。入力値をチェックして、注意書きを吹き出しで表示するサンプルを作ってみる。

balloon.jsの使い方。 以下の公式サイトからballoon.jsをダウンロードする。 「The latest version of jquery.balloon.js」のところにあるリンクをクリックすればいい。 http://file.urin.take-uma.net/jquery.balloon.js-Demo.html で、適当なjsフォルダに…

jQuery-uiのカレンダー(datepicker)の日付フォーマットをyyyy/mm/ddに変更する

jQuery-uiのカレンダー Datepickerともいう。 http://jqueryui.com/datepicker/ 上記のURLにあるように、 CSSを <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> に設定。 あとは、以下のように、jqueryとjquery-uiを読み込むことが発動条件となる。 <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </link>

画像クリックで背景が暗くなって、拡大画像が表示されるようになるjQueryサンプル

読み込み中の「Now loading」のグルグルを手に入れるには 以下の「Loader Generator」を使えばいい。 http://loadergenerator.com/ 自分でグルグルを作って、それを好きにダウンロードすることができる。他にもCSSジェネレータなるものがある。 http://web-d…

show(),hide(),toggle()で要素を表示したり非表示にしたりする。

非表示に設定されている要素を表示する 要素選択.show(速度);非表示に設定されている要素を表示するにはshow()メソッドを使うが、アニメーションっぽく演出するには、引数に速度を指定する。 速度は"slow","normal","fast"かあるいは数値(1/1000秒=ミリ秒)で…

jQueryで要素を出したり閉じたりする(表示と非表示を演出する)

ボタンや画像をクリックしたら説明文を出したり、何か違う画像を出したいときがある。 そういうアニメーションを演出するには、jQueryのshow()メソッドやhide()メソッドを使えばいい。(1)ボタン(またはボタンとなる画像)を設置 (2)そこで開く要素を探しだす …

テーブル形式のテキストに値を入力して、jQueryで中の値を取得する

テーブルにテキストボックスを配置する テーブル形式で値を取得するには、まずテーブルを用意して、そのtdにinput type="text"のボックスを埋め込んでいく。 イメージはこんな感じ。 HTMLはこうなる。 <body> <h2>テーブルっぽい箱に値を入力して、それを取得する</h2> <table class="memberTable" id="memberTable" > <tr><th>メ</th></tr></table></body>…

jQueryで属性を操作するサンプル

attrメソッドで属性を設定する attr(属性の名前,値);サンプルはこちら。 <html> <head> <meta charset="utf-8"> <title>jQueryサンプル</title> <script src="js/jquery.min.js"></script> <script> $(document).ready(function() { $('#button').click(function() { $('input[type="text"]').attr( { value: 'valueを設定するでござる!', title:'value!!…</meta></head></html>

jQueryプラグインを使ってJavaScriptオブジェクトをJSONに変換するサンプル

jquery-jsonプラグイン jQueryを使って、JavaScriptのオブジェクトをJSONに変換し、サーバ側に送信したい。 そういうときに便利なのが、jquery-jsonというライブラリだ。 「jquery-json」 https://code.google.com/p/jquery-json/このライブラリを使うと、Ja…

jQueryでボタンの二重送信を防止するために二度目からボタンを無効化する方法。

チェックされた状態にあるすべてのチェックボックスを選択したい場合 $('input[type=checkbox][checked]') eachメソッド each(iterator) マッチした集合の全部の要素を走査し、それぞれの要素について渡された反復処理関数iteratorを呼び出す。 $('img').eac…

jQueryで要素を追加したり、属性値を取得するサンプル

jQueryで要素を追加する HTMLの断片を動的に生成し、bodyに追加したいときがある。 jQueryのメソッドを使って、要素を作成して追加するサンプルを以下に示す。 jQueryのすごいところは、いとも簡単に要素を作成し、それにcssを設定したり、clickしたときのク…

jQueryのセレクタについてまとめ。

でしゃばらないJavaScript(Unobstrusive JavaScript) jQueryの開発者の中で注目された「でしゃばらないJavaScript(Unobstrusive JavaScript)」とは、 「HTML文書は、「スタイル」と「振る舞い」と「構造」を適切に分離させようという手法のことである。 具体…

jQueryでボタンをクリックした時に、フォームに入力した値を取得する。

入力画面(フォーム)を作るHTML フォームを構成するのは <form>〜</form> である。 method属性にはデータの送信方法、action属性には入力データを処理するプログラムのURLを指定する。 以下はbodyタグの部分の記述だが、表示するとこんな感じになる。 <form method="post" action="" id="formtest"> <p> <label for="user">名前</label> <input type="text" id="user" name="username" /> </p> <p> <label for="gender">性別</label></p></form>

片方のHTMLファイルから他のHTMLファイルをjQueryで読み込んで表示させる。

jQueryを使って、一方のHTMLファイルから別のHTMLファイルの内容を読み込んで表示するサンプル 読み込む側のHTML(test1.html)は以下の通り。 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script type="text/javascript"> $(f…</head></html>

jQueryでtextareaの値やテキストボックスの値を取得するサンプル

jQueryで要素を指定する jQueryは多くのセレクタをサポートしていて、セレクタに適合した要素が指定の対象となる。 これはCSSセレクタの例。CSSっぽく要素を指定することができる。 名称 指定の対象 書式など 型セレクタ 同じ名前の要素 $('div);とか$('a');…

jQueryのフィルタなどのメモ。

jQueryでテキストボックスの値を取得する。 jQueryでテキストボックスの値を取得するためのフィルタは「:text」というもの。 陳腐なサンプルだが、ボタンクリックでテキストの値をアラートで表示する。 <html> <head> <meta charset="utf-8"> <title>タイトル</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> $(…</meta></head></html>

jQueryでHTML要素を取得するサンプル

jQueryでHTMLコンテンツを取得するサンプル $('p').html(); とすることで、p要素のHTMLコンテンツを取得して表示することができる。 たとえば、以下の実行結果は、 <html> <head> <meta charset="utf-8"> <title>Webページに含まれるHTMLコンテンツを取得する</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> </meta></head></html>

初めて夏バテなるものを経験した。

私記 今日は暑かったですね。私は昼にカレーを食べに行って、なんと1時間待ちでした。 行列を見た瞬間方向転換すればよかったものを、一度並んでしまってはなかなか脱出できず、延々と並ぶハメに。 並んだ時間がサンクコストになることを恐れつつ、ここまで…

jQueryでXMLを読み込んで、画面に表示するサンプル

以下のようなXMLファイルを読み込みたい。 <friend_list> <friend gender="male"> <name>sho322</name> <job>Engineer</job> <interests> <interest>programming</interest> <interest>swimming</interest> <interest>jogging</interest> </interests> </friend> <friend gender="female"> <name>han…</name></friend></friend_list>

jQueryでHTMLのテキストの値を書き換えるサンプル。

jQueryでは特定の要素を選択するのに、$関数を利用する。 要素を選択するために記述する$関数の引数をjQueryセレクターあるいは、単にセレクターと呼ぶ。 基本的なセレクターの書式 タグ名を使って選択する $("タグ名")id名を使って選択する $("#id名")class…

jQueryメモ。

JavaScriptのライブラリ JavaScriptは誕生から約15年が経過した「枯れた言語」で、誕生時から大きな仕様変更も無い。 仕様が枯れているため、書籍やネットの情報が陳腐化しにくい。 この「枯れる」というのは「使われない」という意味ではなく、仕様が固まっ…

Queryのイベント操作いろいろ

jQueryのイベント操作のまとめ ユーザーの操作を「イベント」といい、イベントに対して個別に処理を割り当てる。 割り当てられた処理プログラムのことを「イベントハンドラ」という。 イベントバブリングとは、イベントが泡のように親要素に伝搬することを表…

CSVファイルをテーブル付きのグラフにするjQuery plugin

準備 以下のプラグインをダウンロードする。 ■ccchart.js ccchart.jsは以下のURLからダウンロードできる。 http://ccchart.com/■csv2table.js csv2table.jsは以下のURLからダウンロードできる。 https://code.google.com/p/leocenter/downloads/detail?name=…

データをExcel風の表にして表示するjQueryプラグイン

データをExcel風の表にして表示するjQueryプラグイン JavaScriptで、ブラウザにキレイな表を表示させたいとずっと思っていた。 で、色々と探していたんだけど、jQuery Grid Pluginなるものがあった。 以下からダウンロードできる。 http://paramquery.com/デ…

jQuery & AjaxでサーバからのJSONレスポンスを読み込んでブラウザに表示させる。

Ajaxとは AjaxというのはAsynchronous JavaScript and XMLの略で、Webブラウザで実行されるJavaScriptプログラムとWebサーバとの間でデータを送受信する仕組みのこと。 Ajaxの処理を始めるために必要な設定項目は以下の通り。 処理を開始するきっかけ Webサ…

jQueryで手元のHTMLを読み込んで表示するサンプル。

Ajaxとは AjaxとはAsynchronous JavaScript+XMLの略で、ページを移動せずにWebサーバと通信を行い、表示内容を書き換えていく仕組みのこと。 jQueryを使って、手元にあるHTMLファイルを読み込んでみる ・ボタンクリックで、手元のHTMLを読み込んで表示するサ…

jQueryでCSVを読み込んでテーブルに表示させることができずにハマる。

こんな感じでサンプルを作っていたんだけれど、ハマる。 <html lang="ja"> <head> <title>jQueryでCSVデータを読み込んで表示させる</title> <meta charset="utf-8"> <link rel="stylesheet" href="jquery-ui-1.9.2.custom/css/ui-lightness/jquery-ui-1.9.2.custom.css"> </link></meta></head></html>

jQuery Ajaxで手元のテキストファイルを表示する。

イベントバブリングとは、DOMの子要素で発生したイベントがDOMの階層を伝わり、親要素へ、またその親要素へと伝搬していくこと。 bubblingとは、水の深いところから沸き上がってくるイメージ。 <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery Sample</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </meta></head></html>

Ruby on Railsのインストールでハマった。

WebにあるScriptからjQueryを使う 日本語おかしいかもしれないけれど、headに以下の記述を追加すれば、ローカルにjQueryをダウンロードしなくても使える。 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> ・要素の後ろにjQueryオブジェクトを挿入 $(document).ready(function(){ $('.header').after(…

勉強時間のメモ。

jQueryで選択した要素内に要素を挿入する(内部挿入) 以下の構文で要素を挿入することができます。 //選択した要素の先頭に要素を追加 要素選択.prepend("追加する要素のHTML"); //選択した要素の末尾に要素を追加 要素選択.append("追加する要素のHTML"); 例…

jQueryのメソッド。

jQueryのダウンロード http://jquery.com/ jQueryのお作法 jQueryを読み込むscriptタグは、head~/headの間に記述する。 jQueryを使用するJavaScriptよりも前に記述する必要がある。 $(function() { //処理 }); headに書かれるjQueryを使ったスクリプトを$(fu…