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

Code Log

プログラミングの勉強メモを残していきます。

ajaxでgetリクエスト。受け取ったデータを表示する

こんな画面で・・・リンクをクリックしたら、GETリクエストを飛ばして、画面遷移なしに受け取ったデータを表示するリクエストを受ける側のPHPはこちら。 you select for the 表示する側のソースコードはこちら。 <html> <head> <meta charset="utf-8"> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script> $(function() { $('#selector a').…</meta></head></html>

jQuery リンク先のHTMLファイルをAjaxで読み込み表示させる

こんな画面があるとします。リンクをクリックすると・・・こうやって画面遷移なしで別のHTMLファイルの内容が読み込まれて反映されるようにしてみます。jQueryのメソッドは.load()を使います。 $('#content').load('hoge.html #loadedContent'); 上の例では…

jQuery | 属性セレクタの使い方一覧

セレクタ 意味 例 [属性名=値] 値を完全一致した属性を持つ要素を絞り込む $(""a[target='_blank']"") [属性名] ある特定の属性名を含む要素を絞り込む $(""img[title]"") [属性名!=値] 値と完全一致することのない属性を絞り込む $(""a[target!='_blank']""…

jQueryセレクタ | タグ名、クラス名、ID名を指定して要素を取得する

目次 タグセレクター クラスセレクター IDセレクター タグセレクタータグセレクターは、要素(タグ)名をもとに対象要素を選択します。以下のコードで、h2タグすべてを取得して、背景の色を黄色くしてみます。 $(function() { $("h2").css("background-color",…

jQuery | テキストボックスに入れた値をクリアする

目次 経緯 テキストボックスの値をクリアする 経緯目次ジェネレータという、目次を作るためのHTMLを自動生成するブラウザアプリを作っていたのですが、 入力をミスったときとか、新しいHTMLを生成したいときに項目をいちいちBackspaceを押しながら消していく…

add()であるエレメントに別のエレメントを追加する

jQueryを使って、以下のように、特定のタグに対して、別のタグを追加したいときのサンプルを示します。 <html lang="ja"> <head> <meta charset="utf-8"> <title>エレメントを追加する</title> <script src="js/jquery-1.11.1.js"></script> <script> $(document).ready(function() { $('p').add('span').css('background-color','blue'); }); </script> </head> </html>

formの内容を送信する前にチェックするserialize()関数

serialize()メソッドを使えば、formの内容を送信する前に配列やJSONの形で格納したり、格納した値をチェックすることができます。 サンプルを見てみましょう。 <html lang="ja"> <head> <meta charset="utf-8"> <title>serialize()関数</title> <script src="js/jquery-1.11.1.js"></script> <script> $(document).ready(function() { $('#serialize').click(function() { $(</meta></head></html>…

jQueryを使って、メモリにデータを保存したり、削除したりする

HTMLのある要素の文字列を取得して、それをメモリ上に保存したいときは、jQueryのdata()関数を使います。 取得したデータをdata()を使って保存したり、removeData()関数を使って破棄したりすることができます。http://semooh.jp/jquery/api/internals/jQuery…

jQueryでgrep()関数を使って、配列のうち特定の文字を含む要素を取り出す

grep()は配列のある特定の要素を抜き出すのに便利な関数です。 引数に配列とコールバック関数を渡して、条件にあっているものを返します。今回は、英語で月を見ていって、「e」を含むものだけ取り出してみました。 <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryでgrep()</title> <script src="js/jquery-1.11.1.js"></script> <script> $(document).ready(f</meta></head></html>…

配列をeach()関数を使ってイテレーションする

each()関数は配列のiterationに使われます。 配列/オブジェクトを問わずに汎用的に用いることができる、繰り返し処理用の関数です。この関数は、jQueryオブジェクトのプロトタイプに実装されている $().each() とは異なります。こちらは、引数で渡した単なる…

jQueryのバージョンを調べる方法

jQueryのバージョンを調べるには、 $.fn.jquery; という関数を使います。 サンプルを見てみましょう。 <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryのバージョンを調べる</title> <script src="js/jquery-1.11.1.js"></script> <script> $(document).ready(function() { var a = {b:1, c: 2}; //Not a jQuery Object var b = $('#placeho…</meta></head></html>

noConflict()を使って、「$」という関数名が名前衝突するのを避ける

「$」というのは、jQueryではjQueryのエイリアスとして使われます。 jQuery関数を呼び出すものとして、「$」を使うわけです。この「$」という文字を、jQuery関数とは別の関数にひもづけるためにはどうしたらいいでしょうか。それは、noConflict関数を使いま…

jQueryをとりあえず始めてみる

jQueryはCDN(Content Delevery Network)というコードリポジトリから読み込むことができます。 <script src="http://code.jquery.com/jquery-latest.min.js"></script> で、最も最新のjQueryを取り込むことができます。 上はjQueryのサイトから落としてきていますが、一般的にはGoogleのCDNが利用されることが多いようです。 さす…