jQueryまとめ

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