DOM操作

$(“div.box”).after(“<div>…</div>”)

CLASS名 box が指定されたdivタグの後に<div>…</div>を追加

$(“<div>…</div>”).insertAfter(“div.box”)

<div>…</div>をCLASS名 box が指定されたdivタグの後に追加

$(“div.box”).before(“<div>…</div>”)

CLASS名 box が指定されたdivタグの前に追加

$(“<div>…</div>”).insertBefore(“div.box”)

<div>…</div>をCLASS名 box が指定されたdivタグの前に追加

$(“div.box”).append(“<div>…</div>”)

CLASS名 box が指定されたdivタグの子要素の最後に<div>…</div>を追加

$(“<div>…</div>”).appendTo(“div.box”)

<div>…</div>をCLASS名 box が指定されたdivタグの子要素の最後に追加

$(“div.box”).prepend(“<div>…</div>”)

CLASS名 box が指定されたdivタグの子要素の最初に<div>…</div>を追加

$(“<div>…</div>”).prependTo(“div.box”)

<div>…</div>をCLASS名 box が指定されたdivタグの子要素の最初に追加

$(“div.box”).wrap(“<div>…</div>”)

CLASS名 box が指定されたdivタグを<div>…</div>をで包み込む
(複数ある場合は各それぞれを包み込む)

$(“div.box”).wrapAll(“<div>…</div>”)

CLASS名 box が指定されたdivタグすべてを<div>…</div>をで包み込む
(複数ある場合はすべてを一つに包み込む)

$(“div.box”).wrapInner(“<div>…</div>”)

CLASS名 box が指定されたdivタグの子要素を<div>…</div>をで包み込む

$(“div.box”).clone().appendTo(“div.boxA”)

「$(“div.box”).clone()」でCLASS名 box が指定されたdivタグを複製
「appendTo(“div.boxA”)」で複製したものを、CLASS名 boxA が指定されたdivタグの子要素の最後に追加

$(“div.box”).replaceWith(“<div>…</div>”)

CLASS名 box が指定されたdivタグを<div>…</div>に入れ替える

$(“div.box”).remove()

CLASS名 box が指定されたdivタグを削除（中身もすべて）

要素の指定（セレクタ）

削除ボタンを押したらその削除ボタンの含まれたボックスを消す

削除ボタンから見た、親要素を指定してあげればOK

親要素を指定

$(function() {
//btn_deleteクラスがクリックされたら（削除ボタンがクリックされたら）、その親の「food_list」クラス（親ボックス）を消す
   $('.btn_delete').click(function() {$(this).closest('.food_list').fadeOut('slow');});
});

画像を正方形などの指定サイズにリサイズして表示する

プラグイン「imgLiquid」を使う。縮小しながらのリサイズや縦横比保持なども出来る。
元の画像はそのままで、リサイズ後の画像を新たに作っている訳ではないので、DBも軽くて便利。

使い方

１．以下からimgLiquidをダウンロード
https://github.com/karacas/imgLiquid
２．jsフォルダの中にある「imgLiquid-min.js」をWEBサイトのフォルダへ移動
３．html内にscriptタグで読み込む

<script src="js/imgLiquid-min.js"></script>

４．下記jsをそのまま書く

$(document).ready(function() {
    $(".imgLiquidFill").imgLiquid();
});

５．htmlを書く
divで囲むこと。divにはclass「imgLiquidFill」をつける。
そのdivにwidthとheightを指定した値でリサイズされる。

<div class="imgLiquidFill imgLiquid" style="width:300px; height:200px;">
    <img alt="Woody" src="Woody.jpg" />
</div>

jQueryを使ったAjaxで、リアルタイムでユーザ登録時のemail重複チェックをする

流れ

json.phpなどの適当なファイルを作り、そこへユーザ登録画面からAjaxでデータを送信。
json.phpで、受け取ったデータを元にDB検索。マッチ、アンマッチ時のデータを返してあげる。
ユーザ登録画面で受け取ったデータを表示。

json.php


<?php

require('dbconnect.php');

//Ajax通信ではなく、直接URLを叩かれた場合はエラーメッセージを表示
if (
    !(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') 
    && (!empty($_SERVER['SCRIPT_FILENAME']) && 'json.php' === basename($_SERVER['SCRIPT_FILENAME']))
    ) 
{
    die ('このページは直接ロードできません。');
}
 
//パラメータ取得
$email = '';
if(!empty($_POST['email'])) $email = $_POST["email"];

//「「「「「「「「「「「「「「「「「「「「「「
//メアド重複チェックのDB検索
//「「「「「「「「「「「「「「「「「「「「「「
try{
		
		$dbh = new PDO($dsn, $user, $password,array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'));	
		$sql = 'SELECT COUNT(*) AS cnt FROM user WHERE email = :email';
	    $stmt2 = $dbh->prepare($sql);
	    $stmt2->bindParam(':email', $email, PDO::PARAM_STR);
		$stmt2-> execute();
		$cnt = $stmt2->fetch(PDO::FETCH_ASSOC);
	    
}catch (PDOException $e) {
		exit('dbconnect error'.$e->getMessage());
} 

$rst[] = array(
            'count'=> $cnt['cnt']
         );
 
//セキュリティヘッダー付与
header("Content-Type: application/json; charset=utf-8");
header('X-Content-Type-Options: nosniff');
 
//JSON 出力
echo json_encode($rst);

?>

ユーザ登録画面内

/* メールチェック */
		$("#form_email").keyup(function(){
			//フォーム内容取得
			var email = $('#form_email').val();
					
	        /* 入力された値があるならマッチ開始*/
	        if(email!=""){
	        	/* プレグマッチ */
	            if(email.match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/)){
	            	/* 正しければAjax送信 */
	                $.ajax({
				      type: "POST",
				      url: "json.php",
				      data: 'email='+email,
				      //成功時のコールバック
				      success: function (data, textStatus, xhr) {
				        if(data[0].count == 0){
				        	$('#email_rst').text('○');
							$('#email_rst').css('color','#62c5dd');
				        }else{
					        $('#email_rst').text('×');
							$('#email_rst').css('color','#feb258');
				        }
				      }
				    });
	            }else{
	                 $('#email_rst').text('×');
	                $('#email_rst').css('color','#feb258');
	            }
	        }else{
	                 $('#email_rst').text('×');
	                $('#email_rst').css('color','#feb258');
	        }
		});
		
		$("#form_email").focusout(function(){
			//フォーム内容取得
			var email = $('#form_email').val();
					
	        /* 入力された値があるならマッチ開始*/
	        if(email!=""){
	        	/* プレグマッチ */
	            if(email.match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/)){
	            	/* 正しければAjax送信 */
	                $.ajax({
				      type: "POST",
				      url: "json.php",
				      data: 'email='+email,
				      //成功時のコールバック
				      success: function (data, textStatus, xhr) {
				        if(data[0].count == 0){
				        	$('#email_rst').text('○');
							$('#email_rst').css('color','#62c5dd');
				        }else{
					        $('#email_rst').text('×');
							$('#email_rst').css('color','#feb258');
				        }
				      }
				    });
	            }else{
	                 $('#email_rst').text('×');
	                $('#email_rst').css('color','#feb258');
	            }
	        }else{
	                 $('#email_rst').text('×');
	                $('#email_rst').css('color','#feb258');
			}
		});

emailの正規表現は簡易的なもの。
キーアップ時だけだと、入力した後にフォーム内全選択削除した時に○が出たままになるので、
フォーカスが外れた際にもチェックする。