HOME LIB.ARTS HTML/CSS JQUERY ASP.NET ACCESS PYTHON ABOUT

JavaScript/jQuery {Article013}

説明文の表示 ライブデモを見る▶
ようこそ「JavaScript/jQuery」へ...

JavaScriptとjQuery間でDOMの要素を共有するには？

jQueryのオブジェクトは配列のようなラッパー(wrapper)に格納されているので、 JavaScriptでそのまま使用することはできません。 jQueryのラッパーからJavaScriptで使用するDOMの要素を取得するには「$('#jqId')[0]」のように記述するか「$('#jqId).get(0)」のように記述します。 ちなみに、前者の方が高速ですから「$('#jqId')[0]」を使用してください。 JavaScriptを使うかjQueryを使うか悩みますが、個人的には①コーディング量、②パフォーマンスを判断基準にして決めています。 


var dom = $('#jqId')[0];     // var dom = document.getElementById('jqId')に相当
dom.textContent = 'Hello JavaScript!';           // jQueryで取得したオブジェクトをJavaScriptで共有

JavaScriptで取得したDOMの要素はjQueryのオブジェクトとしてそのまま利用できます。 


var dom = document.getElementById('jqId');       // var dom = $('#jqId')に相当
$(dom).text('Hello jQuery!');                    // JavaScriptで取得したDOMの要素をjQueryで共有

JavaScriptとjQueryの比較 [1]

表1: JavaScript vs jQuery
1. IdでHTML要素を検索 var element = $('#myId');
var element = document.getElementById('myId');
2. タグ名称でHTML要素を検索 var elements = $('div');
var elements = document.getElementsByTagName('div');
3. CSSのクラス名で検索 var elements = $('.myClass');
var elements = document.getElementsByClassName('myClass');
4. CSSのセレクターで検索 var elements = $('div.myClass');
var elements = document.querySelectorAll('div.myClass');
5. テキストコンテンツを設定 $('#myId').text('Hello jQuery!');
document.getElementById('myId').textContent = 'Hello JavaScript!';
6. テキストコンテンツを取得 var text = $('#myId').text();
var text = document.getElementById('myId').textContent;
7. HTMLコンテンツを設定 $('#myId').html('<span>Hello jQuery!</span>');
document.getElementById('myId').innerHTML = '<span>Hello JavaScript!</span>';
8. HTMLコンテンツを取得 var html = $('#myId').html();
var html = document.getElementById('myId').innerHTML;

JavaScriptとjQueryの比較 [2]

表2: JavaScript vs jQuery
1. 要素の非表示 $('#demo').hide();
document.getElementById('demo').style.display = 'none';
2. 要素の表示 $('#demo').show();
document.getElementById('demo').style.display = '';
3. 要素の削除 $('#demo").remove();
document.getElementById('demo').remove();
4. CSSの追加 $('#demo').css('font-size','35px');
document.getElementById('demo').style.fontSize = '35px';
5. 複数のCSS追加 $('#demo').css({'font-size': '35px', 'color': 'red'});
or
$('#demo').attr('style', 'font-size:35px; color:red;');
document.getElementById('demo').style.fontSize = '35px';
document.getElementById('demo').style.color = 'red';

操作手順と解説

  1. Run 1-6の右側に表示されているリンクをクリックすると、リンクに記述されているjQuery/JavaScriptのコードが実行されます。

  2. 実行結果は「Trace Data:」に表示されます。 たとえば、jQueryの「$('#myId')」のリンクをクリックするとjQueryのコード「$('#myId')」が実行されて見つかった要素のID属性が「Trace Data:」に表示されます。 jQueryの実行結果は「赤」、JavaScriptの実行結果は「青」で表示されます。

  3. リンクをクリックすると次のようがコードが実行されて結果が「Trace Data:」に表示されます。 JavaScriptのTraceWriteOption(), TraceWrite()については「Article014で解説しています。 
    
var opt = new TraceWriteOption();
opt.trace = true;
opt.foreColor = 'red';
opt.bgColor = 'white';

// Run 1のjQueryのリンククリックに実行
$('.run1JQ').click(function () {
    var e = $('#myId')[0];
    opt.foreColor = 'red';
    TraceWrite('Run 1(JQ): id={0}'.format(e.id), opt);
});

// Run 1のJavaScriptのリンククリックに実行
$('.run1JS').click(function () {
    var e = document.getElementById('myId');
    opt.foreColor = 'blue';
    TraceWrite('Run 1(JS): id={0}'.format(e.id), opt);
});
Go Top