#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検索。マッチ、アンマッチ時のデータを返してあげる。
ユーザ登録画面で受け取ったデータを表示。
<?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の正規表現は簡易的なもの。
キーアップ時だけだと、入力した後にフォーム内全選択削除した時に○が出たままになるので、
フォーカスが外れた際にもチェックする。