- 締切済み
loadの VanillaJS版は作れますか？
jQuery load()メソッドの VanillaJS版は作れますか？ jQuery load()メソッドはサーバー上で用います。 この代替関数は作れますか？ ＜仕様＞ ・jQuery等のプラグインは不要 ・ローカル環境でも稼働 ・外部HTMLファイルの一部のみ表示する [メインHTMLファイル] load_parent.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>sample</title> <style> #result { color: red; } </style> </head> <body> <h1>外部ファイルの一部表示</h1> <pre> jQuery load()メソッドの 脱jQuery版 テストです. ＜仕様＞ ・サーバー上だけでなく、ローカル環境でも稼働する。 ・リストの「３行目」だけを表示させる。 // jQuery version // $("#result").load("./load_child.html .row:nth-child(3)"); </pre> <hr> <div id="result">読み込み場所</div> </body> </html> [読込HTMLファイル] load_child.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>sample</title> </head> <body> <h1>読み込みファイル</h1> <pre> シンプルなHTMLファイルです. </pre> <ol> <li class="row">１行目</li> <li class="row">２行目</li> <li class="row">３行目</li> <li class="row">４行目</li> <li class="row">５行目</li> </ol> </body> </html> メインHTMLファイル内にJavaScriptでコーディングして 読み込み場所が「３行目」と書き換えられたら 代替関数になり得ます。
- retorofan
- お礼率86% (318/366)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
>jQuery load()メソッドの VanillaJS版は作れますか？ jQuery自体がJavaScriptで書かれているので作れないはずはありません。
お礼
ご回答ありがとうございます。
補足
＞作れないはずはありません。 作れるなら、 具体的なコードをご教示ください。 検証出来たらBAを差し上げます。
関連するQ&A
- jQueryタブメニュー内へのリンク方法。
javascript勉強中です。 調べたり試してみたりしたのですが、なかなか上手くいかず質問させていただきました。 下記のjQueryを使ったタブメニューなのですが、他のページからタブ内（tab1～tab3）へリンクさせるjavascriptの書き方や方法を教えていただけないでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function($) { $(".area").hide(); $(".tab_content").hide(); }); jQuery.event.add(window,"load",function(){ $(".tab01 li:first-child").addClass("active"); $(".area:first-child").show(); $(".tab01 li").each(function(i){ $(this).click(function(){ $(".content .area").hide(); $(".content .area").eq(i).fadeIn(400); if($(this).hasClass("active")){ $(".tab01 li").removeClass("active");} else {$(".tab01 li").removeClass("active"); $(this).addClass("active"); } }); }); }); </script> </head> <body> <div> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1">tab1</div> <div class="area" id="tab2">tab2</div> <div class="area" id="tab3">tab3</div> </div> </div> </body> </html> どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- 大量のチェックボックス状態取得について
質問させてください。 以下のようなHTML構造で連続している場合、 ID内全体のチェックボックスの状態を取得し、未チェックの物を非表示するにはどのようにすれば一番処理速度が速いのでしょうか？ <div id="hoge1"> <ul> <li> <ul class="Parents"> <li class="child"><input type="checkbox" name="AAA"></li> <li class="child"><input type="checkbox" name="BBB"></li> <li class="child"><input type="checkbox" name="CCC"></li> <li class="child"><input type="checkbox" name="DDD"></li> </ul> </li> <li> <ul class="Parents"> <li class="child"><input type="checkbox" name="AAA"></li> <li class="child"><input type="checkbox" name="BBB"></li> <li class="child"><input type="checkbox" name="CCC"></li> <li class="child"><input type="checkbox" name="DDD"></li> </ul> </li> ～～～～～～～～～～～～ ※繰り返し ～～～～～～～～～～～～ </ul> </div> 現在はjQueryで$ (ul.Parents li.child)で全体をラップし、for文のループ内で$eq()で１件毎chekedを参照し、.hide()を行っています。 動作自体は問題ないのですが、処理速度の遅さが気になっています。 速い方法でればjQueryを使用しない方法でもかまいません。 どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
- 入力欄を動的に増減させる
jquery.addInputAreaAdd Starhundret プログラミング, jQueryプラグイン の基本の入力欄を動的に増減させるデモ用のHTMLファイルを作りましたが、 入力欄が増減できません。 http://d.hatena.ne.jp/sutara_lumpur/20120509/1336556562 どこの記載が間違っているのでしょうか。 <html lang="ja-JP"> <head> <script type="text/javascript src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $('#list1').addInputArea(); </script> </head> <body> <ol id="list1"> <li class="list1_var"> <input type="text" size="40" name="list1_0" id="list1_0"> <button class="list1_del">Delete</button> </li> </ol> <input type="button" value="Add" class="list1_add"> </body> </html>
- ベストアンサー
- JavaScript
- jqueryの$.getJSONの処理結果について
jqueryの$.getJSONの結果およびその違いについて教えてください。 以下の(1)と(2)の処理があり、(2)を(1)と同じ様に 出力したいと考えておりますが、(2)では(1)のように 「class="ui-li-static ui-body-inherit ui-first-child"」などが 設定されずに出力されてしまいます。 そのため、どのように記述すれば(1)と同じ結果になるのかを ご教授いただけますでしょうか。 また、宜しければ(1)と(2)の処理の違いを 教えていただけると助かります。 ※chrome バージョン 43.0.2357.81 apache-tomcat-7.0.53 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ (1)固定値で埋め込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $('#listviewtest').append('<li>1:aaaaaaa</li>'); $('#listviewtest').append('<li>2:bbbbbbb</li>'); $('#listviewtest').append('<li>3:ccccccc</li>'); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ui> </div> </div> </body> </html> 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li class="ui-li-static ui-body-inherit ui-first-child">1:aaaaaaa</li> <li class="ui-li-static ui-body-inherit">2:bbbbbbb</li> <li class="ui-li-static ui-body-inherit ui-last-child">3:ccccccc</li> </ul> (2)$.getJSONで読み込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $.getJSON( 'test.js', null, function(data, status) { var items = []; $.each(data, function(key, val) { items.push('<li>' + val.id + ':' + val.name + '</li>'); }); $('#listviewtest').append(items.join('')).trigger('create'); } ); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ul> </div> </div> </body> </html> 外部ファイル（test.js） [ {"id":1,"name":"aaaaaaa"}, {"id":2,"name":"bbbbbbb"}, {"id":3,"name":"ccccccc"} ] 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li>1:aaaaaaa</li> <li>2:bbbbbbb</li> <li>3:ccccccc</li> </ul>
- ベストアンサー
- JavaScript
- jQueryでプルダウンメニュー
jQueryでプルダウンメニューを作ろうと思いまして、 とりあえず、リストにカーソルを合わせるとネストしたリストが表示されるようにしてみましたが、 うまく動きません。どうしてでしょうか？ ソースです↓ <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> google.load("jquery", "1"); </script> <script type="text/javascript"> $(function(){ $(ul li).hover( function(){ $(this).children(ul).show();}, function(){ $(this).children(ul).hide();} ); }); </script> </head> <body> <ul> <li>MENU <ul style="display:none;"> <li>sub-MENU1</li> <li>sub-MENU2</li> </ul> </li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- エクセルVBAでブックのデータをテキストファイルに
エクセル「Excel2003」ブックのデータを仕分けしてテキストファイルを作成する。 住所録（全国一覧表：シート１枚に記載）があります。 住所ごとにデータを分けて、個別のテキストファイルを作成する ※テキストファイルのファイル名は地域コード（英数字）にする。 tokyo.html ※テキストファイルの種類は、HTMLファイル ※住所録の項目は、 会社名、住所、電話、FAX、担当者、地域コード の６個 ※HTMLファイルに表示させるのは地域コードを除いた５項目 ※以下は、HTMLファイルの例になります。 <!DOCTYPE html> <html lang="en"> <body> <div class="span3" id="sidebar"> <div class="widget"> <h4 class="widgetTitle">会社名1</h4> <ul><li>住所1</li> <li>電話番号1</li> <li>ファックス1</li> <li>担当者1</li></ul></div> <div class="widget"> <h4 class="widgetTitle">会社名2</h4> <ul><li>住所2</li> <li>電話番号2</li> <li>ファックス2</li> <li>担当者2</li></ul></div> <div class="widget"> <h4 class="widgetTitle">会社名3</h4> <ul><li>住所3</li> <li>電話番号3</li> <li>ファックス3</li> <li>担当者3</li></ul></div> <div class="widget"> <h4 class="widgetTitle">会社名4</h4> <ul><li>住所4</li> <li>電話番号4</li> <li>ファックス4</li> <li>担当者4</li></ul></div> <div class="widget"> <h4 class="widgetTitle">会社名5</h4> <ul><li>住所5</li> <li>電話番号5</li> <li>ファックス5</li> <li>担当者5</li></ul></div> <div class="widget"> <h4 class="widgetTitle">会社名6</h4> <ul><li>住所6</li> <li>電話番号6</li> <li>ファックス6</li> <li>担当者6</li></ul></div> </div> </body> </html>
- ベストアンサー
- Visual Basic
- jqueryで外部ファイル読み込んだ後の動作
jqueryで外部ファイル読み込んだ後、読み込んだ外部ファイルに記述されたIDに対しての操作をしたいんですが、うまく行きません。 ブラウザに読み込ませるHTML(main.html) <html> <head> <script type="text/javascript" src="jquery.js"></script> <script> $(function(){ $("#main").load("loadfile.html"); }); $("#str").html("50"); </script> </head> <body id="main"> </body> </html> #mainに読み込ませるHTML(loadfile.html) <html> <head> </head> <body> <p id="str">00</p> </body> </html> 自分なりの予想ではloadfile.htmlを読み込んだ後、 まだDOM要素が操作できない状態の時に$("#str").html("50"); が実行されてしまっていると思われますが、 こういう時は.ready()とかをうまく使うのでしょうか？ 基本がまだ身についていなく、 とんちんかんな質問かもしれませんが、よろしくお願いします。
- ベストアンサー
- JavaScript
- ajax を使って，ｈｔｍｌを読み込み表示する方法
webページのfaqを作成しています。 目次が並んでいて，どれかひとつ質問をクリックすると，その下に回答が表示されるという仕組みにしようと考えています。 それについては以下のようにプログラムしてみました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div class="demo-show"> <h3>質問1</h3> <div>"answer1.html"を読み込んで表示</div> <h3>質問２</h3> <div>"answer2.html"を読み込んで表示</div> <h3>質問３</h3> <div>"answer3.html"を読み込んで表示</div> </div> </body> これにhtmlファイルを読み込む機能を持たせるために，<script>に一番下の3行を追加しました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); $("div.a-1").load("./answer1.html"); ←追加 $("div.a-2").load("./answer2.html"); ←追加 $("div.a-3").load("./answer3.html"); ←追加 }); }); </script> <body>は <div class="demo-show"> <h3>質問1</h3> <div. class="a-1"></div> <h3>質問２</h3> <div.class="a-2"></div> <h3>質問３</h3> <div.class="a-3"></div> </div> これを実行すると，文字の場所がずれて表示されてしまいます。 （今回の作業は既に出来上がっているページに機能を追加しているので，おそらくタグが干渉しあっているのだろうと思います。これは，細かく確認すれば直るとは思います） その他，細々と不具合があります。 また，質問の数は５０以上あります。 この方法以外に良い方法がありましたら教えていただけると助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
- H2にも色を付けたい、デザインを適用させたい
http://blog.direct-search.jp/2010/10/jquery-mobile.html のサイトを参考にしたのですが、 <h2>test</h2> も <h1>Header</h1> のように、 色を白にして背景を青にするデザインにするにはどうすればいいでしょうか？ 今は下記のコードのしていますが、 そうすると画像の様に、<h2>test</h2> は太字でtestになってしまいます。 <html> <head> <meta charset="utf-8"> <title>jQuery Mobile テスト</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <section data-role="page" data-theme="b" id="ds-home"> <header data-role="header" data-theme="b"> <h1>Header</h1> </header><!-- /header --> <article data-role="content"> <div>This is a test page.</div> <h2>test</h2> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Category</li> <li><a href="#ds-page-1">First Child</a></li> <li><a href="#ds-page-2">Second Child</a></li> </ul> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Category 2</li> <li><a href="#ds-page-3">First Child 2</a></li> <li><a href="#ds-page-4">Second Child 2</a></li> </ul> </article><!-- /content --> <header data-role="footer" data-theme="b"> <h2>Footer</h2> </header><!-- /footer --> </section><!-- /page --> </body> </html>
- ベストアンサー
- HTML
- JSP＆Servletについて
いつもお世話になっております。 JSP&Servletについての質問です。 ある画面からパラメーターを入力してServletに渡し、 その計算結果をResult.jspの画面に返すというツールを作成しているのですが、なぜか漢字が含まれていると文字化けしてしまいます。 ServletのほうでsetContentTypeメソッドを使っていないからでしょうか？ でもResult.jspのほうで以下のようにしているのでいけると思うのですが、、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>Result</TITLE> </HEAD> <BODY> <H1>Result</H1> <% String result = (String)request.getAttribute("result"); if (result != null){ %> <%= result %> <% } %> </BODY> </HTML> たとえば結果として 2002年と返したい場合 ２００２？と返ってきてしまいます。 お願いします。
- ベストアンサー
- Java
補足
var xhr = new XMLHttpRequest()； これでは、 ・ローカル環境でも稼働 この条件を満たしていませんね。