jQueryの+（プラス）の使い方について

前へ 次へ
このQ&Aのポイント
  • jQueryのソースコード内で+（プラス）がどのように使われるのか、分かりにくい点です。
  • テキスト結合ではないので、+で囲む意味について教えていただけないでしょうか？
  • 本には詳細なルールが記載されていないので、参考になるサイト等があれば教えていただけると嬉しいです。
回答を見る
  • ベストアンサー

【jQuery基本質問】+(プラス）使い方について

jQueryを基本から勉強しています。そこで、jQueryデザイン入門という本の中で、以下のソースコードが記述されているのすが、+（プラス）の使われ方がどうしても理解できません。テキスト結合ではないでしょうし、、+で囲むことの意味について、教えていただけないでしょうか？またこういう細かいルール？が本には記載されていないのですが、、、何か参考になるサイト等あれば教えていただけると嬉しいです。 ◆ソースコード ※jquery部分のみ抜粋 ※不明点：before内img src内+の使い方 $(function(){ $("#navi a").click(function(){ $("#main img").before("<img src='"+$(this).attr("href")+"' alt=''>"); $("#main img:last").fadeOut("fast",function(){ $(this).remove(); }); return false; }); }); 以上です。 よろしくお願い致します。

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

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

単なるテキスト結合にしか見えませんが。 beforeの中身だけ取り出すと、"<img src='" + $(this).attr("href") + "' alt=''>"です。 これは<img src='hrefで指定しているURL' alt=''>という文字列を生成しているだけですよ。 jQueryに限らず、どの言語でも直感に反することはあまりしないので、+も足し算か文字列結合くらいにしか使われないと思いますよ。

tetetemama
質問者

お礼

ありがとうござます！シンプルに考えて、理解できました。まだまだ勉強中の身で、なかなかわからないことも多いのですが、地道になれていこうと思います。本当にありがとうございました。

  1. カテゴリ
  2. ビジネス・キャリア
  3. 職種
  4. SE・インフラ・Webエンジニア

関連するQ&A

  • jqueryについて

    jqueryについて こんな内容のjqueryをひとつにまとめて、なおかつ01～99（実績数）までのidを割り振る設定したいのですが可能でしょうか？ 例えば $(function(){ $("#navi01-99 a").click(function(){ $("#main01-99 img").attr("src",$(this).attr("href")); return false; }); みたいな感じであとはidに番号を付ければいいみたいな・・・出来ませんでしょうか？ 用途は仕事の制作実績で使用したいのですが、どなたか教えていただけますでしょうか？ $(function(){ $("#navi01 a").click(function(){ $("#main01 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi02 a").click(function(){ $("#main02 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi03 a").click(function(){ $("#main03 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi04 a").click(function(){ $("#main04 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi05 a").click(function(){ $("#main05 img").attr("src",$(this).attr("href")); return false; }); });

    • ベストアンサー
    • AJAX
  • jqueryが稀に動かない

    あるサイトからコピペしてきたソース $(function () { $('img').error(function () { $(this).attr({src: 'http://www.geocities.jp/kadenkoujiya1242/img/noimg.png'}); }); }); 画像がリンク切れしていた時などに代わりの画像を挿入するソースですが http://www.jslint.com/ で文法チェックしてみたら '$' was used before it was defined. $(function () { $('img').error(function () { $(this).attr({src: 'http://www.geocities.jp/kadenkoujiya1242/img/noimg.png'}); }); }); line 1 character 17 Missing 'use strict' statement. $(function () { $('img').error(function () { $(this).attr({src: 'http://www.geocities.jp/kadenkoujiya1242/img/noimg.png'}); }); }); と出ました。これはどのような意味があるのでしょうか？英語わかりません(泣) よかったらどのようにすれば治るかアドバイスお願いします！

  • jQueryで簡易なスライドショーを作ったのですが

    jQueryの練習に簡易なスライドショーを作ったのですが、画像を変えるごとに画面の一番上まで戻ってしまいます。以下にコードを載せますので、どなたかご教示いただければ幸いです。 $(function(){ var num = 0; $(".slideshow").click(function(){ $(this).fadeOut("500",function(){ var ptnum = (++num)%5 + 1; //5枚の画像をクリックで変える var ptname = "photos/pt_00" + ptnum + ".jpg"; $(this).attr("src",ptname); $(this).fadeIn("500"); }); }); }) HTMLの方は何の変哲もない <img src="photos/pt_001.jpg" class="slideshow" /> となっています。

  • jQueryの$(this)について

    閲覧ありがとうございます。 初歩的な質問で申し訳ないのですがthisのことがすこし混乱してしまい、わからなくなってしまったので下記の場合のthisはどこを読み込むか教えてもらえると助かります。 目的：aをクリックしたときimgのsrcにaのhrefに指定してあるものを埋め込む処理 $(function(){ $("a").click(function(){ $("ul li img").fadeOut(function(){ $(this).attr(src,$("a").attr("href")).fadeIn(); }); return false; });

  • jquery1.4で画像とリンクの切り替えを行おうとしています。

    jquery1.4で画像とリンクの切り替えを行おうとしています。 ひとまず動き的にはうまくは行っているのですが、切り替え対象の複数の画像をfloat:left;等で 横並びにすると、切り替えるたい画像をクリック後に規定の場所に画面が移動してしまいます。 対処法があれば教えていただけますでしょうか？ 【javascript】 $(document).ready( function() { $(".thumbnail p").click( function() { var changeSrc = this.src; var changeHref = this.href; $("#target img").fadeOut("fast", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); $("#target a").attr("href", changeHref); }); $(".thumbnail2 img").click( function() { var changeSrc = this.src; $("#target2").fadeOut( "slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); }); $(".thumbnail3 img").click( function() { var changeSrc = this.src; $("#target3").slideUp( "slow", function() { $(this).attr("src", changeSrc); $(this).slideDown(); } ); }); }); </script> 【HTML】 <div> <p id="target"><a href="./main.cgi?mode=details2&sid=1&gid=1S000046"><img src="./g_images/IMG_1457.jpg" width="240" height="320" alt="ブランドカテゴリー" /></a></p> </div> <div class="thumbnail"> <p href="./main.cgi?mode=details2&sid=1&gid=1S000043" src="./g_images/IMG_1457.jpg" class="item"> <img src="./g_images/IMG_1457.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000043">詳細</a></p> <p href="./main.cgi?mode=details2&sid=1&gid=1S000047" src="./g_images/IMG_1469.jpg" class="item"> <img src="./g_images/IMG_1469.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000047">詳細</a></p> </div> 【css】 .thumbnail { height:200px; text-align:center; } .item { float:left; padding-left:10px; margin-left:10px; }

  • jQuery 記述方法

    今、webサイトを作っていてjQueryを使用しようとしています。 しかし、うまくできません。外部にjavascriptファイルを置いています。 やりたいことは、ナビゲーションのロールオーバーです。 javascriptは初心者なのでどこが間違っているまたは足りないのかわかりません。以下に必要だと思うものを記述しますので分かる方がおりましたら教えてください。 javascriptファイルとjquery-1.6.4.min.jsはhtmlと同フォルダ内にあります。またimgフォルダ内に画像と拡張子の前に_onを付けた画像を入れています。 HTML <head> <script type="text/javascript" src="./jquery-1.6.4.min.js"></script> <script type="text/javascript" src="park.js"></script> </head> <body> <p><a href="index.html"> <img alt="top" height="50" class="navi" src="img/top.gif" width="100" /></a></p> </body> javascript $(function(){ $ ("img.navi").mouseover(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)_on(￥.{a-z]+)$/,"$1$2")); }).each(function(){ $("<img>").attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }); ]); です。 よろしくお願いします。

  • jQueryでの記述をjavascriptに

    下記のjQueryの記述をライブラリ無しのjavascriptでの記述にしていただきたいです。 imgタグのsrc属性とaタグのhref属性を相対パスから絶対パスに動的に変換させる必要があるのですが、ある事情でjQueryを使えないとの事で困っています。 どうかよろしくお願い致します。 <script type="text/javascript"> $(function(){ $('#hoge').children('img:not([src^=http])').each(function (){ var imgSrc = $(this).attr('src'); $(this).attr('src','http://xxxxxxxxxxxx' + imgSrc); }); $('#hoge').children('a[href^=○○○]').each(function (){ var aHref = $(this).attr('href'); $(this).attr('href','http://xxxxxxxxxxxx' + aHref); }); }); </script>

  • jQuery　class要素を盛り込むには

    画像をマウスオーバーで変化させるコードを、こちらで教えていただいたアドバイスに従って以下の内容で行っています。 $(function(){ $('span img').hover(function(){ $(this).attr('src', $(this).attr('src').replace('.jpg', 'x.jpg')); }, function(){ if (!$(this).hasClass('currentPage')) { $(this).attr('src', $(this).attr('src').replace('x.jpg', '.jpg')); } }); }); BODY部分は、 <SPAN><IMG src="画像.jpg"></SPAN> となっています。 けれど、よくよく考えると、マウスオーバーしたくない画像でも<SPAN>の中に記述していたらコードの影響をうけて、存在しない（マウスオーバー後の）画像を読み込もうとしてしまいます。 基本的な質問で申し訳ないのですが、 区別するため、例えば、マウスオーバーさせたい<SPAN>にはclass要素を入れて、 <SPAN class="change"><IMG src="画像.jpg"></SPAN> としたとして、上記のコードの、 $('span img').hover(function(){ の辺りをどうにか変えればいいように思うのですがよくわかりません。 基本的すぎて申し訳ありませんが、よろしくお願いします。

  • jqueryの質問。

    毎回、お世話になります。 jqueryを使ってリンク文字をクリックすると画像が変更できるようにしたいのですが、 上手くいきません。 <HTML> <body> <ul> <li><a href="DSC_0014.jpg">a</a></li> <li><a href="kamen.jpg">b</a></li> <li><a href="irumi.jpg">c</a></li> </ul> <p><img src="DSC_0014.jpg" width="1000" height="671"> <SCRIPT> $(function(){ ("a:eq(0)").click(function(){ $("img").attr("src","DSC_0014.jpg").attr("alt","人物"); return false }); $("a:eq(1)").click(function(){ $("img").attr("src","kamen.jpg").attr("alt","仮面"); return false }); $("a:eq(2)").click(function(){ $("img").attr("src","irumi.jpg").attr("alt","イルミ"); return false }); }); このコードだとリストa,b,cをクリックすると別ページに画像が表示されます。 その場での画像切り替えをしたいのですが、どこが間違っているのでしょうか? 宜しくお願い致します。

  • このjqueryが稀に動かない

    画像が無いときに表示されるscriptですが稀に動かない時があります１０分の４位動かないです。どのようにすればよろしいでしょうか？ <script type="text/javascript" src="/kadenkoujiya1242/js/jquery.js"></script> <script type="text/javascript" src="/kadenkoujiya1242/js/noimg.js"></script> $(function () { $('img').error(function(){ $(this).attr({src:'/kadenkoujiya1242/img/noimg.png',alt:'画像が見つかりません'}); }); });

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する