タグ別アーカイブ: jquery

郵便番号の入力で都道府県、住所を自動入力する jQueryと郵便番号ライブラリ(Library)

WEBサイトで郵便番号を入力すると住所が自動で表示するサンプルです

郵便番号と住所に特化しているので改造してつかってください

jQueryを読み込みます

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js” ></script>

郵便番号のライブラリを読み込みます

<script src=”https://ajaxzip3.github.io/ajaxzip3.js” charset=”UTF-8″></script>

郵便番号のテキスト配置

<input type=”text” name=”txt_zip” style=”font-size:24px;” value=”” onchange=”AjaxZip3.zip2addr(this,”,’ken’,’address1′);” />


実際の全体ソース

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>Zip Sample</title>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<!– Zip Library –>
<script src=”https://ajaxzip3.github.io/ajaxzip3.js” charset=”UTF-8″></script>

</head>
<body>

<div style=”padding:50px; text-align:center;”>

<input type=”text” name=”txt_zip” style=”font-size:24px;” value=”” onchange=”AjaxZip3.zip2addr(this,”,’ken’,’address1′);” />

<select name=”ken” id=”txt_ken” style=”font-size:24px;”>
<option></option>
<option value=”1″>北海道</option>
<option value=”2″>青森県</option>
<option value=”3″>岩手県</option>
<option value=”4″>宮城県</option>
<option value=”5″>秋田県</option>
<option value=”6″>山形県</option>
<option value=”7″>福島県</option>
<option value=”8″>茨城県</option>
<option value=”9″>栃木県</option>
<option value=”10″>群馬県</option>
<option value=”11″>埼玉県</option>
<option value=”12″>千葉県</option>
<option value=”13″>東京都</option>
<option value=”14″>神奈川県</option>
<option value=”15″>新潟県</option>
<option value=”16″>富山県</option>
<option value=”17″>石川県</option>
<option value=”18″>福井県</option>
<option value=”19″>山梨県</option>
<option value=”20″>長野県</option>
<option value=”21″>岐阜県</option>
<option value=”22″>静岡県</option>
<option value=”23″>愛知県</option>
<option value=”24″>三重県</option>
<option value=”25″>滋賀県</option>
<option value=”26″>京都府</option>
<option value=”27″>大阪府</option>
<option value=”28″>兵庫県</option>
<option value=”29″>奈良県</option>
<option value=”30″>和歌山県</option>
<option value=”31″>鳥取県</option>
<option value=”32″>島根県</option>
<option value=”33″>岡山県</option>
<option value=”34″>広島県</option>
<option value=”35″>山口県</option>
<option value=”36″>徳島県</option>
<option value=”37″>香川県</option>
<option value=”38″>愛媛県</option>
<option value=”39″>高知県</option>
<option value=”40″>福岡県</option>
<option value=”41″>佐賀県</option>
<option value=”42″>長崎県</option>
<option value=”43″>熊本県</option>
<option value=”44″>大分県</option>
<option value=”45″>宮崎県</option>
<option value=”46″>鹿児島県</option>
<option value=”47″>沖縄県</option>
</select>

<input type=”text” name=”address1″ value=”” style=”font-size:24px;” />
<input type=”text” name=”address2″ value=”” style=”font-size:24px;” />

</div>

</body>
</html>

jQueryで要素を削除する|remove(), empty(), unwrap(), detach()

remove() は要素を丸ごと削除する

$(“#parent”).remove();

empty() は要素の中を空にする

$(“#parent”).empty();

unwrap() は親要素を削除する

$(“#child”).unwrap();

detach() は 削除した要素を再利用する

//【1】#targetをクリックすると背景を赤に変更
$(‘#target’).on(“click”, function(){
$(this).css(‘background’ , ‘red’);
});

//【2】detachボタンをクリックするとdetach
$(‘#detach’).on(“click”, function() {
div = $(‘#target’).detach();
});

//【3】removeボタンをクリックするとremove
$(‘#remove’).on(“click”, function() {
div = $(‘#target’).remove();
});

//【4】再表示ボタンをクリックすると再表示
$(‘#append’).on(“click”, function() {
$(‘#detach’).before(div);
});

jQuery 子要素を検索する、取得する方法:children(), find()など

全ての子孫要素から取得する.find()

$(“#parent”).find(‘.child-image’);

直下の子要素を取得する.children()

$(“#parent”).children(‘img’);

セレクタを使って子要素を取得する

$(“#parent div”);

子要素のn番目の要素を指定

$(“#parent p:first”).css(“color”, “red”);

$(“#parent p:last”).css(“color”, “red”);

$(“#parent p:nth-child(2)”).css(“color”, “red”);

jQuery 属性値で目的の要素を検索する、絞り込む方法 -属性-

特定の属性を検索して要素を取得する

$(function() {  $(‘option[selected]’).css(‘background-color’, ‘Yellow’);});

属性値が、ある値に等しい要素だけを検索して取得する

$(‘option[value=””]’).css(‘background-color’,’Yellow’);

属性値が、ある値に等しくない要素だけを検索して取得する

$(‘option[value!=””]’).css(‘background-color’,‘Yellow’);