DOM生成 nja

_$ ->jQueryもどき

_$(ほげ).：組み込み関数

_$：のプラグイン雛形

$_::要素生成関数

その他

QRコード

_$(セレクター)

-> 原則として複数要素をターゲットにした関数とする
-> 単数ターゲットは、_$fn.ホゲ関数(argument)(nodeまたはセレクター)形式に置き換える（foreachを使わない分高速化するから）
-> getIDとか.. <- 必要なくない(idで探す必要がなくなってきた) setIDにおきかえる？必要ある？
->


--------- jqueryとの違い --------------
$(selector,context)のような第２引数がない
その代わり複数のNodeを、複数引数で使えるようにした

--------- メソッドを限定 --------------
nodeの挿入や削除、属性変更に特化

_$()

その１：：テキスト指定のセレクター

てすと

 //その１：：テキスト指定のセレクターOK!
 _$(要素)
 _$('#hoge')
 _$('.hoge')

 //USE
 _$('#testmja').addClass('d-inline-block blue text-white m-3 p-3');

その２：：テキスト指定の複数セレクター：テキストのカンマ区切り：idとクラスを混在OK！

てすと

//その２：：複数セレクター：テキストのカンマ区切り
_$('#njats2,#njats3,#njats4,#njats5,#njats6')
//idとクラスを混在で指定
_$('#chk1,#chk2,#chk3,.chkcls').addClass('d-inline-block m-2 p-2 red text-white');

その３：：vanilla jsのセレクタOK

vanilla jsのセレクタOK（クリック）

てすと

 //vanilla jsの単数セレクタOK
let $vnla = document.getElementById('testvnla');
_$($vnla)

//vanilla jsの複数セレクタもOK
let $qall = document.querySelectorAll('.qallitm');
_$($qall)

//jqueryでもOK

//セレクターの複数指定（区切り指定）
//セレクターが全て単数ならOK！複数が混ざってるならエラー
let $vnla2 = document.getElementById('testvnla2');
_$($vnla,$vnla2).append('✨');

_$($vnla,$qall).append('✨'); //エラー！！

その３：：ノードOK!

てすと

 //ノードOK！
// _$($_({tag:'p'},'hoge'))

//ノードのカンマ区切りOK!
var lay0 = $_({class:"fuga"},'○');
var lay1 = $_({class:"fuga"},'●');

_$(lay0,lay1).addClass('m-3 d-inline-block');

//jqueryでは、複数ノードはNG：最初のひとつだけに適用

その４：：混在は完全にはサポートしてない

てすと


//引数の混在 -> 部分的にOK

_$(lay0,"#ura").addClass('m-3 d-inline-block');

//ノードセレクタの場合挿入後に別の要素に挿入すると移動する。
_$('#testmja').append(lay0);
_$($vnla).append(lay0);
_$('#testmja').append(lay1);

:拡張セレクタ

_$().nextAll //指定要素内の後ろの(selectorに該当する）兄弟要素全て

その１その２その３その４その５


  _$('#njatss01').nextAll().addClass('bg-line d-inline-block m-2');

_$().beforeAll //指定要素内の後ろの(selectorに該当する）兄弟要素全て

その１その２その３その４その５


  _$('#njatss02').beforeAll().addClass('bg-line d-inline-block m-2');

参考

改良のための参考：jqueryっぽいヘルパ関数

改良のための参考：jqueryっぽいおれおれ関数

改良のための参考：jQueryプラグインにメソッド

補足：in演算子の使い方

//in演算子
// Arrays
let trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
0 in trees        // true を返す
3 in trees        // true を返す
6 in trees        // false を返す
'bay' in trees    // false を返す (インデックスの指す値ではなく、インデックスの数字を指定しなければならない)
'length' in trees // true を返す (length は Array のプロパティ)

_$(ほげ).：組み込み関数

on関数: on('イベントタイプ',fun,{once:true})

ここをクリック

//指定要素を削除し、nullを入れてキャッシュクリア
  _$('#njats0').on('click',function(){
    _$('#njats0').addClass('red text-white p-3 d-inline-block');
  },{once:true});

//,{once:true}で一度だけ発火

削除関数＝メモリもクリア！

クリックすると削除される

//指定要素を削除し、nullを入れてキャッシュクリア
_$(ほげ).dell();

_$('#njats6').on('click',function(){
  _$('#njats6').dell();
});

挿入関数

append/rc

//指定要素内の後ろに追加
_$(ほげ).append('追加するNODE');

_$('#njats1').append($_({tag:'span', class:'d-inline-block'},'●'));
_$('#njats1').append('○');
_$('#njats1').append('あ');

//できないと思ってたけど、jqueryでもノードの追加できた・・

prepend

//指定要素内の最初に追加
_$(ほげ).prepend('追加するNODE');

after

//指定要素の後ろに追加
_$(ほげ).after('追加するNODE');

before/css/rc

//指定要素の前に追加
_$(ほげ).before('追加するNODE');

wrap（node）/attr

//指定要素をNODEでラップする
_$(ほげ).wrap('ラップするNODE');

wrap(string)

//指定要素をラップする(html直記述)
_$(ほげ).wrap('<div class=""></div>');

wrap(template)::<%=raw self%> 必須！

//指定要素をラップする(テンプレート使用)
let $tpl = '<div id="<%=id%>" class="<%=clss%>"><%=raw self%></div>';
let $data = {
 id: "reingo",
 clss: "d-inline-block red text-white p-2 rounded",
}
_$(ほげ).wrap($tpl, $data);

_$().unwrap();

//指定要素の親を削除

クラス・属性操作

ホゲホゲ

//指定要素にclassを追加
_$(ほげ).addClass('hoge fuga');
_$('#njaclts1').addClass('d-inline-block');

ホゲホゲ

//指定要素のclassを削除
_$(ほげ).removeClass('hoge fuga');
_$('#njaclts2').removeClass('p-2');

ホゲホゲ

//指定要素にstyleを追加
_$(ほげ).css({widht:100px, height:50px});
//指定要素のstyle削除
_$(ほげ).css();

//配列で複数指定する場合
_$('#njaclts3').css({width:'300px', height:'80px'});

ホゲホゲ

//指定要素に属性を追加
_$(ほげ).attr("data-type","hoge");
_$('#njaclts4').attr("data-type","hoge");

クラスを配列(連想配列(val))で探す、一致したものを削除する、何かする

//配列(連想配列（val）)に一致するクラスを返す
//配列に一致するクラスを取得,存在する場合は,$act実行！
//$act(ほげ) (_$(ほげ)が複数の場合、それぞれが引数に入って実行！)
_$(ほげ).aryClass($arr,$act);

//一致するclassを削除！
_$(ほげ).aryClass($arr,'remove');

var arytesary1 = ['h3-responsive','my-5'];
var arytesary2 = ['h4-responsive','my-6'];
var arytesobj3 = { head:'h4-responsive',margin:'my-3' };

//一致するものがある場合、配列で返す。なければNULL
console.log(_$('#aryclass').aryClass(arytesary1));
console.log(_$('#aryclass').aryClass(arytesary2));
console.log(_$('#aryclass').aryClass(arytesobj3));

//必要ない？
属性値を連想配列で一致しているものがあるか調べる？

//data属性系の操作をなんかする？ヘルパー関数を作る

属性値を配列で探す

//配列に一致する属性値を返す
//属性値が、配列に一致する場合は,$act実行！
_$(ほげ).aryAttr($atr,$arr,$act)

//以下、_$(ほげ)が単数の場合を想定、複数の場合の挙動をどうする？

_$(ほげ).getID();idを取得（ない場合は設定して返す）

//IDを返す
_$(ほげ).getID();

_$(ほげ).iscss('position'); styleプロパティを取得

//kunaiでposition: fixed要素を判別するために使用
  if(_$(el).iscss('position') == 'fixed') {
    $g = _$(el).getGrid(op.padding,'fixed');
    $matoclass = 'mato fix ' + op.color;
  } else {
  ・・・・

_$：のプラグイン雛形


  _$.fn.ほげほげ = function(options) {
//タイプでオプションを分岐する場合
    let $type = (!options||!options.type)?_$.fn.ほげほげ.config.type:options.type;
//オプションをマージする
    let $this = this, $op = $x$(_$.fn.ほげほげ.config,_$.fn.ほげほげ[$type],options);

    function $set(op) {
      return function(el) {

          return ;
      };
    }

    $this.forEach(function(el) {
  		$set($op)(el);
  	});
  	return $this;
  };

  _$.fn.ほげほげ.config = {
   type: "atype",

  }
  _$.fn.ほげほげ.atype = {

  }

$_::要素生成関数ー内部コンテンツの複数追加や入子が可能

$_({id:'nyro', class:'hoge fuga','data-type':'dummy'},','Node入子','NODE並列')

innerにテンプレートが使える。関数(生成要素)指定できる。

JSONから要素生成する場合、別の関数が必要。JSON -> 配列 -> 引数変換して、$_()を活用できる？

テストここに要素を生成して挿入する。

 //要素挿入のテスト
_$('#testlay1').append($_({class:'red text-white p-2',},'生成した要素'));

テストここに複数階層の要素を生成して挿入する。

 //USE　並列入れ子
  let $layheader = new $_({class:'w-100 p-2 green'},'ヘッダー');
  let $laybody = new $_({class:'w-100 p-5 blue'},'ボディ');
  let $layfooter = new $_({class:'w-100 p-2 pink'},'フッター');
  let $lay = new $_({id:'laylay'},$layheader,$laybody,$layfooter);

  _$('#testlay2').append($lay);

$$_配列から要素を生成:: $_({id:'hoge'},$$_(個別配列,共通パーツ配列))

個別配列 > 共通パーツ配列で個別配列が優先される。
共通パーツ配列で{class:'item'}であっても、個別配列内で[{class:'item active'}]なら個別配列で上書きされる

テスト


let $n3op = {tag:'span', class:"d-inline-block p-2"};
//個別オプション（配列 -> 連想配列）
let $n3ary = [
  [{"data-val":'1'},'その1','その１ダッシュ'],
  [{"data-val":'1'},'その2'],
  [{"data-val":'1'},'その3']
];
$n3nodes = $_({class:'d-inline-block'},$$_($n3ary,$n3op));
_$('#node3').append($n3nodes);

$$_:テンプレートを使った例

テスト

//CODE

let $n2op = {tag:'button',type:"button", class:"wys-btn",
tpl:'<i class="x50 <%=icon %>"></i><div class="x50 name"><%=name %></div>'};

//個別オプション（配列 -> 連想配列）
let $n2ary = [
  {data:{name:"太字＋",icon:"nja-bold"}},
  {data:{name:"サイズ",icon:"nja-font-size"}},
  {data:{name:"カラー",icon:"nja-text-color"}},
  {data:{name:"デコ",icon:"nja-logo-design"}},
  {data:{name:"リンク",icon:"nja-link"}},
  {data:{name:"消す",icon:"nja-kesu"}}
];

$n2nodes = $_({id:'hoge', class:'d-flex'},$$_($n2ary,$n2op));
_$('#node2').append($n2nodes);

配列から要素を生成して挿入

_$(挿入先).$$_(要素配列,共通配列)//後ろに追加

テスト

//要素生成関数：
_$('#node4').$$_($n3ary,$n3op);

_$.fn.$$_ = function($ary,$cmn) {
  if(!$ary || $ary.length == 0) return this;
  if(!$cmn) $cmn = {};
  let list = [];
  this.forEach(function(el, index) {
    for (var i = 0; i < $ary.length; i++){
      let $node;
      if(isHash($ary[i])) $node = $_($x$($ary[i],$cmn));
      if(Array.isArray($ary[i])) {
         $node = $_($x$($ary[i][0],$cmn),...$ary[i].slice(1));
      }
      if($node) list.push($node);
      if($node) el.appendChild($node);
    }
	});
  return _$(...list);
};

_$(挿入先)._$$(要素配列,共通配列)//前方に追加

テスト

//要素生成関数：
_$('#node5')._$$($n3ary,$n3op);

_$.fn._$$ = function($ary,$cmn) {
  if(!$ary || $ary.length == 0) return this;
  if(!$cmn) $cmn = {};
  let list = [];
//  let $len = $ary.length;
  this.forEach(function(el, index) {
//配列は逆順でループ
    for (var i = $ary.length - 1; i >= 0 ; i--){
      let $node;
      if(isHash($ary[i])) $node = $_($x$($ary[i],$cmn));
      if(Array.isArray($ary[i])) {
         $node = $_($x$($ary[i][0],$cmn),...$ary[i].slice(1));
      }
      if($node) list.push($node);
      if($node) el.prepend($node);
    }
	});
  return _$(...list);
};

参考：ブラウザの仕組み

参考：仮想DOMは速いのか？！

DOM API <- Node <- Element

参考：DOM生成汎用

//要素生成関数：
var $_ = window.$_ = function(op,inner) {
  if(!op) return;
  let $div = document.createElement.call(document,(op['tag'] == null)?'div':op['tag']);
  let $data, set = 0;
  Object.keys(op).forEach(function(i) {
    if(i == "tpl") {
      if(op['tpl'] && op['data']) $data = $_tpl(op['tpl'],op['data']);
      if($data != null) $div.insertAdjacentHTML('beforeend', $data);
    } else if(i == "fun") {
      if(typeof op['fun'] === 'function') op['fun']($div);
    } else if(i != "tag" && i != "data") {
      $div.setAttribute(i, op[i]);
    }
  });
  if(arguments.length == 1) return $div;
  let $inr;
  for (var i=1; i < arguments.length; i++) {
    $inr = arguments[i];
    if($inr != null && typeof $inr == "string") $div.insertAdjacentHTML('beforeend', $inr);
    if(isNode($inr)) $div.appendChild($inr);
    if(Array.isArray($inr)) {
      $inr.forEach(function(val) {
        if(isNode(val)) $div.appendChild(val);
        if(typeof val == "string") div.insertAdjacentHTML('beforeend',val);
      });
    }
  }
  return $div;
};//END:$_

var $$_ = window.$$_ = function($ary,$cmn) {
  if(!$ary || $ary.length == 0) return this;
  if(!$cmn) $cmn = {};
  let list = [];
  for (var i = 0; i < $ary.length; i++){
    let $node;
    if(isHash($ary[i])) $node = $_($x$($ary[i],$cmn));
    if(Array.isArray($ary[i])) {
       $node = $_($x$($ary[i][0],$cmn),...$ary[i].slice(1));
    }
    if($node) list.push($node);
  }
  return list;
};//END:$$_

Tom

Jack

jqueryの属性操作キャッシュ仕様

//jQueryのdataは、キャッシュするだけで、htmlを書き換えない
jQuery("#user1").data("user","Tom");

document.getElementById('user1').getAttribute('data-user') -> undefined
//キャッシュを取り出すことは可能
jQuery("#user1").data("user") -> Tom

jQuery("#user1").attr("data-date-of-birth","2001-01-01");
console.log(document.getElementById('user1'));

要素の属性操作など

確認要素

テスト用DOM（data属性）

//関数である場合は実行（target省略化）

//タイムスタンプ＋乱数文字列生成
nJa_.func.tmspID($pre)

//要素にタイムスタンプDATA属性（data-tms）をつけて、値を返す
nJa_.func.setTMS(要素)

//要素にイベント用名前空間をつけ（または取得し）、配列を返す。
nJa_.func.setEVns(要素,イベント名)

//nJa_.func.setEVnsが返す、配列。
op.tms
op[イベント名]

//domのIDを返す、IDがない場合はタイムスタンプでID生成：$preは省略可
nJa_.func.getID($trg,$pre)

//data属性を設定し、dataを返す。
nJa_.func.setDATA($tg,$type,$data)

//data属性の値を返す、なければ値を設定（$data指定する場合、なければ''を返す。）
nJa_.func.getTYPE($tg,$type,$data)

//要素を並べ替える
nJa_.func.sortEl($t,$atr,$order);

//クリックで表示
nJa_.func.clcshw($clc,$shw)

//windowsの表示幅を取得
nJa_.func.clcWD($maxwd)

// func for scroll
nJa_.func.scrllFix($trgt,$nav)


// QRcodeの生成　jqQRcode使用
nJa_.func.jqQRcode($trg,$url,$size)

//htmlをエスケープ
nJa_.func.escapeHTML(string)

//loadash.js
//
nJa_.func.tmpl($trg,$html,$data,$mode)
//
nJa_.func.tmplout($tmpl,$data)

QRコード生成（jquery.qrcode.min.js）

vanillaJS バーコードライブラリ


nJa_.func.jqQRcode = function($trg,$url,$size);
nJa_.func.jqQRcode($('#jrqr'),nJa_.vars.thisurl,'150');