• ベストアンサー

jQueryはインタラクションの対象としてcss

jQueryはインタラクションの対象としてcssが利用できるからです。例えば最初に紹介した以下のjQueryのサンプルですが、対象を指定する「#test」はcssと共通で、id属性がtestの要素という意味になります。 $("#test").text("hello world!"); jQueryはインタラクションの対象としてcssが利用できる、とは、どういう意味でしょうか? インタラクション? よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

interaction(インターアクション、インタラクション) (1) 相互作用。 (2) 対話式にコンピューターを操作すること。インターラクション。 ボタンを押すと何か動作をする、などのことです。 jQueryを使うと、 $("#test").click( function(){} ) などとして、その場所を押した時の動作を定義できます。 が、「cssが利用できる」というのは理解できません。 クリックしたらcssを変える、ということはできますが、それは「利用」とは言いがたいです。 たぶん、その説明をされている方が、インタラクションを別の意味の言葉と誤解されているように思えます。 その説明をされている方に聞いてみてください。

hp_win7
質問者

お礼

ご回答ありがとうございます。 勉強になりました。

関連するQ&A

  • jQuery UIのDroppableにて

    jQuery UIのDroppable要素にDraggable要素をドロップした際に、どのDraggable要素をドロップしたのか判定したいのですが、どうすれば判定できるのでしょうか? 例えば http://stacktrace.jp/jquery/ui/interaction/droppable.html 上記のサイトのページ下の方にあるサンプルで、blueのDraggable要素をpinkにドロップした際に、「blueの要素がドロップされたよ」みたいのをalertで出すようなことをしたいです。

  • JQueryのセレクタ

    jqueryでセレクタの取得をしたいのですがうまくいきません div要素の中のspan要素を取得したいのですがclassで取得すると重いのでid属性で場所を限定してからclass属性で絞り込みたいです こんな感じにしたらだめでした $("#hoge.foo").html('ほげ'); html <div id=hoge> <span class=foo></span> </div>

  • jQueryで同じid属性が複数あった場合の制御

    jQueryの勉強中ですが、ちょっと躓いています。 ブロック要素の中に、同じid属性をもつ要素があった場合 二つ目の要素のみを削除するにはどうしたらようでしょうか? 下記のようなイメージです。 <div id="test"> <p id="aaa"></p> <p id="bbb"></p> <p id="ccc"></p> <p id="aaa"></p> ←2個目の要素は削除(または非表示)にしたい。 </div> かなり困ってます・・・わかる方 教えていただけると助かります。

  • jQueryで追加した要素がマウスホバーに反応しない

    jQueryを使って、ボタンを押すと要素を追加しています。 後から追加された要素はマウスホバーなどが有効にならないのですが、 対象方法などあるでしょうか。 下記のようなソースで質問の状態になります。 よろしくお願いします。 <html> <head> <title>test</title> <script type="text/javascript" src="system/jquery-1.3.2.min.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($){ jQuery(".edit").hover( function () { jQuery(this).css("background","yellow"); }, function () { jQuery(this).css("background","none"); } ); jQuery(".insert").click(function () { var html = "<div class='edit'><p>add-text</p></div>"; jQuery("#sortable .edit:first").before(html); }); }); // --> </script> </head> <body> <div><INPUT class="insert" type="button" value=INSERT></DIV> <div id="sortable" style="width:200px;"> <div class="edit"> <p>text1</p> </div> <div class="edit"> <p>text2</p> </div> <div class="edit"> <p>text3</p> </div> </div><!-- id="sortable" --> </body> </html>

  • jQueryでCSSの値を動的に指定する方法

    自分なりに調べてみたのですが、理解不能なのでご教授お願いします。 $("#hoge").css("color","red"); ↑このように指定するとID"hoge"の文字色が赤になる、というCSSのアレンジで、 "red"の部分を動的に指定したいのですが、どのような指定をすれば実現するのでしょうか。 $(document).ready(function() { var test = "red"; $("#hoge").css("color",$test); }); ↑こういう書き方じゃ動きませんでした…。 こちらの質問が似ていたのでマネしてみたのですが、 私が希望する「CSSの値を動的に」はできませんでした。 jqueryのcssを動的指定する方法 http://okwave.jp/qa4268190.html .css()を使わなくても、結果的に同じ動作になる方法ってないものでしょうか? アドバイスを頂けたら助かります。 宜しくお願いいたします。

  • jQueryで要素の生のcssを取得する方法

    jQueryの初心者です、宜しくお願い申し上げます。 jQueryのcss(name)で、要素のstyle属性から指定スタイル(name)の値を取得できることは分かったのですが、{ width:50%; }など、比率で指定している属性はpxに変換されて取得されてしまいます。 変換前の%の値を取得する方法はあるのでしょうか? リファレンスを見た所、そのような記述が見当たらなかったため質問させて頂きました。 一応、 var block_style_str = $('.block').attr('style'); var block_style_array = block_style.trim().split(';'); こんな風にすれば、文字列ベースで自由に取得できますが、jQueryらしいスマートな方法があれば教えて頂きたいです。 詳しい方、ご教授の程、何卒、宜しくお願い申し上げます。

  • jquery ui.resizable 使い方

    jquery ui.resizable でdivをリサイズするとき同時に内部にあるdivをリサイズしたいのですができません。 <div id="out"> <div id="inner"> </div> </div> で、 http://stacktrace.jp/jquery/ui/interaction/resizable.htmlを参考にして、 $('#out').resizable({proportionallyResize:["#inner"]}); としてみたのですが、#outは、リサイズできますが、#innerを同時にリサイズできません。 組み込んだjs、cssは、 http://jqueryui.com/download よりDLした、jquery-jquery-ui-1.8.7-0-g12bea93.zipに納められていた jquery.dimensions.js jquery.ui.core.js jquery.ui.widget.js jquery.ui.mouse.js jquery.ui.resizable.js jquery.ui.draggable.js 及び jquery.ui.resizable.css を、記載の順に組み込みました。 行いたいことは、divをリサイズしたとき、その内部のdivも同時にリサイズすることです。 proportionallyResizeを使う方法でなくても構いません。 方法のわかる方なにとぞよろしくお願いいたします。

  • jQueryで特定のcssプロパティの値を書き換えたい

    jQueryで特定のcssプロパティの値を書き換えたい html上にインラインで記述しているスタイルのうち、特定のプロパティの値のみをjQueryで書き換えることはできますでしょうか。 具体的には↓ <span style="font-size: 16px;font-weight: bold;">テキスト1</span> <span style="color: #f00; font-size: 16px;">テキスト2</span>を <span style="font-size: 18px;font-weight: bold;">テキスト1</span> <span style=""color: #f00; font-size: 18px;">テキスト2</span>に style属性のfont-size: 16px;をfont-size: 18px;にしたい。 他は変えずそのままにしたい。 $(function() { $('span').filter(function() { return ($(this).css("font-size","16px")); }).css("font-size","18px") }); http://okwave.jp/qa/q5310183.html 似たような質問が上記でされていて、真似て書いてみたのですが、これだとfont-sizeが16pxでないものも全て18pxに書き換わってしまいました。 不勉強でお恥ずかしい限りですが、詳しい方いらっしゃいましたらどうかご教授ください。 よろしくお願いいたします。

  • jqueryで特定のIDに対して

    jqueryで特定IDのdiv要素にのみ実行する場合は どのように記述したらよいでしょう? $(function() { /* div#testの内容のみに実行*/ }); ご伝授いただけると助かります。 よろしくお願いいたします。

  • jQuery 動的にボタンが増えた時

    <html> <head> <title>js sample</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> jQuery(document).ready( function() { $(".button_cls_1").click(function(){ alert('hello world! button 1'); }); $(".button_cls_2").click(function(){ alert('hello world! button 2'); }); }); </script> </head> <body> <input class="button_cls_1" type="button" value="テスト1" /> <input class="button_cls_2" type="button" value="テスト2" /> </body> </html> 上記のようなスクリプトでbutton_cls_1、button_cls_2が動的に増えた時に どのように書いたらいいかわかりません。 button_cls_1、button_cls_2、button_cls_3、button_cls_4の時もあれば button_cls_1、button_cls_2の時もあります。