<hoge />と<hoge></hoge>の違い
- <hoge />とは、セルフクロージングタグと呼ばれるもので、要素の開始と終了を同じタグ内で行う方法です。一方、<hoge></hoge>は、開始タグと終了タグを別々に書く通常のHTMLタグの書き方です。
- <hoge />を使用すると、終了タグを省略することができます。一方、<hoge></hoge>では、開始タグと終了タグを明示的に書く必要があります。
- <hoge />はXHTML文法で使用されることが多く、HTML5ではあまり使用されません。一方、<hoge></hoge>はHTMLの標準的なタグの書き方です。
- ベストアンサー
<hoge />と<hoge></hoge>の違い
現在jQueryを使ったプログラムをしていて、気になった点があったので質問させていただきました。 具体的には <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"/> <script type="text/javascript"> function show() { } </script> こんなソースを書いていましたが、showメソッドが認識されていませんでした。 そこで <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"></script> とかくと、後ろのメソッドも認識されました。 ここで疑問なのは</>と</script>の違いです。 この２つは何がちがうのでしょうか？
- lain_003
- お礼率60% (129/215)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
https://www.google.com/search?q=HTML+%E7%A9%BA%E8%A6%81%E7%B4%A0 違いっていうか。 <hoge />って書いていいのは「何もはさまないタグ」だけ。<img><link><br>… <script>は、確かにsrc属性を設定すれば何もはさまなくはなりますが、「はさまないタグ」ではないから「/>」で終わることはできない。<img /> を<img></img>にすることはできるが逆はできません。 試してないから分からないが、質問文の記述では最初の間違ったタグが開始タグとして認識され以降3行がスクリプトとして認識され、結果文法エラーとなっているのでは。というか、その書き方でほかの部分のソースの解釈に影響出てないんですか？
その他の回答 (1)
- PXU10652
- ベストアンサー率38% (777/1993)
「<hoge />と<hoge></hoge>の違い」 １行だけで記述できる物は前者でも記述が可能。基本は後者であり、タグで挟む必要があります。
お礼
お返事ありがとうございます。 基本的にははさむもののほうが多かったんですね。勉強になりました。
関連するQ&A
- これはどういう意味のコードですか？
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="shift_jis"></script> これはどういう意味のコードですか？ 私のサイトに入ってるコードですが意味が分からないまま使っています。 サイト内でjqueryで検索機能はつけていますが ネットから拾ってきたものを組み合わせたものであり、 意味は分かっていません。 src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" の意味だけ教えていただけませんか？ jqueryを使う上での宣言みたいなものでしょうか？
- ベストアンサー
- JavaScript
- 複数jQueryの配置で干渉 設置位置
Javascript事は全くわかりませんが、色々なプラグインとしてjQueryを利用しています。 ----------------- jQueryに干渉があったようで、正常に動作させたいのですが、疑問があります。 １サイト目（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 正常に動作します。 ２サイト目（HTML head内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> 正常に動作します。 上記の２サイトを合体させた：（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script src="js/abcd.js" type="text/javascript"></script> すると、 layout.min.jsに不具合がでるようです・・・ <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> でも、ダメです。 <script src="vendor/jquery.min.js" type="text/javascript"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> に変更してもダメでした。 tel.js内を、 jQuery.noConflict(); (function($) { $(function(){ を $j に変えたり、 jQuery に 書き替えてもダメでした・・・ そこで、以下のように移動しましたら動作しました。 （HTML header内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> （HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 上記のように、 HTML head部と、HTML 最下部に分けるのは、正しい方法なのでしょうか？
- 締切済み
- JavaScript
- google apiの使用方法
jQueryとgoogleマップのapiを同時に使用する方法を教えていただきたいと思います。 両方を使用するとカスタマイズしたgoogleマップは表示されますが、jQueryに不具合が起きます。 同時に使用する方法はないでしょうか。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></script> 他に必要なことがあれば提示しますのでよろしくお願いします。
- 締切済み
- CSS
- 同HTML内で複数のjQueryを設置する方法
Movable Type５で作製しています。 複数のjQueryを使用し、（Ａ）はヘッダーにメニュー、（Ｂ）はコメントフォームにテキストをうっすらと出すプラグインを適用させようとしています。 それぞれ単品では問題なく作動するのですが、下記のように記述するとＢのみが作動する状態です。 jQueryもｊｓもよくわからない素人なのでわかりやすくご説明を頂けるとありがたいです。 使用しているものは以下です。 ---------------------------------------- <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> <script type="text/javascript"> var $ = jQuery = jQuery.noConflict().extend(true, $); … </script> <script type="text/javascript" src="<$mt:BlogURL$>js/jquery.updnWatermark.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $.updnWatermark.attachAll(); }); </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery-1.1.3.1.min.js"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery.easing.min.js"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery.lavalamp.min.js"></script> <script type="text/javascript"> $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 800, click: function(event, menuItem) { return true; } }); }); </script> http://okwave.jp/qa/q6602248.html ↑に質問をされた方のは見たのですが、それでもわかりません（同様の質問なのかも不明ですが・・・） 本当にわからないので、宜しくお願いします。
- ベストアンサー
- JavaScript
- 実行の順番を教えて下さい。
---------------------------------------------------------------------------------------------------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> ( tmp_jquery=jQuery ・・・（１） )( function(){ $=jQuery=tmp_jquery; ・・・（２） } ); </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <script> $(function(){ alert(jQuery.fn.jquery); ・・・（３） }); </script> ---------------------------------------------------------------------------------------------------------------- 上記の処理では、jQuery1.7.1をロードして後、jQuery1.2.3をロードしていますが、 （１）のところで、jQuery1.7.1を保持し、 （２）で再び$とjQuery変数にロードしているため （３）のところで、"1.7.1"と表示されます。 さて、ここで（２）の部分がいつ実行されるのかが理解できません。 そもそも、今回の処理で記述されている ()() の意味がわかりません。 クロージャーなどで、 (function(){})() と記述しますが、 function(){}を式として認識させるために丸括弧で囲っているのは、 以下のサイトで知りました。 http://d.hatena.ne.jp/amachang/20080208/1202448348 今回も同様の意味なのでしょうか？ だとすれば、（１）の前に（２）が実行されそうなのですが・・・。 どなたか、ご説明お願いできないでしょうか？
- ベストアンサー
- JavaScript
- 【javascript】２つ同時に上手く動かない
javascript初心者です。 現在作成している画面に２つのjavascriptを動かしたいと思っております。 しかしながら、一つずつでは動くのですが、同時に表示すると上手く動作しません。 いい方法などありましたらご教授お願い致します。 【htmlのヘッド】 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.coda-slider-2.0.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/sm_scroll.js"></script> <script type="text/javascript" src="js/jcaption.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $('#coda-slider-1').codaSlider({ autoSlide:false, autoHeight:false, autoSlideStopWhenClicked:false, autoSlideInterval:10000, firstPanelToLoad:1, dynamicArrows: false, }); }); </script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> 【上部のjavascript】 Coda-Slider 参照URL：http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_slider/coda_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 【下部のjavascript】 litebox 参照URL：http://lokeshdhakar.com/projects/lightbox2/ javascript内が初期化されているのが問題なのでしょうか？ 解決の方法などありませんでしょうか？ 以上、宜しくお願い致します。
- ベストアンサー
- JavaScript
- スクレイピングした内容をvalue値に入れたい
下記のようなページがあります。 ++++++++++++++++++++++++++++++++++++++++++ 【http://hoge.ne.jp/index.html】 <html> <table border="1"> <tbody> <tr> <td class="class3">東京</td> </tr> </tbody> </table> </html> ++++++++++++++++++++++++++++++++++++++++++ 【出来たこと】 上記の東京という文字を抜き出すスクレイピングページを作りました。 ****************************************** 【http://hogehoge.com/index.html】 <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); </script> <div id="text4"></div> </html> 結果 → 東京 ************************************** 【出来なかったこと】 これを、<input type="text" name="tx" value="東京"> のような形でフォーム内に取り入れることを考えています。 しかしながら、下記のようにうまくいきません。 ●●だめ その1●● <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); </script> <input type="text" name="tx" value="<div id='text4'></div>"> </html> 結果 → 表示されず ●●だめ その2●● <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); var tx4 = content4; document.write("<input type='text' name='tx' value='" + tx4 + "' />"); </script> </html> 結果 → 表示されず 【お願いしたいこと】 <input type="text" name="tx" value="東京">の形で表示させる方法についてアドバイスいただきたくお願いいたします。
- ベストアンサー
- JavaScript
- jquery3系がうまくいかない
jquery3系が出ていたので使ってみたのですが、CDNはうまくいったのですが、そのものをダウンロードして使うほうがうまくいきません。 https://code.jquery.com/jquery-3.1.1.min.js のソースコードをコピペしてjquery-3.1.1.min.jsというファイルを自分で作って下記のようにしているのですが、CDNが読み込まれなかった場合に読み込むというやり方のようです。 <!-- start load jquery --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script> <!--<![endif]--> <!-- end load jquery --> ・もちろん下記のようにもしましたが駄目でした。 <!-- start load jquery --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script> <!--<![endif]--> <!-- end load jquery -->
- ベストアンサー
- JavaScript
- RSSでアメブロの画像をサイトに表示させたい
自社サイトにquery.zrssfeed.min.jsを使ってアメブロの画像を表示させたいと考えております。 下記のソースコードですが、サイトに表示されません。 正常に表示できるよう教示頂けますでしょうか <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="js/jquery.zrssfeed.min.js"></script> <script type="text/javascript">// <![CDATA[ $(document).ready(function () { $('#rss').rssfeed('http://rssblog.ameba.jp/creamg/rss.html',{ snippet: false }, function(e) { $(e).find('div.rssBody').vTicker({ showItems: 3 }); }); }); // ]]></script> <div id="rss"> </div>
- 締切済み
- HTML
- jQueryが動きません。
表題のとおりです。 fademover(http://www.detelu.com/fademover/)を動かそうと思って 導入しても動いてくれません。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script> <script> $(function(){ $('body').fadeMover({'effectType': 2,'inSpeed': 5000}); }); </script> の部分。 Chromeだと Uncaught TypeError: Object [object Object] has no method 'fadeMover' index.html:14 (anonymous function) index.html:14 n ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 o.fireWith ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 e.extend.ready ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 c.addEventListener.B Safariだと TypeError: 'undefined' is not a function (evaluating '$('body').fadeMover({'effectType': 2,'inSpeed': 5000})') と出ます。 jsやjqueryはあまりいじったことないので 手が出ない状態です。 よろしくお願いします。
- 締切済み
- JavaScript
お礼
お返事ありがとうございます。 なるほど、タグにも２種類あったんですね。恥ずかしながら今までぜんぜん意識せずに、かいていました。