jQuery | SQLの窓

jQuery で最初に覚える click イベントと css メソッド

2019年3月30日2024年7月24日 by lightbox

アプリケーションを作成する上で最も重要なのは『イベント』の定義です。jQuery では、直接的なメソッド( 例:click メソッド )でイベントが定義できますが、ここでは全て on メソッドで定義します。

css メソッド以外にも重要な val、text、html、prop と言った基本的なメソッドがありますが、HTML の知識があれば比較的理解して用いるのは容易です。しかし、css メソッドの中身はとても複雑で効果も知ってなければなかなか想像できない結果が起きるので、たくさん実行して慣れる事が重要です。

さらに、jQiery では画面上のコンテンツをオブジェクトとして選択する為に、CSS で使用する『セレクタ』という記述を使用します。その中で、代表的なのは id と 要素と クラスになります。

以下は、jQuery では無く CSS で定義されたものです。

<style>
#sei,#mei {
        background-color: pink;
}
#simei {
        background-color: skyblue;
}
div input {
        border: 1px solid #888;
        border-radius: 5px;
}
.entry,.output {
        padding: 5px;
}
</style>
<div>
        <input class="entry" type="text" id="sei">
        <input class="entry" type="text" id="mei">
        <input class="output" type="text" id="simei">
</div>
<input type="button" id="btn" value="実行">

まず、# を使用して id 属性が書かれた要素を特定します。id はユニークである必要があるので、個別に処理をしたい場合に必要となります。#sei,#mei と記述しているのは、両方とも対象とするという事です。

次に要素名で書く場合は、その要素が全て対象になります。画面内の仕様として全て同じ見せ方をしい場合の標準のセッティングに使えますが、div input と書いているのは、DIV 要素の子要素にある INPUT 要素と言う意味で、検索の条件として使用しています。

さらに、設計者にとって特別な意味を持つグループを定義する為の クラスを使用します。クラスは class="クラス名" の定義に対して、名前の前に .(ドット) を使ってクラスである事を示します。

これらの選択方法を使って、jQuery は要素を選択してオブジェクトとして扱います。

では、実際に CSS から jQuery のメソッドに変更してみましょう

$("#btn").on("click", function(){
        $("#sei,#mei").css({ "background-color": "pink" });
        $("#simei").css({ "background-color": "skyblue" });
        $("div input").css({ "border": "1px solid #888", "border-radius": "5px" });
        $(".entry,.output").css({ "padding": "5px" });
        console.dir( this ); // this は DOM オブジェクト
        console.log( $(this).val() );
});

style 要素内を全てコメントにするか、または削除して jQuery のコードで全く同じ記述を行います。但し、見た目は同じ結果でもページ内の定義は全て要素内のインラインスタイルとして実装されます。デベロッパーツールで参照すると以下のようになります。

<input class="entry" type="text" id="sei" style="background-color: pink; border: 1px solid rgb(136, 136, 136); border-radius: 5px; padding: 5px;">
<input class="entry" type="text" id="mei" style="background-color: pink; border: 1px solid rgb(136, 136, 136); border-radius: 5px; padding: 5px;">
<input class="output" type="text" id="simei" style="background-color: skyblue; border: 1px solid rgb(136, 136, 136); border-radius: 5px; padding: 5px;">

CSS の効果には優先順位があり、インラインスタイルは STYLE 要素の記述より優先されます。また、STYLE 要素内では後から書いたほうが優先(上書き)されますが、それらを全て無視して特別にその CSS を適用したい場合は、!important を使用します。

但し、jQuery では !important を指定できないので、STYLE 要素を作成してテキストとして CSS を記述してヘッド要素に追加するか、cssText を使用して直接インライン記述を書きます。

jQuery の css メソッドは、既存のインライン記述に追加されますが、cssText は既存のインライン記述を上書きするので注意が必要です。

style 要素の追加

$("<style></style>")
    .text( ".output{background-color:white!important }")
    .appendTo(document.head);

cssText を使用

1.$("#simei").css({"cssText": "color:navy!important"});

jQuery で TABLE の行内の一つのTD をクリック。その後、他の TD 内のテキストを取得する / nextAll と prevAll

2019年2月18日2019年2月18日 by lightbox

nextAll は、起点となる要素から下方向に存在する同じ階層の要素を全て取得します。引数にセレクタが指定できるので、ここでは TD にクラスを設定して目的の要素を特定しています。

特定する要素の属性が無い場合は、$(this).nextAll().eq(0).text() のようにして eq(順序番号) を指定して特定できます。但し、prevAll では近い要素から順序番号が小さくなるので注意して下さい。

コード	名称	金額	購入日	担当者	発注先
0002	問題集 002	4000	2015/08/24	田中	発注先002
0003	問題集 003	3000	2015/08/23	山田	発注先003
0004	問題集 004	2000	2015/08/22	山田	発注先004
0001	問題集 001	1000	2015/08/21	田中	発注先001

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
 
        // 名称のリンクに設定したクラスでイベント作成
        // ※ 各 td のクラスで取得
        $(".check").on("click", function(){
                $("#cd").val($(this).prevAll(".t0").text());
                $("#name").val($(this).text());
                $("#kin").val($(this).nextAll(".t1").text());
                $("#bdate").val($(this).nextAll(".t2").text());
                $("#tanto").val($(this).nextAll(".t3").text());
                $("#co").val($(this).nextAll(".t4").text());
        });
 
        // 購入日のリンクに設定したクラスでイベント作成
        // ※ 各 td の順序で取得
        $(".t2").on("click", function(){
                $("#cd").val($(this).prevAll().eq(2).text());
                $("#name").val($(this).prevAll().eq(1).text());
                $("#kin").val($(this).prevAll().eq(0).text());
                $("#bdate").val($(this).text());
                $("#tanto").val($(this).nextAll().eq(0).text());
                $("#co").val($(this).nextAll().eq(1).text());
        });
 
});
 
</script>
<style type="text/css">
.check, .t2 {
        text-decoration: underline;
        cursor: pointer;
        color: blue;
}
#target_area th, #target_area td {
        padding: 5px;
}
#target_area input {
        width:120px;
        font-size: 18px;
}
#target_area table {
        margin-top: 10px;
        border-collapse: collapse;
        border: solid #000000 1px;
        background-color: #ffffff;
}
#target_area th {
        border: solid #000000 1px;
        background-color: silver;
}
#target_area td {
        border: solid #000000 1px;
}
</style>
<div id="target_area">
<p><input id="cd"> <input id="name"> <input id="kin"></p>
<p><input id="bdate"> <input id="tanto"> <input id="co"></p>
<table>
        <tbody>
        <tr>
                <th>コード</th>
                <th>名称</th>
                <th>金額</th>
                <th>購入日</th>
                <th>担当者</th>
                <th>発注先</th>
        </tr>
        <tr>
                <td class="t0">0002</td>
                <td class="check">問題集 002</td>
                <td class="t1">4000</td>
                <td class="t2">2015/08/24</td>
                <td class="t3">田中</td>
                <td class="t4">発注先002</td>
        </tr>
        <tr>
                <td class="t0">0003</td>
                <td class="check">問題集 003</td>
                <td class="t1">3000</td>
                <td class="t2">2015/08/23</td>
                <td class="t3">山田</td>
                <td class="t4">発注先003</td>
        </tr>
        <tr>
                <td class="t0">0004</td>
                <td class="check">問題集 004</td>
                <td class="t1">2000</td>
                <td class="t2">2015/08/22</td>
                <td class="t3">山田</td>
                <td class="t4">発注先004</td>
        </tr>
        <tr>
                <td class="t0">0001</td>
                <td class="check">問題集 001</td>
                <td class="t1">1000</td>
                <td class="t2">2015/08/21</td>
                <td class="t3">田中</td>
                <td class="t4">発注先001</td>
        </tr>
        </tbody>
</table>
</div>

jQuery : ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )

2019年2月11日2019年2月11日 by lightbox

このブログで実装しているものを jQuery に置き換えたものです。リンクは、スクロールしていない先頭では表示されませんが、少しスクロールすると表示されます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
 
        // ページ右下固定位置のリンク
        var scroll_top = $("<a id='scroll_top'>▲</a>")
        scroll_top.prop("href","javascript:void(0)");
        scroll_top.css({ 
                "position": "fixed",
                "text-decoration": "none",
                "font-size" : "40px",
                "color" : "rgba(255,255,255,0.85)",
                "text-shadow" : "1px 1px 2px #656a6f",
                "right" : "0.5%",
                "bottom" : "5rem",
                "display" : "none"
        });
 
        // クリックした時の処理
        scroll_top.on("click", function(){
                window.scroll(0,0);
        });
 
        // ページの最後に追加
        $("body").append( scroll_top );
 
        // スクロールが無い先頭部分では表示しない
        $(window).on("scroll",function(){
                var scroll = $("html").scrollTop();
                if ( scroll <= 200 && $("#scroll_top").css("display") != "none" ) {
                        $("#scroll_top").css("display","none");
                }
                if ( scroll > 200 && $("#scroll_top").css("display") == "none" ) {
                        $("#scroll_top").css("display","");
                }
        });     
 
});
</script>

IE11 で Excel のブックにアクセスする / JavaScript を使用して Excel のブックのセルにデータをセットして更新

2018年12月27日2019年3月22日 by lightbox

 まず、信頼するサイトに localhost( またはイントラネットのサーバ ) を登録します。



 レベルのカスタマイズで『スクリプトを実行しても安全だとマークされていないActiveX コントロール』を『有効』にします。



▼ 以下の .reg ファイルをエクスプローラからダブルクリックしてインポートする事もできます

Windows Registry Editor Version 5.00
 
[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\2]
"1201"=dword:00000000

▼ .reg ファイルをダウンロード


その上で以下のコードを localhost で実行が可能です。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-type" content="text/html; charset=shift_jis">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 
// *************************************
// IE 用オブジェクト作成関数
// *************************************
function newObject( className ) {
 
        var obj;
 
        try {
                obj = new ActiveXObject( className );
        }
        catch (e) {
                obj = null;
        }
 
        return obj;
 
}
 
// *************************************
// Excel 用オブジェクト 格納変数
// *************************************
var excelApp = null;
var myBook = null;
 
// *************************************
// Exce ブックを読み込んで更新して終了
// *************************************
function excelTest() {
 
        // Excel オブジェクト作成
        if ( excelApp == null ) {
                 excelApp = newObject("Excel.Application");
        }
 
        // Excel ブックの読み込み
        myBook = excelApp.Workbooks.Open("C:\\Users\\lightbox\\Documents\\Book1.xlsx");
 
        // アクティブなウィンドウを最大化
        excelApp.ActiveWindow.WindowState = 2;
        // 表示時様態にする
        excelApp.Visible = true;
 
        // jQuery でオブジェクトの一覧を取得して Excel のセルに情報をセットする
        var row = 0;
        $.each( window.navigator, function( key, value ){
 
                row++;
                // シートのセルに書き込み
                myBook.Sheets("Sheet1").Cells(row, 1) = key;
                myBook.Sheets("Sheet1").Cells(row, 2) = typeof value;
                myBook.Sheets("Sheet1").Cells(row, 3) = value;
 
        });
 
        // 保存
        myBook.Save();
 
        // Excel の終了
        if ( excelApp != null ) {
                excelApp.Quit();
                excelApp = null;
        }
 
}
 
</script>
</head>
<body>
<input id="export" type="button" value="Excel のテスト" onclick="excelTest();">
</body>
</html>

localStorage に保存して、次回の表示に使用する

2018年12月21日2019年3月22日 by lightbox

タブやアコーディオンや、限られた視野の範囲で効率良く表示するコンテンツは、最後に表示したものを記憶しておくのが良いと思います。

物事を始めたり終えたりするのに、適当な時機

１本人が悪いことでないと確信してなされる犯罪

２《1から転じて》悪いことだとわかっていながら行われた犯罪や行為

◆犯罪というほど重大な行為でない場合にも用いる。2 の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が 1 ではなく 2 の意で用いると回答した。

<script>
$(function() {
        var target_tab = 0;
        if ( typeof(localStorage["old_active"]) != 'undefined' ) {
                target_tab = localStorage["old_active"];
        }
        $( "#mytabs" ).tabs({
                active: target_tab,
                activate: function( event, ui ) {
                        localStorage["old_active"] = $( this ).tabs( "option", "active" );
                }
        });
});
</script>
 
<div id="mytabs">
 
        <ul>
                <li><a href="#tabs-1">潮時</a></li>
                <li><a href="#tabs-2">確信犯</a></li>
                <li><a href="#tabs-3">おもむろに</a></li>
        </ul>
        <div id="tabs-1">
物事を始めたり終えたりするのに、適当な時機
        </div>
        <div id="tabs-2">
<p>１ 本人が悪いことでないと確信してなされる犯罪</p>
<p>２ 《1から転じて》悪いことだとわかっていながら行われた犯罪や行為</p>
<p>◆犯罪というほど重大な行為でない場合にも用いる。2 の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が 1 ではなく 2 の意で用いると回答した。</p>
        </div>
        <div id="tabs-3">
【徐に】落ち着いて、ゆっくりと行動するさま
        </div>
</div>

jQuery 部分は全て Google のホスティングを使用しています。