jqueryの一部機能の原理を教えて下さい
- jqueryの一部機能の原理を教えて頂きたいです。
- jqueryの使い方で要素のCSSスタイルを変更する方法があります。
- 自作のライブラリーで同じような処理を行いたい場合でも、jqueryのような書き方が便利です。
- ベストアンサー
jqueryの一部機能の原理を教えて下さい。
jqueryの使い方で以下のような書き方がありますよね？ $("p").css("color","red"); これの原理を教えて頂きたいです。 理由は同じような事をやりたいな～と思っても、以下のような書き方では上手くいかないですよね？ <p>aaa</p> <p>aaa</p> <script> function getElemTag(elem){ return document.getElementsByTagName(elem); } getElemTag("p").style.color = "red"; </script> そこで、自分のライブラリーではセレクターと一緒に、別の引数を色々渡して処理していたのですが、やはり不便なのでjqueryのように記述できるようにしたいと思ったからです。 宜しくお願いします。
- 1234567891012
- お礼率52% (9/17)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ざっくり過ぎますでしょうか？ エラー処理も無視。 querySelectorAll、Array#forEach が使えること。 <!DOCTYPE html> <meta charset="utf-8"> <title>jQueryがなんだって？</title> <body> <h1>Test</h1> <h2>Test2</h2> <script> function $ (q) { return new Q (document.querySelectorAll (q)); } function Q (es) { this.es = Array.prototype.slice.call (es, 0); } Q.prototype.css = function (p, v) { this.es.forEach (setCSS, arguments); return this; }; function setCSS (e) { e.style[this[0]] = this[1]; } $('h1, h2').css('color', 'red').css('borderBottom', '2px pink solid'); </script>
関連するQ&A
- jQueryについて教えてください
現在ドットインストールでjQueryを勉強しています いきなりつまずいたといいますかエラー？があります 以下のコードなのですが文字色（<p>）が赤色になりません なぜでしょうか？ このコードではjQueryはDLせずに読み込ませています DLしたほうがいいでしょうか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <body> <p>jQueryの練習</p> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function () { $('p').css('color', 'red'); }); </script> </body> </html>
- ベストアンサー
- JavaScript
- jQuery 読み込み
jQuery 読み込み ソースなのですが <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jqueryの練習</title> </head> <body> <p>jQueryの練習</p> <script src="http://code.jquery.com/jquery-1.10.1min.js"></script> <script> $(function(){ $('p').css('color','red').hide('slow'); }); </script> </body> </html> で9行目と11行目がエラーになります。 英語読めないのでエラーの内容はわかりませんが jQueryが読み込めてないのだと思っていて そこで質問なのですが 9行目で「http:～」と絶対パスで指定してるのにも関わらず jQueryを読み込めない理由って何かありますでしょうか？ （全く的外れな事を言い出していたらごめんなさい。）
- ベストアンサー
- JavaScript
- jQueryで配列の値をidのセレクタに使う方法
以下のようなjQueryのソースで、配列Xに入れた文字列A,B,Cがidの要素について、配列を介さずにCSSでcolorをredにしようとしたとき、そのまま書けば、『$('#A, #B, #C').css('color', 'red');』だと思うのですが、配列X[0],X[1],X[2]の表記を利用して、セレクタを指定するにはどうすればよいでしょうか。 具体的には、 『$('#'+X[0]).css('color', 'red'); $('#'+X[1]).css('color', 'red'); $('#'+X[2]).css('color', 'red');』 というコードを、cssを3回指定せずに、1回で済ませたいということです。 [jQueryソース] $(function(){ <p id='A'>1</p> <p id='B'>2</p> <p id='C'>3</p> X = []; X[0] = 'A'; X[1] = 'B'; X[2] = 'C'; $('#A, #B, #C').css('color', 'red'); });
- ベストアンサー
- JavaScript
- ウィンドウサイズを取得するjQuery
レスポンシブ対応の際、jQueryでリアルタイムにウィンドウサイズを取得する方法について質問です。 例えば「ウィンドウサイズが700以下の時、文字色を赤に変える」としたい時、検索すると下記のようにすればよいとでてきます。 ■ HTML <p>サンプルテキスト</p> ■ jQuery var WindowWidth = $(window).width(); $(window).resize(function(){ if(WindowWidth < 700){ $("p").css({ color: 'red' }); } else { $('#sample').css({ color: 'black' }); } }); 確かにこの記述をするとウィンドウサイズを変更すれば適用されるのですが、元々のサイズが700px以下のときには適用されません。 なので、今は下記のように記述しています。 ■ jQuery var WindowWidth = $(window).width(); $(function(){ if(WindowWidth < 700){ $("p").css({ color: 'red' }); } }); $(window).resize(function(){ if(WindowWidth < 700){ $("p").css({ color: 'red' }); } else { $('#sample').css({ color: 'black' }); } }); こう書くと希望通りの動作（ウィンドウサイズが700px以下のときは文字が赤色になり、ウィンドウサイズを変更するとリアルタイムで変更される）をしてくれるのですが、もう少しきれいにまとめられるのではないかな？と考えております。しかし、うまい記述方法がわからず…。 ご教授いただけると助かります。
- 締切済み
- JavaScript
- ｊQueryが使用できません
現在JavasscriptのｊQueryの学習をしているのですが、ｊQueryがうまくページ上で反映されず、さっそく困っています。 下記コードのようにカラー、フォントを指定しているのですが、反映されません。 方法としてはgoogleからｊQueryファイルを読み取って利用しようとしています。 ブラウザはgooglechoromeを使用しています。 <doctype! html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://code.jquery.com/jquery-1.10.1.min.js"> $(function(){ $("h1").css("background-color", "yellow"); $("strong, em").css({ "font-size": "150%", "font-style": "italic", "color": "blue" }); }); </script> </head> <body> <h1>jQuery</h1> <p><strong>jQury</strong>は便利なJavascriptの<em>ライブラリ</em></p> </body> </html> 解決方法に心当たりのある方、どうかよろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- jqueryが動作しない
jqueryが動作しません。 私が行った手順を書きます。jqueryのサイトからdownloadをします。英文だったのでDreamweaverで開いて名前を付けて別名で保存しました。jquery-1.8.0.js拡張子で保存。 ソースコードをかいてみました。 <html> <head> <script src="jquery-1.8.1.min.js"></script> // urlを指定した場合です。 <script src="http]//jquery-1.8.1.min .js"></script> </head> <body> <h1>Jquery</h1> <script> $(function(){ $('h1').css('color'.'red'); }); </script> </body> </html> これを保存します。（拡張子は.navi.html) 実行しても動作しません。どうしてでしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- ブログパーツのjquery利用について
ブログパーツでjqueryを使用してhtmlなどを出力したいのですが、 思い通りの動作ができません。 jsファイルの中身 ------------------------------------------------------------ document.write("<script type='text/javascript' src='http://hoge.com/jquery.js'></script>"); document.write('<link rel="stylesheet" type="text/css" href="http://hoge.com/hoge.css">'); $(function() { $("div").html("<p>aaaaaaaaa</p>"); }); document.write('<div></div>'); ------------------------------------------------------------ これじゃあ、ほかのサイトからjsを読み込んでも 出力されないのでしょうか？ （<script src="http://hoge.com/hoge.js"></script>） document.write("<div>aaa</div>");だけであれば、 ちゃんと出力されるのでjqueryの記述がおかしいのだと思います。 ご教授お願いいたします。
- ベストアンサー
- AJAX
- jquery uiが動かない
jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>
- ベストアンサー
- JavaScript
- jquery自体をJavaScriptで読み込む
以下のようなものを想定して、jquery.js という中身がjqueryでないものから jqueryの実態を読み込みをさせようとしているのですが、うまくいきません。 ・jquery 2以降は、IE8以前をサポートしなくなるので、useragentで 読み込むjqueryを選択したい。 ・現在、CGIスクリプト上で、jqueryの読み込みを判断しているが、できれば 外部JavaScriptで巨大なjqueryの読み込みの判断をさせたい。 ・キャッシュされたとしても、ライブラリであることから、圧縮して７０ｋバイトと あまりにも巨大である ・(googleapiを利用すると、IE8以前では、プライバシーの警告が出る場合がある） 確かに、スマホにjqueryを普通に読み込ませても、何も問題なく動作しますが、 相当がんばって圧縮をしても70kバイト程度のライブラリを、使用しないのに 読み込むというのも気が引ける部分もあります。 何とか、動的に、かつ、何も問題なく、jqueryをJavaScriptで読み込む方法は あるでしょうか？ このようなコードは、document.bodyがnullであるため、はじかれてしまいます。 var script = document.createElement('script'); script.src = 'http://hoge/jquery-1.js'; document.body.appendChild(script); var callee = arguments.callee; var interval = setInterval(function() { if (!document.evaluate) return; clearInterval(interval); interval = null; callee(); }, 100); このコードでも、jqueryを使用するものが、jQueryがないというエラーで、うまくいきません var scrptE = document.createElement("script"); scrptE.setAttribute("type", "text/javascript"); scrptE.setAttribute("language", "JavaScript"); scrptE.setAttribute("src", "http://hoge/jquery-1.js"); document.getElementsByTagName("head")[0].appendChild(scrptE); 以下のようなのは、googleapiのため、使わないものと考えます。 http://phpjavascriptroom.com/?t=ajax&p=jquery よろしくお願いします。
- ベストアンサー
- JavaScript
- jQuery: if文によるcss判定
こんにちは、 <p style="color:red;">テスト</p> $(function(){ $("p").click(function(){ if($(this).css("color")=="red"){ $(this).css("color", "blue"); }else{ $(this).css("color", "red"); } }); }); 以上のように、文字色が赤だった場合には青に、赤以外であった場合は赤に、というif文を記述しても機能しませんでした。=="red" の部分を !="red" とすると、文字色が変化するので、デフォルトの文字色が赤と判定されていないようです。色指定を16進数やrgb形式にしても結果は同じでした。p要素をクラスによる色指定(.red { color:red })に変更し、hasClass による条件分岐にした場合は、問題なく機能します。どうして上記が動作しないのか、どなたか教えて頂けませんか。よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
えっ基盤だけならこんなに簡単に書けたんですか！！ 原理も解りやすそうで助かります。 (^_^) querySelectorAllはそもそも存じ上げなくて、 prototypeの扱いも勉強不足でした。 早速、色々試してみます。 ありがとうございました。 P.S. JavaScriptって面白いですね！ 今後の勉強が捗りそうです。 (^-^) ありがとうございました。