JavaScriptプログラムに関する各種メモ書き:タグ「jQuery」での検索

jQuery でのフォーム操作

● フォームの種類を判別する( 例 : checkbox か radioか)

alert( $('#hoge').prop('type') );

● タグ名からフォームの種類を判別する( 例 : SELECT を判別 )

if ( $("[name='yoyaku']").prop("tagName") == 'SELECT' ){
//処理
}

● 1行テキストエリア(id="hoge")の値を取得する

<input type="text" name="hoge" id="hoge" value="999" >
//  jQuery
var v = $('#hoge').val();
// JavaScriptのみ
var v = document.getElementById('hoge').value;

● 1行テキストエリア(id="hoge")へ値('test_string')をセットする

//  jQuery
$('#hoge').val('test_string');

● オプションメニュー(ドロップダウンリスト)(id="hoge")の値

// ◆ jQuery
var v = $('#hoge').val();
var v = $('#hoge :selected').text();

● ラジオボタンの値の取得

var data = $("input:radio[name='my_radio']:checked").val();

● ラジオボタンのチェックを外して未選択にする

$( "[name='my_radio']" ).prop('checked', false);

● 単一チェックボックス(id=cb1)の値の取得

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">あいうえお
var v = $('#cb1_id:checked').val();      // IDでアクセスする場合
var v = $("input[name='cb1']:checked").val();     // nameでアクセスする場合
alert(v);

● checkboxにチェックがついているかどうかを調べる

true ,false が帰ってきます。

var flag = $("[name=checkbox1]").prop("checked");

● checkboxにjQueryでチェックをつける

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">
// name が「cb1」 valueが「あいうえお」のチェックボックスにチェックを付ける
$('input[type="checkbox"][name="cb1"][value="あいうえお"]').prop("checked",true);

// 全てのチェックボックのチェックを外す
$("input:checbox").attr('checked', false);

● 「全てを選択する」ボタンを押すと全てのチェックボックスのチェックを付ける

id="all_check_on”な要素をクリックするとname = ”user_id[]" のチェックボックス全てにチェックをつける(または解除)します
html

<label><input type="checkbox" id="all_check_on">全て選択する</label>
<input type="checkbox" name="user_id[]" value="1">
<input type="checkbox" name="user_id[]" value="2">
<input type="checkbox" name="user_id[]" value="3">

js

$("#all_check_on").click(function() {
    if ($(this).prop("checked")) {
        $('[name="user_id[]"]').prop("checked", true);
    } else {
        $('[name="user_id[]"]').prop("checked", false);
    }
});

● チェックされている複数チェックボックスの値をURLパラメーターの形式で取得する

name = ”user_id[]" のチェックされている全てのチェックボックスの値をURLに渡せる形式で取得します。 js

param = $('[name="user_id[]"]:checked').map(function(){
	return this.name + '=' + $(this).val();
}).get().join('&');

console.log( param );

表示結果

user_id[]=1&user_id[]=2

● フォームをサブミットする

<form id="FM"></form>
 $('#FM').submit();

● (id="input_button")の送信ボタンを押せないようにする

$('#input_button').prop('disabled', true); // 押せない
$('#input_button').prop('disabled', false); // 押せる

● ドロップダウンリスト(class="my_list")を選択できないようにする

$('.my_list').prop('disabled', true); // 押せない
$('.my_list').prop('disabled', false); // 押せる

● フォーム要素一括セレクタ

$(":input")		// 全てのフォーム要素
$(":button")	// 全てのボタン要素

$(":text")		// テキストボックス
$(":password")	// パスワード入力ボックス
$(":radio")		// ラジオボタン
$(":checkbox")	// チェックボックス
$(":file")		// ファイル選択ボックス
$(":submit")	// 送信ボタン
$(":image")		// 画像ボタン
$(":reset")		// リセットボタン

例:全てのフォーム要素にアクセスする

$(":input").each(function(index, el) {
    console.log(el.name);
});
No.666
09/21 10:23

edit

prototype.js
jQuery
フォーム

jqueryのイベント一覧

● jqueryのイベント(ユーザー操作イベント)

イベント名 説明
click 指定要素上で左クリック時に発火
dblclick 指定要素上でダブルクリック時に発火(clickも発火)
contextmenu 指定要素上でマウス右ボタンを押した時に発火
mousedown 指定要素上で左or右ボタンを押した時に発火
mouseup 指定要素上で左or右ボタンを離した時に発火
mousemove 指定要素上でマウスカーソルが動いた時に発火
mouseover / mouseenter 指定要素上にマウスカーソルが入った時に発火
mouseout / mouseleave 指定要素上からマウスカーソルが離れた時に発火
keydown / keypress キーを押した瞬間に発火
keyup キーを離した瞬間に発火

● jqueryのイベント(要素イベント)

イベント名 説明
focus / focusin 要素にフォーカスが当たった時に発火
blur / focusout 要素からフォーカスが外れた時に発火
change 要素の内容が変更された時に発火(1行テキストや複数行テキストの場合変更がありかつフォーカスが外れた瞬間)
select inputやtextareaのテキストを選択した時に発火
submit フォームが送信された時に発火

● jqueryのイベント(その他イベント)

イベント名 説明
scroll 画面がスクロールした時に発火
resize ウィンドウのサイズが変更された時に発火
ready HTMLが読み込まれた時に発火
unload 別のページに遷移する時に発火
load データの読み込みが完了した時に発火
error データの読み込みに失敗した時に発火
No.1142
05/19 12:19

edit

フォーム
jQuery

コンパクトなサイズで設置簡単な(alert・モーダル)ウィンドウ jquery プラグイン

コンパクトなサイズで設置簡単な(alert・モーダル)ウィンドウ jquery プラグイン

● jquery.alertable.js - Minimal alert, confirm, and prompt replacements.

https://github.com/claviska/jquery-alertable

・デモ

http://www.jqueryscript.net/demo/Nice-Clean-jQuery-Alert-Confirm-Dialog-Plugin-alertable-js/

・設置方法

<script src="assets/js/jquery.alertable.min.js"></script>
<link  href="assets/js/jquery.alertable.css" rel="stylesheet">
$.alertable.alert('Howdy!');

これだけです。とても簡単ですね。

No.1130
04/17 13:46

edit

jQuery

フォームの入力途中で画面遷移しようとするとアラートを出して注意する

● フォームの入力途中で画面遷移しようとするとアラートを出す例

jQueryを使っています

● フォーム例

<form action="test.php" name="MYNAME">
	<input type="text" name="input1">
	<textarea name="input2"></textarea>
</form> 

● JavaScript

$(function(){
var form_change_flg = false;
    $(window).on('beforeunload', function() {
        if (form_change_flg) {
          return "入力画面を閉じようとしています。入力中の情報がありますがよろしいですか?";
        }
    });
    //フォームの内容が変更されたらフラグを立てる
    $('form[name=MYNAME] input[name=title1]').change(function() {
        form_change_flg = true;
    });
    $('form[name=MYNAME] textarea[name=input2]').change(function() {
        form_change_flg = true;
    });
    // フォーム送信時はアラートOFF
    $('form[name=MYNAME]').submit(function(){
        form_change_flg = false;
    });
});

No.1092
03/27 09:26

edit

フォーム
jQuery

No.1082
01/30 13:58

edit

jQuery
フォーム

JavaScript の querySelector の書式入門

jQueryが使えない環境やメモリ的にjQueryを使用したくない場合のDOMセレクターにJavaScriptのquerySelectorがとても便利に使えます。

jQueryが使えないiMacros環境でも使用できます。

querySelector()  : セレクターに最初の要素ひとつを返す
querySelectorAll() : セレクターに合致した全ての複数の要素を返す。(DOMオブジェクトの配列で返る)

● JavaScript クエリセレクタの使い方例

・ID・クラス名で指定

window.document.querySelector("#my_id");
window.document.querySelector(".my_class");
window.document.querySelector([class='my_class']);

・その他いろいろな指定方法

window.document.querySelector("input[type='checkbox']");
window.document.querySelector("table[class='shipInfo'] tr td:nth-of-type(1)");
window.document.querySelector("tr > td");
window.document.querySelectorAll(".my_class");

・残念ながら使えない指定方法(文字列●●●を含む要素)

window.document.querySelector( 'tag:contains("●●●")' );

↑これは使用できません。 (Xpathなら取得できるのですが)

・xpathとクエリセレクタの変換

http://bit.ly/2b5BzLI
http://bit.ly/2bht2by

No.1050
08/31 14:09

edit

iMacros
jQuery
DOM
xpath

jQueryプラグインのひな形

jQueryプラグインを作成するためのひな形はネットで調べるといくつかパターンが出てきますがこういうのはどうでしょうか。

;(function($){

$.fn.myPlugin = function(options) {

     'use strict';

    if (this.length === 0){
    	var error_css  = 'background: #ff0000; color: #FFF; padding: 2px; line-height: 1.5;';
    	console.log('%cERROR( jquery.myPlugin.js ) :DOM Object not found', error_css);
    	return this;
    }

    // private variables
    var priOne = '';
    var priTwo = '';

    // private methods
    var foo = function() {
    };

    // public variables
    this.pubOne = 0;

    // public methods
    this.initialize = function() {
		return this.each(function(i, elem) {
			// ...
    	});
    };

    return this.initialize();
};
})(jQuery);

有名なテンプレートとしては jquery boilerplate があります

● jquery boilerplate

https://jqueryboilerplate.com/

No.1040
07/03 10:12

edit

jQuery

アニメーションライブラリ velocity.js の記述方法

● 1. velocity.jsの読み込み(jQueryは読み込まなくても可能ですが、共存することもできます)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.js"></script>

● 2. velocity.js のアニメーション記述

省略記法で記述する例

.velocity( 変形させたいパラメータ,(ハッシュ) アニメーション時間(ms), オプション(ハッシュ),  終了時実行関数(関数) )

例1:

$('#menu').velocity({
  opacity    : [ 1, 0 ],
  translateY : [ 0, -50 ]
},600,{ easing: "easeOutCirc" } ,
function(){ console.log("complete !!");  }
);

例2:opacity と translateY それぞれに違うイージングをかけたい場合

$('#menu').velocity({
  opacity    : [ 1, 'easeInQuart', 0 ],
  translateY : [ 0, 'easeOutQuart', -50 ]
},2000);

● 3. velocity.js の連続アニメーションの記述例

3つのアニメーションを連続して動かします。

$('#menu')
.velocity( { opacity: [ 1, 0 ], translateX: [ -30, 1250 ] },600, { easing: "easeOutCirc" } )
.velocity( { translateY: 10 }, 200 )
.velocity( { translateY: 0 }, 200 );

● 4. 複数の要素に対して順番にアニメーションを動作させる記述例

.velocity.ui を追加で読み込ませます。

  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>

Velocity.RegisterEffect でアニメーションを定義して velocityで呼び出します。
stagger が1つ1つの要素を順番にアニメーションしていく際の待ち時間になります。

  $.Velocity.RegisterEffect("trans.my_effect", {
    defaultDuration: 500,
    calls: [[ { opacity: [1,0],  scaleX:[ 1, 0.1 ], scaleY:[ 1, 0.1 ] }, 1.00, { easing: "easeOutCirc" } ]] 
  })

  $('#menu li').css({opacity:0}).velocity("trans.my_effect", {
    easing  : 'ease-in-out',
    duration: 1000,
    stagger : 150
  });

● 5. さらに複雑なアニメーションを記述するには

複雑なアニメーションとそれに伴う処理を簡潔に書くことのできるライブラリ vq を作った

No.1020
06/26 12:05

edit

css
jQuery

jqueryでフォームのふりがな自動入力

jquery.autoKana.js https://github.com/harisenbon/autokana

<form>
<input type="text" id="user_name">
<input type="text" id="kana_name">
</form>
<script src="./jquery.autoKana.js"></script>
<script>
$(function() {
    $.fn.autoKana('#user_name', '#kana_name', {
        katakana : true  //true:カタカナ、false:ひらがな(デフォルト)
    });
});
</script>
No.1005
02/15 10:34

edit

jQuery
フォーム

jQuery(Javascript)で表示中のディスプレイが retina対応か判別する

jQuery(JavaScript)でRetina対応ディスプレイかどうか判別して、出力する画像(プリロードする先読み画像)の種類を分けたい時があります。

JavaScriptのみで対応可能です。 以下のように判別します。

var retinaCheck = window.devicePixelRatio;
if(retinaCheck >= 2) {
	alert('retina対応ディスプレイです。');
}
No.1004
02/08 16:51

edit

画像
jQuery

クリックでクリップボードにコピーするボタンを作るjQueryプラグイン【clipboard.js】

● clipboard.js

https://zenorocha.github.io/clipboard.js/

このclipboard.jsは Flashを使用しません。 そのかわり Safari には未対応となっています。

● 使い方

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
$(function () {
var clipboard = new Clipboard('.clip_copy_btn');
});
</script>
<input type="text" id="clip_copy_1" value="XXXXX">
<button class="clip_copy_btn" data-clipboard-target="#clip_copy_1" >クリップボードにコピーする</button>

です。

No.1000
01/26 21:27

edit

フォーム
jQuery
HTML5

jQueryを使ってCSS3アニメーションを操作する。【jquery.transit】

■ jquery.transit · GitHub

https://github.com/rstacruz/jquery.transit#readme

jQueryを使いますが、アニメーション自体はCSS3アニメーションなのでスマホでも軽いです。 例:(フェードインの例)

<div id="test" style="border:1px solid red;">テストです</div>
$('#test').transition({ opacity: 0.0, scale: 0.5 }, 0);
$('#test').transition({
  opacity : 1.0,
  scale   : 1.0 ,
  duration: 5000,
  complete: function() {
    alert("CSS3 animation complete!");
  }
});
No.988
12/18 17:23

edit

jQuery
css
アニメーション

ドラッグ&ドロップで複数ファイルファイルアップロード + 進捗(プログレスバー)表示する Dropzone.js

ファイルアップロードシステムを作るには Dropzone が簡単で便利です。 以下の様な特徴があります。

・jQueryを必要としない。(共存可能です。以下の例ではjQueryと併用します。)
・ドラッグ&ドロップでファイルアップロードが行える
・非同期でファイルアップロードが行える
・ファイルアップロード中の進捗バーを表示することが出来る

使い方は簡単です。

1. ファイルのダウンロード と用意

必要なファイルは

dropzone.js (ダウンロード)
dropzone_config.js (自分で作成)
dropzone_upload.php (自分で作成)
dropzone.css (自分で作成)

です。

■ dropzone.js

https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js ( .jsファイル)
からダウンロードして保存します。

■ dropzone_config.js

dropzone_config.jsは以下のように作成しておきます (※要追加) のところは適宜追加すること。

$(document).ready(function() {
$('#image_drop_area').dropzone({
	url                          : './js/dropzone_upload.php',
	paramName                    : 'file',
	maxFilesize                  : 999 , //MB
	addRemoveLinks               : true ,
	previewsContainer            : '#preview_area' ,
	thumbnailWidth               : 50 , //px
	thumbnailHeight              : 50 , //px
	dictRemoveFile               :'[×]' ,
	dictCancelUpload             :'キャンセル' ,
	dictCancelUploadConfirmation : 'アップロードをキャンセルします。よろしいですか?' ,
		uploadprogress:function(file, progress, size){
		file.previewElement.querySelector("[data-dz-uploadprogress]").style.width = "" + progress + "%";
	},
	success:function(file, rt, xml){
		// それぞれのファイルアップロードが完了した時の処理(※要追加)
		file.previewElement.classList.add("dz-success");
		 $(file.previewElement).find('.dz-success-mark').show();
	},
	processing: function(){
		// ファイルアップロード中の処理(※要追加)
	} ,
	queuecomplete: function(){
		// 全てのファイルアップロードが完了した時の処理(※要追加)
	} ,
	dragover: function( arg ){
		$('#' + arg.srcElement.id).addClass('dragover');
	} ,
	dragleave: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	drop: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	error:function(file, _error_msg){
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	},
	removedfile:function(file){
		delete_hidden('dropzone_files[]',file.xhr.response);
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	} ,
	canceled:function(arg){
	} ,
	previewTemplate : "\
	<div class=\"dz-preview dz-file-preview\">\n\
	  <div class=\"dz-details\">\n\
	    <div class=\"clearfix\">\n\
	      <img class=\"dz-thumbnail\" data-dz-thumbnail>\n\
	      <div class=\"dz-success-mark\" style=\"display:none;\"><i class=\"fa fa-2x fa-check-circle\"></i></div>\n\
	    </div>\n\
	    <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n\
	    <div>\n\
	      <div class=\"dz-filename\"><span data-dz-name></span></div>\n\
	      <div class=\"dz-my-separator\"> / </div>\n\
	      <div class=\"dz-size\" data-dz-size></div>\n\
	      <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n\
	    </div>\n\
	  </div>\n\
	</div>\n\
	"
});
});

■ dropzone_upload.php

dropzone_upload.phpは以下のように作成しておきます

<?php
$ds = DIRECTORY_SEPARATOR;
$store_folder = dirname(__FILE__) . $ds . '..' . $ds . 'data' . $ds . 'tmp' . $ds;
// echo $store_folder;
if (!empty($_FILES)) {
	$temp_file = $_FILES['file']['tmp_name'];
	$ext = get_ext($_FILES['file']['name']);	// ファイル名から拡張子を取得
	$target_file = basename($_FILES['file']['tmp_name'].$ext);
	$ja_file     = $_FILES['file']['name'];
	$target_file_fullpath =  $store_folder . $target_file;
	move_uploaded_file($temp_file, $target_file_fullpath);
	echo "{$target_file}\t{$ja_file}";		// 英語ファイル名[TAB]日本語ファイル名 を返す
}

//========== _get_ext mime-typeを調べて拡張子を返す
function get_ext($file_name){
	$p = pathinfo($file_name);
	if ( isset($p['extension']) ){
		return '.'.$p['extension'];
	}
	else{
		return '';
	}
}

■ dropzone.css

dropzone.cssは以下のように作成しておきます

#image_drop_area {
	text-align: center;
	padding: 20px 0;
	height: 70px;
	width: 100%;
	color: #666;
	background-color: #f9f9f9;
	border: 4px dotted #bbb;
}
.dragover {
	color: #111               !important;
	background-color: #f1f1f1 !important;
	border: 4px dotted #777   !important;
}
.dz-preview {
	margin: 5px 0;
	padding: 10px;
	float: left;
	background-color: #F5F5F5;
	border-radius: 5px;
}
.dz-details {
	padding: 0;
}
.dz-filename , .dz-size, .dz-my-separator , .dz-remove {
	font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
}
.dz-filename , .dz-my-separator, .dz-size , .dz-error-message {
	float: left;
}
.dz-my-separator {
	width: 20px;
	text-align: center;
}
.dz-size {
	margin-top: 1px;
}
.dz-progress {
	width: 500px;
}
.dz-progress .dz-upload {
	display: block;
	border: 5px solid #1E9BFF;
	border-radius: 2px;
}
.dz-remove {
	float: left;
	margin-left: 5px;
}
.dz-thumbnail {
	margin-bottom: 3px;
}
.fa-check-circle:before {
	color: #93C54B;
}
.dz-thumbnail , .dz-success-mark {
	display: block;
	float: left;
}
.dz-success-mark {
	height: 25px;
	margin-left: 5px;
}

2. htmlファイルからdropzoneを読み込み

(formタグのactionは dropzone_upload.phpである必要はありません。通常のフォーム送信CGIでOKです。)

<html>
<head>
<meta charset="UTF-8">
<title>dropzone test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dropzone.js"></script>
<script src="dropzone_config.js"></script>
<link href="dropzone.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form action="XXXXXX.XXX">
    <div id="image_drop_area" >ここにアップロードファイルをドロップ</div>
    <div id="preview_area" class="dropzone-custom"></div>
</form>
</body>
</html>

以上です。

No.982
01/22 23:37

edit

HTML5
フォーム
jQuery
Ajax
画像

JavaScript の getElement系メソッドによる HTMLタグ(DOMオブジェクト)の取得

JavaScriptでIDやタグ(DOMオブジェクト)を取得するとき

jQueryを使わないJavaScript本体では ・getElementsByTagName ・getElementsByName ・getElementById の3つのメソッドが使用できます。

DOMオブジェクト取得時には取得の成否を判別する必要があります。

使い方は以下のとおりです。

■ document.getElementsByTagName(タグ名によるDOMオブジェクトの取得)

<a href="#">テスト</a>
var obj_array = window.document.getElementsByTagName('a');
if (obj_array.length > 0){
  alert('Aタグは存在します。');
  for ( var i=0; i<obj_array.length; i++){
	  alert(obj_array[i].innerText);
  }
}
else{
  alert('Aタグは存在しません。');
}

■document.getElementsByName(name属性によるDOMオブジェクトの取得)
<input type="text" name="hoge_name">
if (window.document.getElementsByName("hoge_name").length > 0){
  alert('name="hoge_name"のタグが存在します。');
}
if (window.document.getElementsByName("fuga_name").length > 0){
  alert('name="fuga_name"のタグが存在します。');
}
else{
  alert('name="fuga_name"のタグが存在しません。');
}

■document.getElementById(ID名によるDOMオブジェクトの取得)
<div id="hoge_id"></div>
if (window.document.getElementById("hoge_id")){
  alert('id="hoge_id"のタグが存在します。');
}
if (window.document.getElementById("fuga_id")){
  alert('id="hoge_id"のタグが存在します。');
}
else{
  alert('id="hoge_id"のタグが存在しません。');
}
No.979
10/23 16:34

edit

フォーム
DOM
jQuery

入力途中のフォーム内容を保存して自動的に復元する 『Sisyphus.js』

『Sisyphus.js』はフォームへの入力途中に「戻るボタン」を押して画面遷移した場合や「リロード」ボタンを押した時に自動的に値をローカルDBに保存して復元してくれるjQueryプラグインです。

HTML5のローカルDBを使用しますので Windows IE は 8以上が必要です。 それ以外のモダンブラウザは全て問題なく動作します。

■ Sisyphus.js

http://sisyphus-js.herokuapp.com/

■ 使い方( input type="hidden" 以外の全てのフォームを自動で記憶する。)

<form id="FM">
</form>
$(function(){
	$( "#FM" ).sisyphus( {
		locationBased: false,
		excludeFields: $('input[type="hidden"]'),
		autoRelease: false
	} );
});
No.974
09/09 15:00

edit

フォーム
jQuery
HTML5

IE8以下で console.log がエラーになる問題の対処

IE8以下で JavaScriptで console.log() を記述しているとエラーとなってしまいます。 そこでIE8以下でもとりあえずエラーが出ないようにする対策

対策1. consoleオブジェクトがあるかどうかを調べてから console.log() を使用する

console.log( my_obj);

  ↓ このように変更する。

if(console && console.log) { console.log( my_obj); }

対策2. 何もしない空のconsoleオブジェクトを作成する

(function () {
    if (typeof window.console === "undefined") {
         window.console = {}
    }
    if (typeof window.console.log !== "function") {
         window.console.log = function () {}
    }
})();

引用 : http://goo.gl/czcLY3

No.972
09/09 10:42

edit

jQuery
エラー対処

フォームのプレースホルダーをjQueryで再現する

HTML5のプレースホルダー(placeholder : 入力例)はブラウザによって挙動が違うためイマイチ使い勝手がよくありません。
そこでjQueryで同様のことを実現します。
さらに、フォーカス時に入力例が消えて、フォーカスが外れると入力例が再び表示される仕様にします。

■ 動作デモはこちら

HTML

<div style="position:relative;" >
<input type="text" class="placeholder_check">
<span class="placeholder">http://</span>
</div>

JS

$(function(){
$(".placeholder_check").each(function(){
if( $(this).val() ){
  $(this).next(".placeholder").hide();    
}
});
$(".placeholder_check").focus(function(){
  $(this).next(".placeholder").hide();
});
$(".placeholder").click(function(){
  $(this).prev(".placeholder_check").focus();
});
$(".placeholder_check").blur(function(){
  if($(this).val() == "") {
    $(this).next(".placeholder").show();
  }
});
});

CSS

.placeholder {
	display: block;
	white-space:pre;
	position: absolute;
	top: 9px;
	left: 30px;
	color: #bbb;
}

参考 : http://hack.aipo.com/?p=3005

添付ファイル1
No.964
07/23 09:54

edit

添付ファイル

jQuery
フォーム
HTML5

JavaScript(jQuery)でギターのタブ譜を表示する

JavaScript(jQuery)でギターのタブ譜を表示するライブラリ。以下のようなものがありました

vexflow

http://www.vexflow.com

gregjopa/HTML5-Guitar-Tab-Player

https://github.com/gregjopa/HTML5-Guitar-Tab-Player
タブ譜と五線譜が両方表示されます。
再生ボタンを押して演奏することもできます。

HTML5 Guitar Tab Player

http://www.codeproject.com/Articles/834206/HTML-Guitar-Tab-Player
旋律用ギタータブ譜。再生ボタンを押して演奏することもできます。

acspike/ChordJS

https://github.com/acspike/ChordJS
ギターコードの指板画像を表示する。

No.945
09/14 00:43

edit

jQuery
HTML5

jQueryでフォームの全ての要素に入力や選択があるかどうかを調べる

関数 is_form_written を定義

function is_form_written(jq_obj){
	var tagname = $(jq_obj).prop("tagName");
	var type = $(jq_obj).prop('type');
	if (tagname==='SELECT'){
		if ( $(jq_obj).val() === '' ){ return false; }
		else{ return true; }
	}
	else if (tagname==='INPUT'){
		if (type==='radio'){
			return $(jq_obj).prop('checked');
		}
		else if (type==='checkbox'){
			return $(jq_obj).prop('checked');
		}
		else if (type==='text'){
			if ($(jq_obj).prop('value')!==''){ return true; }
			else{ return false; }
		}
	}
	else{
console.log($(jq_obj).prop("tagName"));
	}
}

以下のように呼び出して全ての要素(input , select , textarea)をチェックします

$('input,select,textarea').each(function(){
	if ( is_form_written(this) ){
		alert( $(this).prop('name') + ' は入力または選択済みです。');
	}
})
No.935
03/19 19:15

edit

jQuery
フォーム

ドロップダウンリスト(オプション・メニュー)のスタイルを変更するjQueryプラグイン【jquery.customSelect】

<i class="fa fa-github fa-2x"></i> jquery.customSelect

https://github.com/adamcoulombe/jquery.customSelect

ダウンロードするには【Download ZIP】のアイコンをクリック

<select>の後ろに<span class="customSelect">というタグを追加することによりドロップダウンリスト(オプション・メニュー)のスタイルを変更するプラグインです。

■ 使い方

<select class="my_form">
<option value="">選択してください</option>
<option value="土曜日">土曜日</option>
<option value="日曜日">日曜日</option>
</select>

というHTMLを用意して

<script src="jquery.min.js"></script>
<script src="jquery.customSelect.js"></script>
<script>
$(function(){
    $(".my_form").customSelect();
});
</script>

で実行します。

■ 動的に値を書き換える(ドロップダウンリストの状態を変更する)場合

動的に<select>の値を変更しても、jquery.customSelectによって生成された<span>の状態までは書き換えられません。

そこで次のように「trigger('render')」を使って書き換えを行います。

$(".my_form").val('土曜日');
$(".my_form").trigger('render');
No.931
03/07 11:48

edit

jQuery

jQueryでのクラス表示方法・クラス指定方法

あるタグ(jQueryオブジェクト)のクラス,IDを取得し表示

<div id="hoge" class="red big long" >テスト</div>
// そのタグが持つクラスを取得し表示
alert( $('div').attr('class') );
// そのタグが持つIDを取得し表示
alert( $('div').attr('id') );

複数のクラスを持つタグ(jQueryオブジェクト)を選択【AND検索】

<div class="foo bar">テスト</div>
// 間にスペースはいれない
$('.foo.bar')

// +をつかった書き方(こちらのほうが見やすいと思います)
$( '.foo' + '.bar' )

あるIDとあるクラスを持つタグ(jQueryオブジェクト)を選択【AND検索】

<div id="myID" class="myCLASS">テスト</div>
// +をつかって書く
$( '#myID' + '.myCLASS' )

あるクラスまたは別のあるクラス【OR検索】

<div id="myID" class="testA">テストA</div>
<div id="myID" class="testB">テストB</div>
// クラスの間にカンマをはさみます
$('.testA,.testB').each(function(){
    alert( $(this).attr('class') );
})
No.929
12/21 17:44

edit

jQuery

jQueryでフォームの入力値をチェックする(Validation)プラグイン

● jQuery Validation Plugin

http://jqueryvalidation.org

● 日本語での解説

http://kudakurage.hatenadiary.com/entry/20091211/1260521031

● スクリプトの読み込み

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js

● 用意するHTML

<form name="FM">
<input type="text" name="hoge">
<input type="text" name="fuga">
</form>

● バリデーションの定義

$("#FM").validate({
	rules: {
		hoge: {
			required: true
		} ,
		'fuga': {
			required: true
		} 
	} ,
	messages: {
		hoge: {
			required: '入力してください。'
		} ,
		'fuga': {
			required: '入力必須項目です。'
		} 
	}
});

● 標準搭載されているバリデーションメソッド

required – Makes the element required.
remote – Requests a resource to check the element for validity.
minlength – Makes the element require a given minimum length.
maxlength – Makes the element require a given maxmimum length.
rangelength – Makes the element require a given value range.
min – Makes the element require a given minimum.
max – Makes the element require a given maximum.
range – Makes the element require a given value range.
email – Makes the element require a valid email
url – Makes the element require a valid url
date – Makes the element require a date.
dateISO – Makes the element require an ISO date.
number – Makes the element require a decimal number.
digits – Makes the element require digits only.
creditcard – Makes the element require a credit card number.
equalTo – Requires the element to be the same as another one

● 正規表現のバリデーションメソッドを追加する

$.validator.addMethod("myregex", function(value, element, reg_str) {
	var re = new RegExp(reg_str);
	return re.test(value);
}, "入力値が正しくありません");

バリデーション定義に以下のように記述

rules: {
	postal: {
		myregex: '^[0-9\-]+$'
	}
} ,
messages: {
	postal: {
		myregex: '郵便番号を正しく入力してください。'
	}
}

● バリデーションのルールを追加するには関数を定義します

jQuery.validator.addMethod('my_validation_func', function(value, element) {
	if ( XXXXX ){		// XXXXX にエラー判別ロジックを記述
			return true;	// trueが返るとエラーとならない
		}
	else{
		return false;	// falseが返るとエラー
	}
}, 'デフォルトのエラーメッセージ');

● エラー時にエラーのあったフォーム要素自身にエフェクトをかける

$("#FM").validate({
  highlight: function(element, errorClass) {
     $(element).fadeOut(function() {
       $(element).fadeIn()
     })
  }
});

● フォームのハイライトを中止する

標準ではエラー時にフォーム要素に error というクラスが付加されますが、これがいらない場合は 空のfunction() を定義します。

$("#FM").validate({
    highlight: function(element, errorClass) {
    }
});

● 任意のタイミングでバリデーションを実行する

バリデーションの実行タイミングは ・フォーム Submit時 ・エラー後のフォーム内容変更時 ですが、任意のタイミングでバリデーションを実行するには valid()メソッドを実行すればOK。

<form id="FM">
$("#FM").valid();

● 特定のボタンが押された時など任意のタイミングでvalidationを停止する

$("#FM").validate().cancelSubmit = true;

● バリデーション required 条件の条件分岐1

下記のようにすると id="foo" のラジオボタンやチェックボックスがチェックされている時にだけバリデーションを行います

rules: {
  my_name : { required: '#foo:checked' } 
} ,

次のような指定方法があります

指定値 説明
#foo:checked id="foo" のラジオボタンやチェックボックスがチェックされている時
#foo:filled id="foo" のフォーム要素に何か文字(空白以外)が入力されている時
#foo:visible id="foo" のフォーム要素が表示されている時

● バリデーション required 条件の条件分岐2

rules: {
  my_name : { required: function() { return ($('#my_flg').val() === '1' ); } } 
} ,
messages: {
  my_name: { required: 'my_flgが『1』の時はmy_nameは空欄にはできません' } 
}
No.928
08/07 12:09

edit

フォーム
jQuery
エラー対処

最も簡単にYouTube動画を貼り付けるjqueryプラグイン

■ jQuery.tubeplayer.js ↓(ダウンロードは下記サイトの画面右下【Download ZIP】から)

https://github.com/nirvanatikku/jQuery-TubePlayer-Plugin

コードは下記のようになります

<script src="jquery.js"></script>
<script src="jQuery.tubeplayer.min.js"></script>
<div id='player'></div>
<script>
jQuery("#player").tubeplayer({
	width: 600, // the width of the player
	height: 450, // the height of the player
	allowFullScreen: "true", // true by default, allow user to go full screen
	initialVideo: "[some video id]", // the video that is loaded into the player
	preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
	onPlay: function(id){}, // after the play method is called
	onPause: function(){}, // after the pause method is called
	onStop: function(){}, // after the player is stopped
	onSeek: function(time){}, // after the video has been seeked to a defined point
	onMute: function(){}, // after the player is muted
	onUnMute: function(){} // after the player is unmuted
});
</script>

簡単ですね。

No.914
11/06 16:34

edit

YouTube
jQuery

SWF Object 不要。jqueryのFlashムービー(swf)貼り付けプラグイン

http://jquery.thewikies.com/swfobject/

$('#hogehoge').flash({
  swf: "http://www.youtube.com/v/"+video_id+"&autoplay=1",
  width: 600,
  height: 600,
  bgcolor:'#000000',
  hasVersion: 10,
  hasVersionFail: function (options) {
   alert('version error');
   return false;
  },
  encodeParams: true,
  flashvars: {
   allowfullscreen: 'true'
  },
}
);
No.886
05/17 10:51

edit

jQuery

jQueryで<ul><li>の最後の要素を選択する

jQueryで<ul id="test"><li>の最後の要素を選択するには下記のようにします。

	$('#test li:last');

コーディング例:最後の要素のIDを表示します。

HTML

<ul id ="test">
<li id ="test1">あああ</li>
<li id ="test2">いいい</li>
<li id ="test3">ううう</li>
</ul>

JavaScript

alert( $('#test li:last').attr('id') );
No.885
05/07 14:48

edit

jQuery

jQueryで "ある要素" が画面内にあるかどうかを判別する

jQueryで "ある要素" が画面内にあるかどうかを判別するには

要素のページ内での位置(Y座標)、現在のスクロール位置(Y座標)を見て判別します。

$(function() {
	// 引き金となる要素を設定
	var triggerNode = $(".trigger");
	// 画面スクロール毎に判定を行う
	$(window).scroll(function(){
		// 引き金となる要素の位置を取得
		var triggerNodePosition = $(triggerNode).offset().top - $(window).height();	
		// 現在のスクロール位置が引き金要素の位置より下にあれば‥
		if ($(window).scrollTop() > triggerNodePosition) {
			// なんらかの命令を実行
			console.debug("Do Something");
		}
	});

引用元:http://hennayagyu.com/webhack/javascript/

ある要素が表示されたときに命令を実行するjavascript-w-jquery-2348

No.879
05/30 10:08

edit

jQuery

IE8 IE7 IE6 でCSS3の background-size: contain; を使用できるようにするjQueryプラグイン

CSS3で追加された background-size。値は以下のとおり指定します。

<b>auto</b> 自動的に算出される(初期値)
<b>contain</b> 背景領域に収まる最大サイズになるように背景画像を拡大縮小する
<b>cover</b> 背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
<b>xxx px</b> 背景画像の幅・高さを指定する
<b>xxx %</b> 背景領域に対する背景画像の幅・高さのパーセンテージを指定する

とこれが Windows IE8 7 6 ではこのプロパティは認識されません。

そこで以下のjQueryプラグイン

■ jquery.backgroundSize.js

(要 jQuery バージョン1.7.0以降 )

http://louisremi.github.com/jquery.backgroundSize.js/demo/

■ 使い方(<div class="hoge">に { background-size : cover; } を適用する。)

<script type="text/javascript" src="jquery.js"></script>
<!--[if lte IE 8]>
    <script type="text/javascript" src="jquery.backgroundSize.js"></script>
    <script>
    jQuery(document).ready(function() {
        jQuery('div.hogehoge').css({backgroundSize: "cover"});
    });
    </script>
<![endif]-->

No.872
05/30 10:08

edit

jQuery

JavaScript(jQuery) で郵便番号から住所を自動入力する2つのライブラリ

■ 1.【 jQueryプラグイン jquery.jpostal.js】

設置が簡単なのでおすすめです。住所データも自動更新。

https://github.com/ninton/jquery.jpostal.js

ライブラリの読み込み

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>

スクリプトの実行

$('#postcode1').jpostal({
	postcode : [
		'#postcode1', // 郵便番号 前3桁
		'#postcode2' // 郵便番号 後4桁
	],
	address : {
		'#address1'  : '%3', // 都道府県
		'#address2'  : '%4', //住所1
		'#address3'  : '%5' // 住所2
	}
});

です。とても簡単ですね。


■ 2. 【ajaxzip3】

郵便番号から住所を自動入力するには住所データ自動更新してくれる ajaxzip3 も簡単便利です。

https://github.com/ajaxzip3/ajaxzip3.github.io

ライブラリの読み込み

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

郵便番号入力欄に追加

正規表現で郵便番号が7桁入力された時に検索を実行するようにします。

【name=zipcode】のテキストエリアに7桁の郵便番号を入力すると

【name=prefecture】のドロップダウンリスト

【name=address】の1行テキストに住所が反映されます。

■ HTMLの1行テキストを下記のように修正

<input name="zipcode" type="text" />
↓
<input name="zipcode" type="text" onkeyup="check_zip(this);" />

■ HTMLの<head>タグ内に下記を追加(.js ファイルにして外に出してもok)

<script>
var postal_name = '';
function check_zip( _this ){
    if ( postal_name != _this.value ){
        AjaxZip3.zip2addr( '_this', 'prefecture', 'address' );
        postal_name = _this.value;
    }
}
</script>

これだけです。

No.870
07/14 13:50

edit

jQuery

ウィンドウサイズ変更を検知してサイズによって画像サイズを変更する

以下のようにウィンドウサイズによって画像サイズを変更したい時があります。

・画面サイズ(横幅)が800px 以下の場合は 800px固定

・画面サイズ(横幅)が800px 以上の場合は 100%(横いっぱい)

jQueryを使って以下のようにします。

<img id="hogehoge" src="./test.jpg" width="800" />
<script>
function liquid_image(){
	var wh = jQuery(window).height();
	var ww = jQuery(window).width();
	if (ww > 800){
		jQuery('#hogehoge').css("width", "100%");
	}
	else{
		jQuery('#hogehoge').css("width", "800px");
	}
}
jQuery(document).ready(function(){
	liquid_image()
});
jQuery(window).resize(function(){
	liquid_image()
});
</script>

jQueryのウィンドウサイズ変更を検知するイベント

jQuery(window).resize(function(){
// ここに処理を記述
});

jQueryの画面スクロール変更を検知するイベント

jQuery(window).scroll(function () {
// ここに処理を記述
});
No.869
01/26 19:25

edit

画像
jQuery

iPad, iPhone, スマートフォン用にviewportをJavaScriptで設定する

下記の用に JavaScriptで端末を判別してからそれぞれにセットしたい viewport を追加します。

下記の例では

iPhoneの時 499px

iPad の時 999px

にセットしています。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    if(navigator.userAgent.indexOf('iPhone') > -1){
        jQuery("head").append(jQuery('<meta name="viewport" content="width=499, user-scalable=yes" />'));
    }
    else if(navigator.userAgent.indexOf('iPad') > -1){
        jQuery('head').append('<meta name="viewport" content="width=999, user-scalable=yes" />');
    }
});
</script>
No.867
12/01 23:19

edit

jQuery

jQueryで画像やリンクのクリック状態(マウスイベント)やキーボード入力状態を強制的に作り出す

http://api.jquery.com/trigger/

<b>.trigger()</b> メソッドを使って強制的にイベントを作ることができます。

// id=hoge の要素をクリック状態(onclick)を作り出す
jQuery('#hoge').trigger("click");

// id=fuga の要素にマウスオーバーさせる(onmouseover)
jQuery('#fuga').trigger("mouseover");

注意

<input type="text" name="hoge" id="hoge_id">
のフォームがあるとき
$("input[name='hoge']").trigger("focus"); // 動作しません ☓ NG
$("#hoge_id").trigger("focus"); // 動作します ○ OK

となりますので注意。

指定できるのは次のイベントです

 blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup

キーボードの入力状態を強制的に作り出す

var evt = $.Event('keydown');
evt.keyCode = 39;    // キーボードの右矢印(→)入力
$('#hoge').trigger(evt);

jQueryのkeycodeはこちらで調べられます

http://goo.gl/HO6ong

keycode一覧表

http://goo.gl/5UwW2

No.853
03/11 16:34

edit

jQuery

JavaScript(jQuery)でスマートフォン(iPhone, iPad, Android)を判別する

jQueryでスマートフォン(iPhone, iPad, Android)を判別するには下記のようにします

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
		alert('スマートフォンです:' + agent);
	}
});
</script>
No.846
04/24 15:55

edit

jQuery
iPhone

GoogleによるJavaScriptホスティング(CDN)を使用する

2009年からGoogleが有名なJavaScript(jQuery , prototype.js 等)のホスティングを開始しています。

もちろん運用で使用してもいいのですが、ちょっとしたテスト等には確実に使えます。

使用方法( 最新のjQueryを呼び出す )

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

使用方法(jQuery UI を呼び出す)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>


使用方法(swfobjectを呼び出す)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

使用方法(prototype.jsを呼び出す)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>

その他貼りつけソースコードをコピーするサイト

http://scriptsrc.net/

No.795
04/05 17:35

edit

Google
jQuery
prototype.js

jQueryのテンプレートプラグイン【 jQuery.tmpl 】を使用する

jQuery Plugin .tmpl()

http://api.jquery.com/jquery.tmpl/

ダウンロードはこちら

https://github.com/jquery/jquery-tmpl

ソースは以下のとおり

手順は

1. jqueryとjquery.tmpl を読み込む
2. テンプレートを定義する(<!-- template -->で囲まれたところ)
3. データを定義する( var data = ..... ; のところ)
4. テンプレートを表示する ( $tmpl ....... のところ )

です。

簡単ですね。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tmpl.min.js"></script>
</head>

<body>
<div id="target"></div>

<!-- template -->
<script id="template" type="text/x-jquery-tmpl">
  <li>${name}</li>
</script>
<!-- /template -->

<script>
var data = [ { "name" : "HOGE hofe" }, { "name" : "FUGA fuga" } ];
alert( $.tmpl( $('#template'), data ).html() );
$.tmpl( $('#template'), data ).appendTo( "#target" );
</script>

</body>
</html>
No.843
04/09 14:02

edit

Ajax
jQuery

jQueryでオブジェクト(HTMLタグ要素)の存在、表示、アニメーション中を判別する

jQueryでオブジェクト(HTMLタグ要素)の存在を判別するには <b>.length</b>や <b>.is()メソッド</b> を使用します。

●<div id="hoge">が<b>『存在するかどうか?』</b>を調べるには

if($('#hoge').length) {
    alert('存在します');
}

とします。

●<div id="hoge">が<b>『表示中か非表示か?』</b>を調べるには

// 方法1. 「透明度」と「visibility」両方を確認する(おすすめ)
  if ($('#hoge').css('opacity') > 0 && $('#hoge').filter(':not(:hidden)').length ){
    alert('表示中です');
}
// 方法2. 「visibility」のみ確認する
if( $('#hoge').filter(':not(:hidden)').length ){
    alert('表示中です');
}
// 方法3. 「visibility」のみ確認する
if ( $('#hoge').is(':visible') ){
    alert('表示中です');
}

●<div id="hoge">が<b>『CSS3アニメーション中かどうか?』</b>を調べるには

    console.log( $('#hoge').css("transform") );
    console.log( $('#hoge').css("transition") );
    console.log( $('#hoge').css("opacity") );

など、CSSのプロパティを取得してきて変化中の値を見るといいでしょう。

●<div id="hoge">が<b>『JavaScript(jQuery)アニメーション中かどうか?』</b>を調べるには

// 方法1.
if ( $("#hoge:animated").length ){
	alert('アニメーション中です');
}
// 方法2.
if ( $("#hoge").is(":animated") ){
	alert('アニメーション中です');
}

.is() メソッドを覚えておくと色々便利です。

上記の例以外にも

// 要素にフォーカスがあたっているなら
if ($("#hoge").is(":focus") ){
    alert('フォーカスしています');
}

// 要素が最後の要素であれば
if ( $(".fuga").is(":last-child") ){
    alert('最後の要素です');
}

// 要素が表示中なら
if( $("#hoge").is(":visible") ){
    alert('表示中です');
} 

// 要素が非表示なら
if ( $("#hoge").is(":hidden") ){
    alert('非表示です');
}

// 要素がfugaクラスを内包しているなら
if ( $("#hoge").is(":has('.fuga')") ){
    alert('.fugaクラスを内包しています');
}
 
No.829
06/05 15:17

edit

jQuery

Windows版IE6, IE7, IE8 での<label>タグがきかない不具合に対応する。

Windows版IE6, IE7, IE8 での<label>タグがきかない不具合に対応する。

チェックボックスやラジオボタンの様にクリックするのが小さいフォームを作るときは、

フォームの横の文字もクリック出来るようにしておくととても便利です。

それを実現するのが<label>タグなのですがIEでは以下の2つの不具合があります。

■ 1.IE6では<label></label>でテキストを囲んだだけでは動作しない

以下のコードはIE6では動作しません。

<label><input type="checkbox" />チェックボックス1</label>
<label><input type="checkbox" />チェックボックス2</label>

以下のように全ての<checkbox>にidをセットして、<label>タグでそのIDを指定します。

<input type="checkbox" id="label_1" /><label for="label_1">チェックボックス1</label>
<input type="checkbox" id="label_2" /><label for="label_2">チェックボックス2</label>

■ 2.IE6, IE7, IE8では<label>タグ内に画像があった場合その画像をクリックしても何も起こらない

IE9では修正されていますが、IE6,7,8では以下のコードの時画像をクリックしてもチェックボックスにチェックはつきません。

<input type="checkbox" id="label_1" /><label for="label_1"><img src="photo.jpg" /></label>

それを修正するにはJavaScript(jQuery)プラグインを使用します。

$(function () {
        $('label > img').click(function () {
            $('#'+$(this).parent().attr('for') ).focus().click();
        });
});

これを「jquery.ie678label.js」で保存してサーバーにアップロード。

条件付きコメントでIE8以下のブラウザにのみ読み込ませます

<!--[if lte IE 8]>
<script type="text/javascript" src="jquery.ie678label.js"></script>
<![endif]-->

これhtmlは何も書き換えずにIE6,7,8,で<label>内画像をクリックできるようになります。

No.826
04/03 14:45

edit

jQuery

■ Google Maps を住所から自動生成するサンプル ( Google Maps API V3 使用)

PHPやPerlなどで動的に出力されるページにGoogle Mapsを埋め込む場合、

「住所を入力して地図を表示」→「埋め込みコードを取得」→「ページに貼り付け」

をやっていたのでは面倒な場合があります。

そこでGoogle Maps API V3を使用して簡単に地図表示を行います。

(ただしWindowsIE6は未対応なので対応したい場合はV2を使用します。)

Google Maps を住所から自動生成するサンプル

google_map.js

var my_google_map;
var my_google_geo;

function googlemap_init( id_name, addr_name ) {
	var latlng = new google.maps.LatLng(41, 133);
	var opts = {
		zoom: 15,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: latlng
	};
	my_google_map = new google.maps.Map(document.getElementById(id_name), opts);

	my_google_geo = new google.maps.Geocoder();
	var req = {
		address: addr_name ,
	};
	my_google_geo.geocode(req, geoResultCallback);
}


function geoResultCallback(result, status) {
	if (status != google.maps.GeocoderStatus.OK) {
		alert(status);
	return;
	}
	var latlng = result[0].geometry.location;
	my_google_map.setCenter(latlng);
	var marker = new google.maps.Marker({position:latlng, map:my_google_map, title:latlng.toString(), draggable:true});
	google.maps.event.addListener(marker, 'dragend', function(event){
		marker.setTitle(event.latLng.toString());
	});
}

これを読み込んで

html

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script>
<script src="googlemap.js" type="text/javascript" charset="UTF-8"></script>
<script>
$(document).ready(function(){
	googlemap_init('google_map', '■表示させたい住所■');
});
</script>

<body>
<div id="google_map" style="width: 600px; height: 600px"></div>
</body>

で起動します。

■表示させたい住所■を任意の住所に書き換えればOK。

サイズは

<div id="google_map" style="width: 600px; height: 600px"></div>

をスタイルで書き換えます。


jqueryプラグインはこちら

http://blog.bumberboom.net/archives/monthly/2010_09/google-maps-api-v3-jquery.php

※ なおGoogle Maps APIのバージョン3からAPIコードは必要なくなりました。

添付ファイル1
No.824
09/20 10:54

edit

添付ファイル

jQuery
Google

jQueryのアニメーションにイージングをかける

■ jQueryのアニメーションにイージングをかけるplugin
http://gsgd.co.uk/sandbox/jquery/easing/

イージングサンプルはこちら
http://semooh.jp/jquery/cont/doc/easing/
No.820
10/12 10:59

edit

jQuery

jQueryで画像にマスクをかける画像ギャラリー【mbmaskedgallery】

■ mbMaskedGallery.js (要jQuery)

http://pupunzi.open-lab.com/2009/02/16/mbmaskedgallery/

サンプルは以下のとおり

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="mbMaskedGallery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("#id名").mbMaskGallery({
		type:"normal",			// または "random"
		transition:"crossfade",		// または "normal"
		galleryMask:"photo.png",	//マスクする画像
		galleryColor:"black",		//マスクの背景色
		galleryLoader:"loader.gif",	//ローディング画像
		loaderOpacity:.3,		//ローダーの透明度
		loader:true,			// または "false"
		fadeTime: 200,			//フェードの時間
		navId:"",
		nextPath:"",
		prevPath:"",
		slideTimer: 2000
		changeOnClick:false,

	});
});
</script>
<body>
<div id="sample">
<img src="g/sky.jpg">
<img src="g/muuu_01.gif">
<img src="g/muuu_02.gif">
<img src="g/muuu_03.gif">
</div>

No.819
10/04 13:54

edit

jQuery
画像

Appleの検索窓のようにフォーカスするとサイズが変わるテキスト入力を実現する

Appleの検索窓のようにフォーカスするとサイズが変わるテキスト入力を実現するjQueryプラグイン

■ jQuery Smooth Animated Search Field Freebie

http://thefinishedbox.com/freebies/scripts/jquery-animated-search/

デモはこちら

http://thefinishedbox.com/files/freebies/jquerysearch/index.html


No.797
05/16 14:03

edit

jQuery

jQueryでiPhoneの電話帳のように画面左に「A〜Z」のショートカットインターフェースを再現する

jQueryでiPhoneの電話帳のように画面左に「A〜Z」のショートカットインターフェースを再現する
■ slidernav
http://devgrow.com/slidernav/
デモ
http://devgrow.com/slidernav-jquery-plugin/

No.796
05/27 13:50

edit

jQuery
iPhone

jQueryによるGoogleサジェストライクなプラグイン【jquery.autocomplete.js】

入力テキストの値を補間するGoogleサジェストライクなプラグイン

■ jquery.autocomplete.js

http://docs.jquery.com/Plugins/Autocomplete

サンプルコード

$(function() {
	$("#Keywords").autocomplete('/ajax_suggest.php?flag=amazon', {
		delay : 50
	}).keydown(function(event){
        if( event.keyCode == 13 ){
            if( !event.isDefaultPrevented() ){
                return false;
            }
			else{
				document.form1.submit();;
			}
        }
    });
});

http://kazunori.watson.jp/uchikikase/?p=365

No.794
05/10 13:37

edit

jQuery
Ajax

リファラー(REFERRER)を消して外部ページに移動する

外部ページに移動するときに リファラー(HTTP_REFERER)をサーバに送りたくない時があります。そんなときは次のやり方で行けます。

動作サンプルはこちら

http://logic.moo.jp/data/filedir/569_1.html

Safari5 , Chrome で有効な方法

<a href="data:text/html;charset=utf-8,%3Chtml%3E%0D%0A%3Cscript%20%3E%0D%0Alocation.replace(%22http%3A%2F%2Fwww.teria.com%2F~koseki%2Fmemo%2Freferrer%2Fview.php%22)%3B%0D%0A%3C%2Fscript%3E%0D%0A%3C%2Fhtml%3E%0D%0A">リファラ消し</a>

Firefox4 , IE6,7,8 で有効な方法

<a href="javascript:document.open();document.write('<meta http-equiv=\'refresh\' content=\'0;url=http://taruo.net/e/\'>');document.close();">3. リファラ消し</a>

ただしOperaではうまく動作しません。

その場合苦肉の策としてGoogleを経由するという方法を使います

<a href="http://www.google.com/url?q=http://taruo.net/e/">4. リファラ消し(Using Google)</a>

HTML5の rel=noreferrer を使用する方法

<a href="http://taruo.net/e/" rel=noreferrer>5. リファラ消し</a>

◆ 外部リンク時にリファラーを消すjQueryプラグイン【jquery_kill_referrer.js】

http://logic.moo.jp/data/filedir/569_3.js

これを jquery_kill_referrer.js という名前で保存して

jQueryとともに読み込ませます(jquery.jsは各自用意してください)

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery_kill_referrer.js"></script> 

読み込ませるだけで、そのページ内の外部リンク全てにreferrerを消す処理を付け加えます

(ただしOperaは未対応)

添付ファイル1
添付ファイル2
No.569
03/28 10:15

edit

添付ファイル

jQuery

ドラッグ、ドロップで要素を順番変更するjQuery UI Sortableモジュール

ドラッグ、ドロップでテーブルやリスト要素を順番変更する【jQuery UI Sortableモジュール】というのがあります。

■ JQUERY SORTABLE

http://jqueryui.com/demos/sortable/

http://jqueryui.com/download ←ダウンロードはこちら

JS

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.xxxxx.js"></script> 
<script type="text/javascript"> 
$(function(){
$("#sortable").sortable({
update: function(event, ui) {
    var data  = $("#sortable").sortable("serialize");
    var data2 = $('#sortable').sortable('toArray').toString();
    alert(data);
    alert(data2);
}
})
.disableSelection();
});
<script>

HTML

<ul id="sortable"> 
<li id="list_1">ほげほげ</li> 
<li id="list_2">ふがふが</li> 
<li id="list_3">てすてす</li> 
</ul>

とするだけで、<li>要素がドラッグ&ドロップで順番入れ替えできます。

入れ替え後のデータは data(PHP用) , data2(CSV形式) に入るのでそれをプログラムに渡すといいでしょう。

No.713
03/30 14:09

edit

jQuery
DOM
Ajax

jQueryでHTMLソースコードを整形する

jQueryでHTMLソースコードを整形するのに便利なプラグインを紹介します。

■ jquery.indent.js

http://www.m12i.com/jquery_indent.html

使い方1(すでに取得したhtmlコードに対して使用する)

var html_a = '<html><body><div><p>テスト</p></div></body></html>';
var html_b = jQuery.indent( dumper.dump( data ),{
	tab: " " ,
	conserve: ['script', 'style'] 
});

使い方2( id="sample" の中のテキストに対して使用する)

var html_b = jQuery('#sample').indent()

簡単なのでおすすめです。

No.760
12/04 11:06

edit

jQuery

JavaScriptで外部サイトをスクレイピング【Cross-Domain-Ajax】

JavaScriptで外部サイト(別ドメイン)のファイルを取得しようとすると、crossdomainの制約にひっかかってエラーとなります。
そこでCross-Domain-Ajaxプラグインを使用します。
これはYahoo Query Language (YQL)を使用してクロスドメインの壁を越えようというものです
(ですのですべてのサイトのデータが取得できるわけではありません)

● jquery.xdomainajax.js

https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

● 例1:Yahooのトップを取得します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.xdomainajax.js"></script>
<script type="text/javascript">
	uri = 'http://www.yahoo.co.jp/';
	$.get(uri, function(data){
		alert(data.responseText);
	});
</script>

● 例2:Yahooのキーフレーズ抽出APIを呼び出してみます。

appid は各自用意してください。 ajaxメソッドを呼び出していますが、【type:'POST'】は使用出来ません。 【type:'GET'】の時のみ正常に動作します。

    // Cross Domain Ajax ajax()メソッド
    jQuery.ajax({
        url: 'http://jlp.yahooapis.jp/KeyphraseService/V1/extract',
        type: 'GET',
        data: {
            appid    : 'XXXXXXXXXX',
            sentence : '庭には二羽鶏がいる',
            output   : 'json'
        },
        success: function(data) {
            alert( jQuery(data.responseText).text() );
        }
    });

簡単ですね。 おすすめです。

No.759
06/12 10:43

edit

Ajax
jQuery

jQueryによるAjax操作の基礎

jQueryで動的に外部HTMLファイル読み込みをした後に変数に代入する

$.get("test.php", function(data, status){
  alert(status);
  alert("Data Loaded: " + data);
});

要素の内容を書き換える( .html() )

$("#hoge").html('<p>書き換える要素</p>');

要素に追加する( .append() )

$("#hoge").append('今ある要素のいちばん後ろに追加します');

要素を動的に( test.phpを読み込んで) に追加する( .load() )

$("#hoge").load("test.php,null,function(){
	alert('読み込み完了');
});

要素を削除する( .remove() )

$("#hoge").remove();

(class="hoge"な要素の)CSSプロパティを書き換える

$('.hoge').css({
	'width'  : '100px' , 
	'height' : '200px'
});

親要素、子要素を選択するセレクタの記述

#contents の中にある .title 要素を取得する場合

$(.title', '#contents');           // ☓ 遅い
$('#contents').find('.title'); // ○ 高速
$(this).parent().find('.myclass'); // 全ての子要素の中から 「myclass」クラスを取得。
$(this).children('.myclass'); // 直下の子要素の中から 「myclass」クラスを取得。孫要素は取得できない

要素の属性を取得する。属性を変更する

var img_src = $("img").attr("src");  // 取得
$("img").attr("src", "b.jpg");  // 変更

セレクタが正しく動作して、jQueryオブジェクトが取得できているかどうかを調べる

var jq_obj = $('MY_ID');
if ( $(jq_obj).length > 0 ){
	alert('jQueryオブジェクトが正しく取得できています。');
}
No.754
06/08 16:29

edit

jQuery
Ajax

jQueryまたはcssで画像の先読み(プリロード)を行う

CSS、HTMLのみでプリロードを行う

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.png); /* 読ませたいイメージ1 */
       background-image: url(path/to/image2.png); /* 読ませたいイメージ2 */
}
<div id="preloadedImages"></div>

JavaScript(jQuery)でプリロードを行う

jQuery.preloadImages = function(){
	for(var i = 0; i<arguments.length; i++){
		jQuery("<img>").attr("src", arguments[i]);
	}
};
// Usage
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");

http://phpspot.org/blog/archives/2006/04/css_2.html

http://blog.webcreativepark.net/2009/03/17-161250.html

No.740
01/21 11:32

edit

jQuery

JavaScriptでCookie(クッキー)を簡単に扱う

■ jQuery.cookie.js

● ダウンロードはこちら(ZIPボタンをクリックでダウンロード開始)

https://github.com/carhartl/jquery-cookie

● CDNはこちら

<script type="text/javascript" src="cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

使い方は

var hoge = $.cookie('the_cookie'); // get cookie
$.cookie('the_cookie', 'the_value'); // set cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); // set cookie with an expiration date seven days in the future
$.cookie('the_cookie', '', { expires: -1 }); // クッキーの削除
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
$.cookie('cookiename','data',{ expires: 7 });//書き込み{保存days}
document.write($.cookie('cookiename'));//読み出し
No.700
05/16 15:23

edit

jQuery
Cookie

Gmailのように「shift + クリック」でチェックボックスの複数選択を可能にするjQueryプラグイン

Gmailはチェックボックスを複数一気に選択したいときに先頭をまずクリックして、次に最後のチェックボックスを【シフト+クリック】するとその間にあるチェックボックスが一気に選択できて非常に便利なのですが、それをjQueryプラグインで実現するには以下のようにします。

■ 1.jQueryをダウンロード

http://jquery.com/

からjQueryをダウンロードします。(ダウンロードしたファイル名を jquery.js とします。)

■ 2. jQuery Field Plug-inをダウンロード

http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm

から【jquery.field.js】をダウンロードします。

■ 3. 以下のようなチェックボックスを含むhtmlを用意します

<form>
  <input type="checkbox" name="user_id" id="ch_1" value="1"><label for="ch_1">Option 1</label>
  <input type="checkbox" name="user_id" id="ch_2" value="2"><label for="ch_2">Option 2</label>
  <input type="checkbox" name="user_id" id="ch_3" value="3"><label for="ch_3">Option 3</label>
  <input type="checkbox" name="user_id" id="ch_4" value="4"><label for="ch_4">Option 4</label>
  <input type="checkbox" name="user_id" id="ch_5" value="5"><label for="ch_5">Option 5</label>
</form>

■ 4. 用意したhtmlのヘッダに以下の記述を追加

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.field_j.js"></script>
<script>
	$(document).ready(
		function (){
			$('input[@name="user_id"]').createCheckboxRange();
		}
	);
</script>

以上で「シフト+クリック」による複数選択が実行できます。

とても便利。

また「シフト+クリック」実行後にコールバック関数を指定することもできます。

function (){
	$('input[@name="user_id"]').createCheckboxRange( function(){
		alert('選択完了');
	} );
}

No.591
08/10 11:20

edit

jQuery
フォーム

JavaScript(jQuery)でリッチテキスト編集(wysiwyg)エディタ

JavaScript(jQuery)でリッチテキスト編集できるライブラリを探してみる。

■ cleditor(jQueryプラグイン)

http://premiumsoftware.net/cleditor/

■ jwysiwyg(jQueryプラグイン)

https://github.com/akzhan/jwysiwyg (ダウンロード)

http://akzhan.github.com/jwysiwyg/help/examples/ (デモ)

■ Yahoo! UI (おすすめ)

http://developer.yahoo.com/yui/editor/

http://developer.yahoo.com/yui/examples/editor/flickr_editor.html

■ open wysiwyg (Safari2×)

http://www.openwebware.com/products/openwysiwyg/demo.shtml

■ FCKeditor(Safari2×)

http://www.fckeditor.net/

■ TinyMCE(Safari2×)

http://tinymce.moxiecode.com/index.php


No.589
04/28 12:46

edit

jQuery

最も簡単な画像のロールオーバー導入方法 (jQuery)

■ jQuery用プラグイン jquery.easyrollover.js を使用します。

■ 1. scriptファイルを読み込ませます

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easyrollover.js"></script>

■ 2. ロールオーバー画像ファイル名の最後に _on をつける。

例: 【image.gif】 の場合 【image_on.gif】

■ 3. HTMLの<img>タグに属性 class="rollover" を追加する

<img src="image.gif" >
  ↓
<img src="image.gif" class="rollover" >

以上の手順で完了。

簡単です。

jquery.easyrollover.js のダウンロードはこちらから↓

添付ファイル1
No.579
01/21 10:20

edit

添付ファイル

jQuery
画像

jQuery , prototype.js 用「ツールチップ(吹き出し説明)」表示ライブラリ

「ツールチップ」とはオンマウス時に表示される画像やテキストのことです。

Windows IEで画像の上にマウスを置いてしばらく待つとALT属性が見えるというアレですね。

これを簡単に実装するライブラリを紹介。jQuery、prototype.js プラグインメインで探してみました。

■ script.js ( prototype.js jQuery不必要 )

http://www.leigeber.com/2008/06/javascript-tooltip/

・おすすめ

・ツールチップがフェードして現れます

■ cooltips ( 要prototype.js , script.aculo.us )

http://okonet.ru/projects/tooltips/index.html

・フェードエフェクトで出現するツールチップ

・ツールチップ枠のデザインはあらかじめ用意されたものを使用することになりそう…。

■ jTip A jQuery Tool Tip ( 要 jQuery )

http://www.codylindley.com/blogstuff/js/jtip/

・Ajaxで動的にツールチップの中身を読み込んで表示します。

・日本語テキストを扱うにはハックする必要がありそう…。

・ツールチップ枠のデザインはあらかじめ用意されたものを使用することになりそう…。

■ jQuery plugin: Tooltip ( 要 jQuery )

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

title属性やファイル名をツールチップとして表示させるというライブラリ。

オンマウスになった瞬間に表示されます。

使い方

<script type="text/javascript" src="jquery.tooltip.pack.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tooltip.css" >
<script>
jQuery('img').tooltip({
    delay: 0, 
    track: true ,
    showURL: false
});
</script>

オプション

http://docs.jquery.com/Plugins/Tooltip/tooltip#toptions


その他 jQueryライブラリはこちらで取り上げられてます

http://coliss.com/articles/build-websites/operation/javascript/356.html

No.564
08/01 10:19

edit

jQuery
prototype.js

jQuery html()メソッドと DOM.innerHTML の違い

例えば id="hogehoge" の中身を書き換えるには

■ prototype.js + DOM の場合

var mytext='aiueo';
$('hogehoge').innerHTML=mytext;

■ jQueryの場合

var mytext='aiueo';
j$("#hogehoge").html(mytext);

と書けますが、このとき

var mytext=0;
$('hogehoge').innerHTML=mytext; // 0 が表示される
j$("#hogehoge").html(mytext); // 何も表示されない

という違いがあるようなので注意!

No.553
05/27 15:37

edit

prototype.js
jQuery

window.onload 前でも DOM 処理が可能なら通知してくれる domready.js

JavaScriptでDOM操作を行うときはDOMツリーの完成を待ってから処理を行う必要があるため

window.onload を待って処理を行う必要があります。

しかし window.onload は全てのファイルの読み込み完了時に発生するイベントなので、DOMツリーの完成だけを待っている場合画像の読み込み等も待たなくてはならず、無駄が生じます。

そこでDOMツリーの完成を待つイベントを発生させるライブラリ domready.js ↓

[window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL](http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/)

domready.js 記述方法

Event.domReady.add(function() {
       alert('DOMツリーの読み込みが完了しました');
});

ちなみに jQuery では $(document).ready() で実装されています。

$(document).ready(function(){
       alert('DOMツリーの読み込みが完了しました');
});

jQueryで $(window).load() と同じ動作をさせる

jQuery.event.add(window, "load", function(){
       alert('全てのデータの読み込みが完了しました');
});

YUIでは onDOMReadyで実装されています。

YAHOO.util.Event.onDOMReady( alert('DOMツリーの読み込みが完了しました') );

prototype.jsでは Version 1.6以降 で contentloaded というメソッドで実装されています

document.observe('contentloaded', function() {
    alert('DOMツリーの読み込みが完了しました');
});

MooTools では domready イベントで実装されています

window.addEvent('domready', function() {
    alert('DOMツリーの読み込みが完了しました');
});
No.550
07/17 13:20

edit

DOM
jQuery
prototype.js
YUI

入力文字数によってテキストフィールド<textarea>のサイズを変える

A. jQueryを使用してテキストエリアを動的に変更する。【jquery.elastic.js】

http://www.unwrongest.com/projects/elastic/

$(document).ready(function(){
    // 読み込み時にリサイズ
	$('textarea#my_text_area').elastic();
    // クリック時にリサイズ
	$('textarea#text_name').bind("click", function(){
	  $('textarea#text_name').elastic();
	});
});

B. jQueryを使用してテキストエリアを動的に変更する。【autoresize.jquery.js】

http://james.padolsey.com/javascript/jquery-plugin-autoresize/

<script type="text/javascript" src="autoresize.jquery.js"></script>  
<script type="text/javascript"> 
$(document).ready(function(){
	$('textarea#my_text_area').autoResize();
});
</script>

C. prototype.js を使用してテキストエリアを自動的に変更する。

http://jroller.com/page/rmcmahon?entry=resizingtextarea_with_prototype

D. jQueryを使用してテキストエリアを動的に変更する。【jquery.autogrow-textarea.js】

http://javascriptly.com/2008/09/quick-useful-jquery-plugins/

ダウンロード:

http://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js

$(document).ready(function(){
  $('textarea#mytextarea').autogrow();
});
No.520
04/28 11:51

edit

prototype.js
jQuery

DOMオブジェクト・jQueryオブジェクト をダンプ(テキスト表示)する。

デバッグ時には必ず出くわすのですが、DOMオブジェクトの中身を見たい!という時があります。

・DOMオブジェクトの中身を確認したいときには以下のようにします。

Firefox限定ですが便利。

var serializer = new XMLSerializer();
alert( serializer.serializeToString( dom_obj ) );

・Safari、Chrome, Firefox でオブジェクトの中身を確認したいときには以下のようにします。(出力は「エラーコンソール」)

console.log( object )

Chrome, Firefox でオブジェクトの中身が DOMオブジェクトなのか jQueryオブジェクトなのかを確認したいときは

console.log( Object.getPrototypeOf( $("#test01") ) );
console.log( Object.getPrototypeOf( document.getElementById('test01') ) );

とします。 jQueryの場合は【jQuery】、DOMオブジェクトの場合は 【HTML.......】と表示されます。

ただ、そもそもオブジェクト以外の者を渡した場合場合にエラーとなりますので、

	if (Object.prototype.toString.call(my_obj)==='[object Object]'){ console.log(Object.getPrototypeOf( my_obj )); }

としてもいいです。


どうせなら groupメソッドを使って

jq_obj =  $("#test01");

console.group('jq_objの中身は↓');
console.log(Object.getPrototypeOf( jq_obj ));
console.log(jq_obj);
console.groupEnd();

とするとメッセージがグループ化されていい感じに見えます。


・jQueryオブジェクトをダンプしたい場合は

http://goo.gl/rXUKI

が便利です。

・その他のオブジェクト(JSON等)、配列、連想配列などをダンプしたい場合は

JKL.Dumper が便利です↓

http://www.kawa.net/works/js/jkl/dumper.html

使い方(オブジェクト hoge の中身をダンプする)

<script type="text/javascript" src="jkl-dumper.js"></script> 
var hoge = [1,2,3,4,5];
alert( new JKL.Dumper().dump(hoge) );

便利!!!

No.510
06/13 17:25

edit

DOM
json
配列
jQuery

jQuery と prototype.js を同時に使う。($(); のコンフリクト回避)

jQueryとprototype.js を同時に使いたい場面がまれにあります。

そのとき

$('id_name'); //prototype.js
$('#id_name'); //jQuery

といった書式を jQuery, prototype.js 共に持っているのですが、その動作(書式や戻り値)が違います。

例えば戻り値の場合、

  • prototype.js:DOMオブジェクトを返す
  • jQuery:jQueryオブジェクトを返す

という違いがあります。

そこで jQueryとprototype.jsを同時に使いたい場合は jQueryの $(); を違う名前に変更して使います。

jQuery.noConflict();
var j$ = jQuery;

2行を追加します。

こうすることによって

// jQuery
jQuery('#id_name');
j$('#id_name');
//prototype.js
$('id_name');

として使用できます

No.499
01/13 15:34

edit

jQuery
prototype.js

ajax(jQuery)で複数ファイルアップロード+転送進捗表示【uploadify】

uploadify(シェアウェア)

jQuery , Flashを使用したファイルアップロードプログラムです。

複数ファイルのアップロードも可能。

Flashバージョン、HTML5バージョンがあり、プラットフォームによって選択できます。

http://www.uploadify.com/



No.409
11/25 10:28

edit

Ajax
jQuery
HTML5

jQuery, prototype.js でラジオボタンの値を取得する

jQueryでは次のように記述します

// <input name="myform" type="radio" value="yes" />の値を取得
val = $("input:radio[name='myform']:checked").val();

prototype.js では選択されたラジオボタンの値を取得する方法がないみたい。。。

なので↓のようにする

// フォーム name="FM"  ラジオボタン name="radio_flag" の値を取得する 
val = Form.serialize($(FM)).toQueryParams()['radio_flag'];

■ prototype.js を使わない方法

// ラジオボタン name="my_radio" の値を取得
function getRadio() {
    var radioGroup = document.forms[0].my_radio;
    for (i=0; i<radioGroup.length; i++) {
        if (radioGroup[i].checked == true) {
            return radioGroup[i].value
        }
    }
}
No.241
02/12 17:45

edit

prototype.js
jQuery