LABO IWASAKI

Jqueryのセレクター

Jquery - Ajax

JqueryAjaxする時によく使う。
セレクターやその他をまとめました。
JqueryでのAjaxは前回の記事をどうぞ。

前回記事「JqueryでAjax」
前回もそうだが今回も私見です。
使えるけどレガシーかも知れない…

要素の削除

DELETE

一概に「要素の削除」と言っても色々あると思う。
それ自体を消したり、その中身だけを消したい時だってある。

// Jquery
$('#要素のID').remove();

//Javascriptだと
var delNode = document.getElementById('要素のID');
delNode.parentNode.removeChild(delNode);

次に、指定した要素の中身だけを消したい時。
…と、言うか「その要素を空にする」方法です。
これ以外と使いやすい。

// これだけ
$('#要素のID').empty();

Javascriptで対象の要素内のN番目を指定して削除する。
例では要素内の2つめのh2を削除。

var delNode = document.getElementById('要素のID').getElementsByTagName("h2")[1];
delNode.parentNode.removeChild(delNode);

要素の追加

add

指定した要素の中身に、外部ファイルをロードする。

$('#反映先の要素ID').load('呼び出す外部ファイルパス');

指定した要素の中身にHTMLやテキストを表示する

//前に追加
$('ul').prepend('<li>追加されました</li>');
$('.対象の要素').prepend('<p class="test">テキスト</p>');


//後ろに追加
$('ul').append('<li>追加されました</li>');
$('.対象の要素').append('<p class="test">テキスト</p>');

Javascriptで対象の要素内のN番目を指定して書き換え。
例では要素内の2つめのh2を書き換え。

//Jqueryのセレクターで書き換え
$('#要素のID p:eq(0)').html("ここに変更後のHTML");
// p:ep(0) で pの1番目を指定

//Javascriptで
var delNode = document.getElementById('要素のID');
delNode.getElementsByTagName("h2")[1].innerHTML = "変更";

formの値

input

Ajaxでデータを送受信する際、formを使わずにinputやselectの値を渡したい時がある。
そんな時に使えるやつ。

//input の nameを指定して取得
var param = $('[name="inputのname"]').val();

//選択されているセレクトの値
var param = $("select[name=selectのname]").children(':selected').val();

//選択されているラジオボタンの値
var param = $('[name=ラジオのname]:checked').val();

formの操作

change

発火後にselectのオプションを追加する方法

var optxt = "追加したいオプション文字列";
var opname = "オプションの値";
$('#selectのID').append($('<option>').html(optxt).val(opname));

//phpの変数をそのまま突っ込む
$('#selectのID').append($('<option>').html("{$name}").val("{$lastid}"));

値を指定して、selectのオプションを選択状態にする

//phpの変数に入った値を選択状態に
var choice = " <?=$id?>";
$('#selectのID').val(choice);

//phpの変数をそのまま突っ込む
$('#selectのID').val("{$id}");

ラジオボタンにチェック

//ラジオボタンを選択状態にする
$('[name=要素のname][value=0]').prop('checked',true);

//ラジオボタンを非選択にする
$('[name=要素のname]').prop('checked',false);

inputの値を書き換える

//javascriptのdefaultValueを使うのが確実
document.getElementById("要素のID").defaultValue = 値;

表示と非表示

show hide

要素を表示したり、非表示にしたり。表示と非表示を切り替えたり。
jsで「hide」すると、CSSの「display:none;」状態になる。

//表示
$('.要素のクラス').show();

//非表示
$('.要素のクラス').hide();

//表示なら非表示に、その反対も
$(".要素のクラス").fadeToggle("fast", "linear");

発火条件

action

何かアクションがあったら発火したい時。 これで自動保存を作ったりした。

//要素の入力値が変更された瞬間に発火
$('#要素のID').change(function() {
 ここにスクリプト
});

//要素が選択されている時にキーボードがタイプされたら発火
$('#要素のID').keyup(function() {
 ここにスクリプト
});

読み込まれた瞬間に発火

<script>
(function() {
  ここに処理
}());
</script>

ラジオボタンが選択された時に発火。
選択時はvalueは「1」非選択時は「0」として。 以下は例。

//radioのnameを指定
$( 'input[name="ラジオのname"]:radio' ).change( function() {
      // valueを取得
     var rd = $( this ).val();

     if (rd ==1){
          //valueが1なら要素を追加
          $('.対象の要素').append('<label class="label">テスト:</label><input type="hidden" name="test" value="" />');
     } else {
          //valueが0なら要素を空に
          $('#対象の要素').empty();
}
});

Selectが何かしら選択されたら発火する例

 $(document).on('change','.セレクトのクラス',function(){
    var param = $("#フォームのID option:selected").val();

    ここに処理

});

input要素に何かされたら発火

 $("#要素のID").focus(function(){
    ここに処理
});
 $("#要素のID").blur(function(){
    ここに処理
});

データの送受信

DATA

前回の記事にも載せたJqueryでAjaxする方法の簡易まとめ。
詳しくははじめてのAjax|JqueryでAjaxのソースコード

function see(element) {
  var param = element.id;
  $.post( "処理ファイルパス", { id:param, }, function( data ) { $( ".反映先の要素" ).html( data ); } );
}
 <form action="処理ファイルのパス" method="POST" id=“form">


<script>
function makecode(){
    $('#フォームID').submit(function(event) {
        event.preventDefault();
        var cstr = ".反映先の要素"; var $form = $(this); var $button = $form.find('#submit');
        $.ajax({ url: $form.attr('action'),type: $form.attr('method'),data: $form.serialize() + '&delay=1',timeout: 10000,
        beforeSend: function(xhr, settings) { $button.attr('disabled', true); },
        complete: function(xhr, textStatus) { $button.attr('disabled', false); },
        success: function(data) { $form[0].reset(); $( cstr ).html( data ); },
        error: function(xhr, textStatus, error) { alert('電波状況をご確認ください'); }
        });
    });
}
</script>

おまけJquery

Jquery

指定したinput要素にフォーカスして、カーソルを末尾に移動

(function() {
    $('#input要素のID').focus();
    var net = $('#input要素のID').val();
    document.getElementById("input要素のID").defaultValue = net;
}());

指定した要素のCSSを書き換えたり、classを追加、削除する。
注意しないといけないのは、後から追加したClassは、class指定の操作には反応しないって事。

//CSSを直接書き換える
//プロパティが単発の場合
$('#要素のID').css('プロパティ','値');

//プロパティが複数の場合
$('#要素のID').css({'プロパティ':'値','プロパティ':'値'});


//classを追加する
$('#要素のID').addClass('css名');

//classを削除する
$('#要素のID').removeClass('css名');

おまけJavascript

JS

結構使う

//文字列を分割
var param = “2016-9-10”;
var params = param.sprit(“-“); //—「-」で分割する
aleart( params[0] ); //—2016が表示される

//「09」を「9」にする
Number(params[1]);

//数字をカンマで区切る
var goukei = 10000;
var soukei = goukei.toLocaleString();

//別ウインドウでURLを開く
window.open().location.href = "ここにURL";

応用 ー 自動計算

auto

上記をいろいろ応用して自動計算を作ります。
inputに「%」の値を入れると、指定したpに10000の左記%を挿入。

前提として「%」のinput IDは「pbox」、nameは「par」
値を反映させる「P」の親要素は「p」を3つ持っている。
今回はその親要素の2つ目の「p」に反映させる。

$('#pbox').change(function() {
  //元の数字
  var moto = 10000;

  //念のため数値にする
  moto = Number(moto);

  //入力された%の値を取得
  var param = $('[name="par"]').val();
  param = Number(param);

  //計算する
  var goukei = (moto * param) / 100;

  //数字をカンマで区切る
  var kei = goukei.toLocaleString();

  //親要素の2つ目のPに値を入れる
  $('#親要素ID p:eq(1)').html("¥ " + kei);
});

関連している記事

Relation

JqueryでAjaxする基礎 はじめてのAjax|JqueryでAjaxのソースコード
ローカルストレージを使う ローカルストレージ
PDOについて詳しく! PDOでMySQLに接続からINSERTやSELEC、UPDATEからDELETE、SUM、COUNTやテーブル作成など

LINEスタンプと着せ替えをプロに描いてもらいました。
見るだけ見ていってください!
そして誰かに紹介してください!
あわよくば買ってください。m(_ _)m

着せ替え → 結構人気の可愛いLINE着せ替え
スタンプ → 夢日記公式キャラ夢ひつじのLINEスタンプ